Self sizing table view cells based on ui stack view content

Question

i want to create cells with stack view in it. For different cells there would be different amount of arranged subviews in stack view.

Currently i create something like this but self sizing isn't working.

Table view initialization:

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

Table view cell:

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
    }
}

Custom view:

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)
        ])
    }
}

To add subviews i'm using custom extension to uiview:

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

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

Result looks like this (using 2 cells with 2 custom views in stack views):

Owen · Answer 1 · 2021-07-18T14:58:58.813

0

Your addSubviewsWithConstraint is adding views as a subview of the cell not as a subview of the contentView. Cells use the contentView for self sizing. As addSubviewsWithConstraint is an extension of UIView you should be able to do the following anywhere you want to add a subview to a cell.

contentView.addSubviewWithConstraints(...)

Just another thing that may be useful is that you can shorten your functions down by using variadic arguments like so:

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

Usage

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

edited Jul 18 '21 at 14:58

answered Jul 18 '21 at 14:38

Owen

791
1
3
14

Im using custom function addSubviewsWithConstraint. I updated the question. – mmm Jul 18 '21 at 14:51
@michalmichalek Updated my answer in response to your question being updated. – Owen Jul 18 '21 at 14:59
i used: contentView.addSubviewsWithConstraints([stackView]) but nothing changed – mmm Jul 18 '21 at 15:04
Ah my bad if you do that you’ll need to set translatesAutoresizingMaskIntoConstraints to false within the loop on the view. – Owen Jul 18 '21 at 15:25
I undestand that and im setting translatesAutoresizingMaskIntoConstraints to false but result is the same. Cells are not self sizing. :( – mmm Jul 18 '21 at 16:12

Self sizing table view cells based on ui stack view content

1 Answers1