Swift聊天App：TableView Cell图文消息UI布局实现求助

问题说明 #

开发聊天App时，TableView的发送者Cell（SenderTVC）无法正确展示带文本的图片消息，当前UI不符合预期，需要实现大尺寸图片搭配底部文本的Cell样式（对应目标截图效果）。

当前Cell代码 #

import UIKit

class SenderTVC: UITableViewCell {
    @IBOutlet weak var senderImage: UIImageView!
    @IBOutlet weak var lblSenderMsg: UILabel!
    @IBOutlet weak var lblSenderTime: UILabel!
}

具体实现方案 #

1. Xib布局重构 #

• 层级与约束调整
  • 用一个UIView作为消息容器（可选，用于添加气泡背景、圆角），将senderImage和两个标签放入该容器内。
  • 容器View约束：设置右侧间距（比如16pt）、顶部/底部间距（各8pt），左侧设置最大宽度约束（比如屏幕宽度的70%），确保消息不会过宽。
  • 图片约束：senderImage与容器View的顶部、左、右对齐，设置宽度等于容器View宽度，高度先设预估值（后续通过代码动态调整）；设置contentMode为Aspect Fit或Aspect Fill，勾选Clips To Bounds避免图片溢出。
  • 文本标签约束：lblSenderMsg与senderImage的底部、左、右对齐，设置上下间距（比如8pt），numberOfLines设为0以支持多行显示；lblSenderTime与lblSenderMsg的底部右对齐，设置左侧间距（比如8pt），同时与容器View的底部保持8pt间距，字体设为小号（比如12pt）。
• 约束完整性：确保所有控件的约束形成完整垂直链（容器顶部 → 图片 → 文本 → 时间 → 容器底部 → Cell底部），保证自动高度计算生效。

2. Cell代码补充 #

添加配置方法，处理图片尺寸适配与文本赋值：

extension SenderTVC {
    func configure(with image: UIImage, text: String, time: String) {
        senderImage.image = image
        
        // 根据原图比例和容器宽度，计算图片显示高度
        let containerMaxWidth = UIScreen.main.bounds.width * 0.7
        let imageRatio = image.size.height / image.size.width
        let targetImageHeight = containerMaxWidth * imageRatio
        senderImage.heightAnchor.constraint(equalToConstant: targetImageHeight).isActive = true
        
        lblSenderMsg.text = text
        lblSenderTime.text = time
    }
}

3. TableView自适应高度设置 #

在ViewController中配置TableView，开启自动高度：

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.register(UINib(nibName: "SenderTVC", bundle: nil), forCellReuseIdentifier: "SenderTVC")
    // 开启自动高度计算
    tableView.estimatedRowHeight = 250 // 预估高度，按需调整
    tableView.rowHeight = UITableView.automaticDimension
}

// Cell复用方法
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "SenderTVC", for: indexPath) as! SenderTVC
    // 假设message是自定义消息模型
    let message = messages[indexPath.row]
    cell.configure(with: message.image, text: message.text, time: message.time)
    return cell
}

4. 细节优化 #

• 给图片容器View添加圆角（比如12pt），发送者Cell可设置左上角、左下角、右下角圆角，贴合聊天气泡样式。
• 给senderImage添加点击手势，支持查看大图。
• 补充图片加载失败的占位图逻辑。

内容的提问来源于stack exchange，提问作者Sham Dhiman