管理聊天视图的自动布局约束

我正在创建一个聊天视图，并且正在尝试基于自动布局设计单元格。我的主要问题是，有一个图像视图，正下方有一个聊天文本标签，它显示多行，如果没有图像，则只显示文本，如果没有文本，则只显示图像。图像应该是单元格宽度的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这样的第三方。我已经知道这些。我正在做这个作为学习的一部分。

来源

2016-07-08 Gamerlegend

您是否已为聊天标签设置固定高度限制？ –

不，我只设置顶部，底部，领先和尾随其超级视角。 – Gamerlegend

您只需为单元格中的所有组件设置底部约束。并调用表视图（EstimatedRowHight和HightForRow）的委托方法。它会返回细胞的确切高度，并且您还可以自定义它是否显示。

请记住，文本标签应该具有关于其他组件的底部约束属性。希望您明白我的意思。

来源

2016-07-08 09:59:47

是的，我已经把底部约束，但问题是，我必须根据数据减少图像或文本的高度为0，那时它会产生问题。 – Gamerlegend

如果UIImageView和UILabel永远不会显示在同一个单元格中，则可以删除它们之间的所有约束关系，并使每个约束与superview关联。然后通过一些代码，您可以管理UIImageView或UILabel可见性，并为CollectionView/TableView委托方法中的每个单元格计算适当的高度。

来源

2016-07-08 10:04:32 lubilis

如果有图像和文字，则会显示两者。 – Gamerlegend

我认为问题出在你的线

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

非但没有chatText.frame高度的应该手动计算的高度。我使用以下函数来计算单元格高度：

+ (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; 
}

来源

2016-07-08 16:01:21 Sunny

管理聊天视图的自动布局约束

回答

相关问题