繁体   English   中英

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

[英]Self sizing table view cells based on ui stack view content

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

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

表视图初始化:

    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 个自定义视图的单元格):

表视图

您的addSubviewsWithConstraint添加视图作为单元格的子视图而不是 contentView 的子视图。 单元格使用 contentView 进行自我调整大小。 由于addSubviewsWithConstraintUIView的扩展,您应该能够在任何想要向单元格添加子视图的地方执行以下操作。

contentView.addSubviewWithConstraints(...)

另一件可能有用的事情是您可以通过使用可变参数来缩短您的函数,如下所示:

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

用法

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM