基於 ui 堆棧視圖內容的自我調整表格視圖單元格

Question

我想創建帶有堆棧視圖的單元格。 對於不同的單元格，堆棧視圖中排列的子視圖數量會有所不同。

目前我創建了這樣的東西，但自我調整大小不起作用。

表視圖初始化：

    let tableView: UITableView = {
        let tableView = UITableView()
        tableView.rowHeight = UITableView.automaticDimension
        tableView.estimatedRowHeight = 200
        return tableView
    }()

表格視圖單元格：

import UIKit

final class CustomTableViewCell: UITableViewCell {

    private let stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.spacing = 8
        stackView.distribution = .equalSpacing
        stackView.alignment = .fill
        return stackView
    }()

   // initializations...

    private func setup() {
        backgroundColor = .green

        addSubviewsWithConstraints([stackView])

        NSLayoutConstraint.activate([
            stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
            stackView.topAnchor.constraint(equalTo: topAnchor),
            stackView.bottomAnchor.constraint(equalTo: bottomAnchor)

        ])

        stackView.addArrangedSubviews([CustomView(), CustomView()])
        // custom views will be added later depends on model
    }
}

自定義視圖：

final class CustomView: UIView {

    private let iconImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.image = UIImage(systemName: "heart.fill")
        return imageView
    }()

    //MARK: - Override

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    private func setup() {
        addSubviewsWithConstraints([iconImageView])

        NSLayoutConstraint.activate([
            iconImageView.topAnchor.constraint(equalTo: topAnchor, constant: 6),
            iconImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 6),
            iconImageView.heightAnchor.constraint(equalToConstant: 80),
            iconImageView.widthAnchor.constraint(equalToConstant: 80)
        ])
    }
}

要添加子視圖，我正在使用 uiview 的自定義擴展：

    func addSubviewWithConstraints(_ view: UIView) {
        view.translatesAutoresizingMaskIntoConstraints = false
        addSubview(view)
    }

    func addSubviewsWithConstraints(_ views: [UIView]) {
        views.forEach {
            addSubviewWithConstraints($0)
        }
    }

結果如下所示（在堆棧視圖中使用 2 個帶有 2 個自定義視圖的單元格）：

Answer 1

您的addSubviewsWithConstraint添加視圖作為單元格的子視圖而不是 contentView 的子視圖。 單元格使用 contentView 進行自我調整大小。 由於addSubviewsWithConstraint是UIView的擴展，您應該能夠在任何想要向單元格添加子視圖的地方執行以下操作。

contentView.addSubviewWithConstraints(...)

另一件可能有用的事情是您可以通過使用可變參數來縮短您的函數，如下所示：

func addSubviewWithConstraints(_ views: UIView...) {
    views.forEach {
        addSubviewWithConstraints($0)
    }
}

用法

addSubviewWithConstraints(mySubview)
addSubviewWithConstraints(mySubview, mySubview2, mySubview3)