基于 ui 堆栈视图内容的自我调整表格视图单元格

问题描述

我想创建带有堆栈视图的单元格。对于不同的单元格，堆栈视图中排列的子视图数量会有所不同。

目前我创建了这样的东西，但自我调整大小不起作用。

表视图初始化：

    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,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 个自定义视图）：

解决方法

您的 addSubviewsWithConstraint 正在添加视图作为单元格的子视图而不是 contentView 的子视图。单元格使用 contentView 进行自我调整大小。由于 addSubviewsWithConstraint 是 UIView 的扩展，因此您应该能够在要向单元格添加子视图的任何位置执行以下操作。

contentView.addSubviewWithConstraints(...)

另一件可能有用的事情是，您可以像这样使用可变参数来缩短函数：

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

使用

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