UITableView自定义单元格自适应：TextView与ImageView布局冲突问题

问题背景 #

开发iOS应用时，使用UITableView展示用户评论的自定义单元格，通过网络请求获取评论及关联图片，计算图片宽高比后在cellForRowAt方法中传递给自定义单元格。已设置表格自动行高（heightForRowAt设为自动尺寸）和预估行高80pt，TextView已禁用滚动。

需求 #

• TextView距离单元格顶部、左侧各5pt，右侧距离ImageView左侧5pt
• ImageView固定高度70pt，宽度根据传入的宽高比计算，距离顶部5pt
• 单元格高度随TextView内容自动扩展；当TextView内容较短时，ImageView需保持距离单元格底部至少5pt，避免被裁剪

当前实现代码 #

自定义单元格初始化约束 #

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    contentView.backgroundColor = .red
    contentView.addSubview(commentTextView)
    contentView.addSubview(relatedImage)
    NSLayoutConstraint.activate([
        commentTextView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
        commentTextView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 5),
        commentTextView.trailingAnchor.constraint(equalTo: relatedImage.leadingAnchor, constant: -5),
        commentTextView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
        
        relatedImage.heightAnchor.constraint(equalToConstant: 70),
        relatedImage.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10),
        relatedImage.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 5),
        relatedImage.bottomAnchor.constraint(lessThanOrEqualTo: contentView.bottomAnchor, constant: -5),
    ])
    aspectConstraint = relatedImage.widthAnchor.constraint(equalTo: self.relatedImage.heightAnchor, multiplier: 1)
}

图片设置方法 #

func setUpImage(aspectRatio: Double, image: UIImage) {
    relatedImage.image = image
    aspectConstraint.isActive = false
    relatedImage.widthAnchor.constraint(equalTo: self.relatedImage.heightAnchor, multiplier: aspectRatio).isActive = true
    contentView.layoutIfNeeded()
}

完整自定义单元格代码 #

class CommentCell: UITableViewCell {

    let usernameLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 15, weight: .semibold)
        label.textColor = .white
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let timeAgoLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 12, weight: .regular)
        label.textColor = .white
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let commentTextView: UITextView = {
        let textView = UITextView()
        textView.translatesAutoresizingMaskIntoConstraints = false
        textView.textColor = .white
        textView.backgroundColor = .red
        textView.text = "Send a comment"
        textView.isEditable = false
        textView.isScrollEnabled = false
        textView.alpha = 1
        textView.keyboardDismissMode = .none
        textView.returnKeyType = .send
        textView.isHidden = false
        textView.layer.borderColor = UIColor.yellow.cgColor
        textView.layer.borderWidth = 1
        textView.contentMode = .left
        
        return textView
    }()
    
    private let relatedImage: UIImageView = {
        let vw = UIImageView()
        vw.contentMode = .scaleAspectFit
        vw.translatesAutoresizingMaskIntoConstraints = false
        vw.isUserInteractionEnabled = true
        vw.clipsToBounds = true
        vw.layer.masksToBounds = true
        
        return vw
    }()
    
    var aspectConstraint: NSLayoutConstraint!
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        contentView.backgroundColor = .red
        contentView.addSubview(commentTextView)
        contentView.addSubview(relatedImage)
        NSLayoutConstraint.activate([
            commentTextView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
            commentTextView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 5),
            commentTextView.trailingAnchor.constraint(equalTo: relatedImage.leadingAnchor, constant: -5),
            commentTextView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            
            relatedImage.heightAnchor.constraint(equalToConstant: 70),
            relatedImage.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10),
            relatedImage.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 5),
            relatedImage.bottomAnchor.constraint(lessThanOrEqualTo: contentView.bottomAnchor, constant: -5),
        ])
        aspectConstraint = relatedImage.widthAnchor.constraint(equalTo: self.relatedImage.heightAnchor, multiplier: 1)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setUpImage(aspectRatio: Double, image: UIImage) {
        relatedImage.image = image
        aspectConstraint.isActive = false
        relatedImage.widthAnchor.constraint(equalTo: self.relatedImage.heightAnchor, multiplier: aspectRatio).isActive = true
        contentView.layoutIfNeeded()
    }
    
}

遇到的问题 #

无法同时满足三个约束要求：

1. commentTextView根据内容自动调整单元格高度
2. ImageView固定高度70pt且距离顶部5pt
3. ImageView至少距离单元格底部5pt，内容短时不被裁剪

解决方案 #

问题核心是约束的优先级和依赖逻辑冲突，调整约束如下：

1. 修改初始化约束逻辑 #

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    contentView.backgroundColor = .red
    contentView.addSubview(commentTextView)
    contentView.addSubview(relatedImage)
    
    // 初始化时激活默认宽高比约束，避免布局冲突
    aspectConstraint = relatedImage.widthAnchor.constraint(equalTo: relatedImage.heightAnchor, multiplier: 1)
    aspectConstraint.isActive = true
    
    NSLayoutConstraint.activate([
        // TextView约束：修正边距为需求的5pt，调整底部依赖逻辑
        commentTextView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 5),
        commentTextView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 5),
        commentTextView.trailingAnchor.constraint(equalTo: relatedImage.leadingAnchor, constant: -5),
        // TextView底部优先跟随内容，同时保证不高于ImageView底部（低优先级）
        commentTextView.bottomAnchor.constraint(lessThanOrEqualTo: contentView.bottomAnchor, constant: -5),
        commentTextView.bottomAnchor.constraint(greaterThanOrEqualTo: relatedImage.bottomAnchor).priority = .defaultHigh,
        
        // ImageView约束：确保底部间距优先级，固定高度
        relatedImage.heightAnchor.constraint(equalToConstant: 70),
        relatedImage.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10),
        relatedImage.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 5),
        // 强制ImageView底部至少留5pt间距
        relatedImage.bottomAnchor.constraint(lessThanOrEqualTo: contentView.bottomAnchor, constant: -5).priority = .required,
    ])
}

2. 优化图片设置方法 #

func setUpImage(aspectRatio: Double, image: UIImage) {
    relatedImage.image = image
    aspectConstraint.isActive = false
    // 更新宽高比约束并激活
    aspectConstraint = relatedImage.widthAnchor.constraint(equalTo: relatedImage.heightAnchor, multiplier: aspectRatio)
    aspectConstraint.isActive = true
    // 无需手动调用layoutIfNeeded，表格自动布局会处理
}

额外注意事项 #

• 确保TextView的isScrollEnabled保持false，保证其根据内容自动调整高度
• 表格自动行高设置需正确：

  tableView.rowHeight = UITableView.automaticDimension
  tableView.estimatedRowHeight = 80
  

• 当前代码中usernameLabel和timeAgoLabel未添加到contentView也未设置约束，会导致布局异常，建议补充：

  contentView.addSubview(usernameLabel)
  contentView.addSubview(timeAgoLabel)
  NSLayoutConstraint.activate([
      usernameLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 5),
      usernameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 5),
      timeAgoLabel.leadingAnchor.constraint(equalTo: usernameLabel.trailingAnchor, constant: 8),
      timeAgoLabel.centerYAnchor.constraint(equalTo: usernameLabel.centerYAnchor),
      // 调整TextView的top约束到用户名标签底部
      commentTextView.topAnchor.constraint(equalTo: usernameLabel.bottomAnchor, constant: 5)
  ])
  

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