UITableView 单元格自动布局约束

Question

我有两个问题，但希望它们是相关联的！我有以下 UITableView 模板，我正在尝试设置：-

• 白色区域是表格背景
• 紫色是类别标题（这可以与紫色区域一样少或多）
• 红色是“查看全部”按钮，应固定在右侧。
• 绿色是水平 UICollectionView，但每个表格行可以有不同的集合视图高度（注意第 1 行和第 2 行之间的差异；第 3 行在屏幕底部被截断）
• 粉红色的线是行分隔符

到目前为止，我已经创建了以下类

import UIKit

class CategoryRowCell: UITableViewCell {
    let gradient = GradientView()
    let titleLbl = UILabel()
    let viewAllBtn = UIButton(type: .custom)
    let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: 0, height: 0), collectionViewLayout: UICollectionViewFlowLayout())

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.setupCategoryViews()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func prepareForReuse() {
        titleLbl.text = ""
        viewAllBtn.removeTarget(nil, action: nil, for: .allEvents)
        collectionView.setContentOffset(.zero, animated: false)
    }

    func setupCategoryViews() {
        //Title
        titleLbl.textColor = .white
        titleLbl.numberOfLines = 1
        titleLbl.textAlignment = .left
        titleLbl.translatesAutoresizingMaskIntoConstraints = false
        addSubview(titleLbl)

        //View All
        viewAllBtn.titleLabel?.textColor = .white
        viewAllBtn.setTitle("View All", for: .normal)
        viewAllBtn.translatesAutoresizingMaskIntoConstraints = false
        addSubview(viewAllBtn)

        //Collection View
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.showsVerticalScrollIndicator = false
        collectionView.showsHorizontalScrollIndicator = false
        collectionView.bounces = false
        collectionView.collectionViewLayout = layout
        collectionView.isScrollEnabled = true
        collectionView.backgroundColor = .clear
        addSubview(collectionView)


        let titleConstraints = [
            titleLbl.topAnchor.constraint(equalTo: topAnchor, constant: 16),
            titleLbl.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
            titleLbl.trailingAnchor.constraint(equalTo: viewAllBtn.leadingAnchor)
        ]
        NSLayoutConstraint.activate(titleConstraints)

        let viewAllBtnConstraints = [
            viewAllBtn.leadingAnchor.constraint(equalTo: titleLbl.trailingAnchor, constant: 16),
            viewAllBtn.centerYAnchor.constraint(equalTo: titleLbl.centerYAnchor)
        ]
        NSLayoutConstraint.activate(viewAllBtnConstraints)

        let collectionViewConstraints = [
            collectionView.topAnchor.constraint(equalTo: titleLbl.bottomAnchor, constant: 16),
            collectionView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -16),
            collectionView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            collectionView.heightAnchor.constraint(equalToConstant: 150)
        ]
        NSLayoutConstraint.activate(collectionViewConstraints)
    }

    func setCollectionViewDataSourceDelegate<D: UICollectionViewDelegate & UICollectionViewDataSource>(_ dataSourceDelegate: D, forRow row: Int) {
        collectionView.delegate = dataSourceDelegate
        collectionView.dataSource = dataSourceDelegate
        collectionView.tag = row
        collectionView.reloadData()
    }
}

好的，所以我遇到的问题是：-

红色查看所有区域未固定在屏幕右侧。相反，它被固定在紫色视图的右边缘（没有间隙）。即使文本长度很短，我也希望紫色文本区域为该宽度（未指定宽度或百分比）。

无论我做什么来尝试让它工作，我都会遇到约束冲突，并且日志对我来说不是很清楚。

第二个问题（好吧，不是什么大问题）是知道是否有什么特别需要考虑或必须做的事情，以便表格视图和集合视图根据其内容调整它们的高度！？你现在会看到我使用了一个固定的高度约束，这不是我们想要的。

collectionView.heightAnchor.constraint(equalToConstant: 150)

这是我目前看到的一个例子

Answer 1

我想通了。我不得不将 titleConstraints 和 viewAllBtnConstraints 更改为以下内容

    let titleConstraints = [
        titleLbl.topAnchor.constraint(equalTo: topAnchor, constant: 16),
        titleLbl.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16)
    ]
    NSLayoutConstraint.activate(titleConstraints)

    let viewAllBtnConstraints = [
        viewAllBtn.leadingAnchor.constraint(equalTo: titleLbl.trailingAnchor, constant: 16),
        viewAllBtn.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -16),
        viewAllBtn.centerYAnchor.constraint(equalTo: titleLbl.centerYAnchor)
    ]
    NSLayoutConstraint.activate(viewAllBtnConstraints)