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)

UITableView单元格自动布局约束

1 个答案: