在聊天应用程序中的集合视图中调整单元格大小时遇到​​问题

时间:2017-09-23 13:13:51

标签: ios swift uicollectionview resize constraints

我正在创建一个小聊天消息应用程序。为此我正在使用集合视图。我发现了很多代码,并设法将它组合在一起以使其工作。但是现在我尝试在自定义单元格中添加一些额外的标签,并在组聊天中添加用户名。但似乎我无法在气泡视图中添加任何标签。 timeLabel位于气泡视图下方,尽管我设置了约束,时间表应该位于textView下面的气泡视图中。

以下是代码:

override init(frame: CGRect) {
    super.init(frame: frame)

    addSubview(bubbleView)
    addSubview(textView)
    addSubview(profileImageView)
    addSubview(timeView)
    addSubview(usernameView)



    //x,y,w,h
    profileImageView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 8).isActive = true
    // profileImageView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
    profileImageView.widthAnchor.constraint(equalToConstant: 32).isActive = true
    profileImageView.heightAnchor.constraint(equalToConstant: 32).isActive = true
    profileImageView.topAnchor.constraint(equalTo: bubbleView.topAnchor).isActive = true

    //x,y,w,h

    bubbleViewRightAnchor = bubbleView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -8)
    bubbleViewRightAnchor?.isActive = true
    bubbleViewLeftAnchor = bubbleView.leftAnchor.constraint(equalTo: profileImageView.rightAnchor, constant: 8)
    // bubbleViewLeftAnchor?.isActive = false
    bubbleView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
    bubbleWidthAnchor = bubbleView.widthAnchor.constraint(equalToConstant: 200)
    bubbleWidthAnchor?.isActive = true
    bubbleView.heightAnchor.constraint(equalTo: self.heightAnchor).isActive = true

    //ios 9 constraints
    //x,y,w,h
   //  textView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
    textView.leftAnchor.constraint(equalTo: bubbleView.leftAnchor, constant: 8).isActive = true
    textView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
    textView.rightAnchor.constraint(equalTo: bubbleView.rightAnchor).isActive = true
    // textView.widthAnchor.constraint(equalToConstant: 200).isActive = true
    textView.heightAnchor.constraint(equalTo: self.heightAnchor).isActive = true
    textView.bottomAnchor.constraint(equalTo: timeView.topAnchor, constant: 8).isActive = true

    timeView.rightAnchor.constraint(equalTo: textView.rightAnchor, constant: 8).isActive = true
    //timeView.topAnchor.constraint(equalTo: bubbleView.bottomAnchor, constant: 8).isActive = true
    timeView.heightAnchor.constraint(equalTo: self.heightAnchor).isActive = true
    timeWidthAnchor = timeView.widthAnchor.constraint(equalToConstant: 40)
    timeWidthAnchor?.isActive = true

  /*  usernameView.leftAnchor.constraint(equalTo: profileImageView.rightAnchor, constant: 8).isActive = true
    usernameView.bottomAnchor.constraint(equalTo: textView.topAnchor).isActive = true
    nameWidthAnchor =  usernameView.widthAnchor.constraint(equalToConstant: 100)
    nameWidthAnchor?.isActive = true
    usernameView.heightAnchor.constraint(equalToConstant: 20)
    nameHeightAnchor?.isActive = true */
}

我认为问题是集合视图中的sizeForItemAt方法。但说实话,我不知道如何更改该方法,以便它仍然可以像现在一样使用textview。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    var height: CGFloat = 80
    let text: String?
    //get estimated height somehow????
    if messages[indexPath.item].text != nil {
        text = messages[indexPath.item].text
        height = estimateFrameForText(text!).height + 20
    }

    let width = UIScreen.main.bounds.width
    return CGSize(width: width, height: height)
}

fileprivate func estimateFrameForText(_ text: String) -> CGRect {
    let size = CGSize(width: 200, height: 1000)
    let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin)
    return NSString(string: text).boundingRect(with: size, options: options, attributes: [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 16)], context: nil)
}

sample chat

1 个答案:

答案 0 :(得分:0)

请尝试以下操作:

  1. UICollectionViewCell子类中,将子视图添加到contentView,而不是直接添加到单元格
  2. 在单元格中,确保子视图的约束与contentView
  3. 相关联
  4. 如果您使用的是UICollectionViewFlowLayout,请设置itemSize = UICollectionViewFlowLayoutAutomaticSize
  5. 如果您使用的是UICollectionViewFlowLayout,请将estimatedItemSize设置为近似大小