自定义 UITableViewCell 随机更改宽度swift

编程问答 2022-05-31

问题描述

我正在制作一个带有聊天功能的 swift 国际象棋应用程序。我将消息上传到 firebase firestore，然后将它们下载到 [Message] 数组中并在 UITableView 中显示。

我一直在 stackoverflow 上四处寻找这个问题，发现有几个人在自定义 UITableViewCell 的大小方面遇到了问题。我遇到了同样的问题，但就我而言，每次调用 .reloadData() 时，单元格的宽度似乎都会随机改变。举例说明：

前 2 次左右，当我在聊天中输入内容时，它应该如下所示（圆圈中的单元格）

enter image description here

但是正如您在几次之后看到的那样：

enter image description here

我的代码： 自定义单元格类

class MessageCustomCell: UITableViewCell {

    @IBOutlet weak var dateLabel: UILabel!
    @IBOutlet weak var bgView: UIView!
    @IBOutlet weak var leftimage: UIImageView!
    @IBOutlet weak var messageBubble: UIView!
    @IBOutlet weak var messageLabel: UILabel!
    @IBOutlet weak var rightimage: UIImageView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        messageLabel.numberOfLines = 0
        messageBubble.layer.cornerRadius = 5
    }
}

TableView 委托方法（TableView = messageView）

func tableView(_ tableView: UITableView,numberOfRowsInSection section: Int) -> Int {
    return allMessages.count
}

func tableView(_ tableView: UITableView,cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = messageView.dequeueReusableCell(withIdentifier: "MessageCustomCell") as! MessageCustomCell
    //cell.width = tableView.frame.width
    let msg = allMessages[indexPath.row]
    //cell.frame.size.width = messageView.frame.width
    //cell.contentView.frame.size.width = messageView.frame.width
    let date = msg.time
    let dateFormatter = DateFormatter()
    dateFormatter.dateFormat = "d/M/yy,h:mm"
    let realDate = dateFormatter.string(from: date)
    print(msg.fromUserName!)

    if msg.fromUserName! == currentUserName {
        cell.messageBubble.backgroundColor = UIColor(named: "lightSquare")
        cell.messageLabel.textColor = .black
        cell.rightimage.isHidden = true
    } else {
        cell.messageBubble.backgroundColor = UIColor(named: "darkSquare")
        cell.messageLabel.textColor = .white
        cell.leftimage.isHidden = true
    }
    cell.dateLabel.text = realDate
    cell.messageLabel.text = msg.text!
    return cell
}

在我的 MessageCustomcell.xib 文件中，我有一些限制：

  • 我已将 leftimage、messageBubble (UIView)、rightimage 放在水平堆栈视图中。图像只有宽度和高度限制。 messageBubble 中的标签对其父视图有约束（顶部、底部、尾随、前导）
  • stackView 对 bgView (UIView) 有约束，也有上下尾随和前导。
  • 对于安全区域的 bgView 也是如此。

我已经尝试为自定义单元格设置框架，但这似乎不起作用，所以我已将其注释掉。

真的希望有人能帮助我。如果你们需要更多信息，请告诉我:) 谢谢大家。

编辑：

这是我对自定义单元格 xib 文件的约束。

enter image description here

解决方法

好的，感谢@SPatel，他指出为接收者聊天气泡和发送者聊天气泡制作 2 个单独的 .xib 文件。这实际上适用于我的情况，并且首先是正确的方法，而不是为发送方和接收方操作一个自定义单元格。

我认为约束问题与我试图隐藏右侧图像或左侧图像以更改两侧的自定义单元格外观有关。那一定搞砸了自定义单元格的整个约束情况。

无论如何，快乐的人。继续前进！

custom-cellswiftswiftswiftuitableviewuitableviewuitableview