CODEWITHSUNDEEP
iosswiftuikittableviewstackview
mmm
mmm

Reputation: 268

Self sizing table view cells based on ui stack view content

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):

table view

Upvotes: 0

Views: 469

Answers (1)

Owen
Owen

Reputation: 879

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)

Upvotes: 0

Related Questions