Swift 5 iPad端UITableViewCell标签横向重叠布局优化求助

核心修改思路 #

1. 移除所有硬编码的widthAnchor约束，改用相对约束动态分配空间
2. 让contentAuthorLabel和contentDetailsLabel保持宽度相等
3. 给contentTitleLabel设置更高的内容压缩阻力优先级，确保它优先占用剩余空间的大部分
4. 修正二维码图片的leading约束错误（原代码错误关联到详情标签的leading）

修改后的完整代码 #

import UIKit

class CustomCell: UITableViewCell {
    
    var contentImageView    = UIImageView()
    var contentTitleLabel   = UILabel()
    var contentAuthorLabel  = UILabel()
    var contentDetailsLabel = UILabel()
    var contentQRCodeView   = UIImageView()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        addSubview(contentImageView)
        addSubview(contentTitleLabel)
        addSubview(contentAuthorLabel)
        addSubview(contentDetailsLabel)
        addSubview(contentQRCodeView)
        
        configureImageView()
        configureTitleLabel()
        configureAuthorLabel()
        configureDetailsLabel()
        configureQRCodeView()
        
        setConstraints()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func set(content: ContentCellItem) {
        contentImageView.image = content.image
        contentTitleLabel.text = content.name
        contentAuthorLabel.text = content.author
        contentDetailsLabel.text = content.details
        contentQRCodeView.image = content.qrCode
    }
    
    func configureImageView() {
        contentImageView.layer.cornerRadius = 10
        contentImageView.clipsToBounds = true
    }
    
    func configureTitleLabel() {
        contentTitleLabel.numberOfLines = 0
        contentTitleLabel.adjustsFontSizeToFitWidth = true
        // 高优先级阻止标题被压缩，确保优先占用空间
        contentTitleLabel.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
    }
    
    func configureAuthorLabel() {
        contentAuthorLabel.numberOfLines = 0
        contentAuthorLabel.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
    }
    
    func configureDetailsLabel() {
        contentDetailsLabel.numberOfLines = 0
        contentDetailsLabel.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
    }
    
    func configureQRCodeView() {
        contentQRCodeView.layer.cornerRadius = 10
        contentQRCodeView.clipsToBounds = true
    }

    func setConstraints() {
        // 批量禁用自动转换约束
        [contentImageView, contentTitleLabel, contentAuthorLabel, contentDetailsLabel, contentQRCodeView].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        NSLayoutConstraint.activate([
            // 左侧固定尺寸图片
            contentImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
            contentImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
            contentImageView.heightAnchor.constraint(equalToConstant: 64),
            contentImageView.widthAnchor.constraint(equalToConstant: 128),
            
            // 标题标签：左侧接图片，垂直居中
            contentTitleLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            contentTitleLabel.leadingAnchor.constraint(equalTo: contentImageView.trailingAnchor, constant: 20),
            contentTitleLabel.heightAnchor.constraint(equalToConstant: 64),
            
            // 作者标签：左侧接标题，与详情标签等宽
            contentAuthorLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            contentAuthorLabel.leadingAnchor.constraint(equalTo: contentTitleLabel.trailingAnchor, constant: 20),
            contentAuthorLabel.heightAnchor.constraint(equalToConstant: 64),
            contentAuthorLabel.widthAnchor.constraint(equalTo: contentDetailsLabel.widthAnchor),
            
            // 详情标签：左侧接作者
            contentDetailsLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            contentDetailsLabel.leadingAnchor.constraint(equalTo: contentAuthorLabel.trailingAnchor, constant: 20),
            contentDetailsLabel.heightAnchor.constraint(equalToConstant: 64),
            
            // 右侧固定尺寸二维码：左侧接详情标签，右侧贴单元格边缘
            contentQRCodeView.centerYAnchor.constraint(equalTo: centerYAnchor),
            contentQRCodeView.leadingAnchor.constraint(equalTo: contentDetailsLabel.trailingAnchor, constant: 20),
            contentQRCodeView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
            contentQRCodeView.heightAnchor.constraint(equalToConstant: 64),
            contentQRCodeView.widthAnchor.constraint(equalToConstant: 64)
        ])
    }
}

关键说明 #

• 优先级控制：通过内容压缩阻力优先级的差异，保证标题标签在空间不足时最后被压缩，始终占用最大可用宽度
• 等宽约束：直接关联两个标签的widthAnchor，确保它们在任何屏幕尺寸下宽度一致
• 约束批量管理：用NSLayoutConstraint.activate批量激活约束，代码更简洁且性能更优
• 布局连贯性：修正二维码的leading约束逻辑，让整个单元格的元素从左到右依次衔接

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