チャットビューの自動レイアウト制約の管理

Question

私はチャットビューを作成していますが、現在はautolayoutに基づいてセルを設計しようとしています。私の主な問題は、画像のビューがあり、その下に複数の行になるチャットテキストのラベルがあり、画像がない場合はテキストのみが表示され、テキストがない場合は画像のみが表示されるはずです。画像はセル幅の60％、高さは40％にする必要があります。以下は私のセルデザインです。わかりやすくするため、各ビューに背景色を追加しました。

しかし、比例の高さを与えることによって、私はプログラム的にその高さを設定することはできませんよ。だから私は現在、画像ビューの固定高さを与え、プログラムでコード内で管理しようとしました。以下は、私がimageviewとチャットのテキストの高さを調整する私のコードです。

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { 
     let cell : ChatViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("chatCell", forIndexPath: indexPath) as! ChatViewCell 

     cell.fullNameLabel.text = tempArray[indexPath.row].0 
     cell.fullDateLabel.text = tempArray[indexPath.row].1 
     cell.chatSentStatusLabel.text = tempArray[indexPath.row].2 
     cell.chatTimeLabel.text = tempArray[indexPath.row].3 


     let chatBubbleData1 = tempArray[indexPath.row].4 

     if (chatBubbleData1.image == nil) 
     { 
      cell.chatImageHeightConstraint.constant = 0 
     } 
     else 
     { 
      cell.chatImageHeightConstraint.constant = 150 

     } 

     cell.chatTextContainerView?.layer.cornerRadius = 10.0 
     cell.chatTextContainerView?.layer.masksToBounds = true 

     cell.chatBubbleView?.layer.cornerRadius = 10.0 
     cell.chatBubbleView?.layer.masksToBounds = true 

     cell.chatImageView.image = chatBubbleData1.image 
     cell.userPointerView.colors = (0.0, 0.0, 1.0, 1.0) 
     cell.userPointerView.backgroundColor = .clearColor() 

     cell.chatImageView?.layer.cornerRadius = 10.0 
     cell.chatImageView?.layer.masksToBounds = true 

     if (chatBubbleData1.text?.characters.count > 0) 
     { 
      cell.chatText?.numberOfLines = 0 // Making it multiline 
      cell.chatText?.text = chatBubbleData1.text 
      cell.chatText?.sizeToFit() 
      cell.chatTextContainerHeightConstraint.constant = CGRectGetHeight(cell.chatText.frame)+20 
     } 
     else 
     { 
      cell.chatText?.text = "" 
      cell.chatTextContainerHeightConstraint.constant = 0 
     } 

     cell.setNeedsDisplay() 
     return cell 
    } 

これは今

複数行が動作しているようだしない結果です。私が最良のアプローチに従っているかどうかはわかりません。誰かが解決策や示唆を持っているなら、私に知らせてください。

PS：JSQMessagesViewControllerのような第三者はお勧めしません。私はすでにそれらを認識しています。私はこれを学習の一環としてやっています。

Answer 1

セル内のすべてのコンポーネントに対して下限制約を設定するだけです。 とテーブルビュー（EstimatedRowHightとHightForRow）の代理メソッドを呼び出します。 それはセルの正確な高さを返します。また、表示するかどうかをカスタマイズすることもできます。

テキストラベルには、他のコンポーネントに対して下限の制約プロパティが必要です。

Answer 2

UIImageViewとUILabelが同じセルに表示されない場合は、それらの間のすべての制約関係を削除し、それぞれをスーパービューのみと関連付けることができます。次に、いくつかのコードで、UIImageViewまたはUILabelの可視性を管理し、CollectionView/TableViewデリゲートメソッドで各セルの適切な高さを計算できます。

Answer 3

私はこの問題は、代わりにあなたが手動で高さを計算する必要がありますchatText.frameの高さを得ることのあなたのラインに

cell.chatTextContainerHeightConstraint.constant = CGRectGetHeight(cell.chatText.frame)+20 

だと思います。私は以下の関数を使ってセルの高さを計算しました：

+ (CGFloat)calculateCellHeightForText:(NSString *)text cellWidth:(CGFloat)cellWidth { 
    CGFloat maxWidth = cellWidth; 
    CGSize textSize = [text boundingRectWithSize:CGSizeMake(maxWidth, MAXFLOAT) 
             options:NSStringDrawingUsesLineFragmentOrigin 
             attributes:@{NSFontAttributeName : [UIFont fontWithName:@"CALIBRI" size:17]} 
             context:nil].size; 
    return textSize.height; 
}