UITableView not shown inside UIStackView

Question

I have a UIStackView where it can show a label, image, table view or nothing based on user selection. Here is my current hierarchy for the dynamic view:

• UIStackView_Parent
  • UILabel - some text, fixed view
  • UIStackView_Child - this is the container that can show multiple things or nothing
  • UIView - another fixed view

When I call UIStackView_Child.addArrangedSubview(...) with a label or image it works perfectly, but addArrangedSubview(tableView) does not show the table. I have tableView.scrollEnabled = false and set frame to fixed height based on number of cell and defined the table's cellHeight.

Any help would be much appreciated, thanks!

Squint

Answer 1

That's because stackview tries to compress content as much as possible. When you initally add a tableview, I'm assuming it has no content, so stackview compresses the width to 0 because it has nothing to show. You have to do one of two things:

After the table gets populated with data, you have to set the tableView's frame. I do this by calculating how big each cell is going to be. I know the width is going to be as big as the view that contains stackview. So it winds up being something like

let estimatedHeight = tableView.numberOfRows(inSection: 0) //You may need to modify as necessary
let width = parentView.frame.size.width
tableView.frame = CGRect(x: 0, y: 0, width: width, height: estimatedHeight)

Once you set the tableView's frame, stackview should automatically adjust.

Noncooperation

"You have to do one of two things" what's the other thing? – Lynd

Other thing could be a height constraint for a table view. For example, tableView.heightAnchor.constraint(equalToConstant: 42).isActive = true. Setting stack view height will work as well. – Candidacandidacy

Why estimatedHeight is the number of rows? It should be multiplied by the row height. – Alon

what if table has automatic row height? – Sullen

Answer 2

Another way to do this without explicitly setting the frame height and width is to embed your table view inside an empty view, pin the table view to the top, bottom, left and right and set a "greater than or equal to" constraint to the table view's height.

Thomasthomasa

The "greater than or equal to" constraint? Is that constraining the "empty view"'s Height to be >= the Table's Height? – Sunbeam

@Thomasthomasa could you elaborate, maybe with a screenshot or an example. I set up greater than constraints on both the view and the parent cell directly but couldn't get it to work. – Chalone

Answer 3

You can also automatically monitor the height of the UITableView with Combine:

import Combine

var tableViewHeightConstraint: NSLayoutConstraint?
var cancellables: Set<AnyCancellable> = []

// Table View Content Size monitor
tableView.publisher(for: \.contentSize)
    .receive(on: DispatchQueue.main)
    .sink { self.tableViewHeightConstraint?.constant = $0.height }
    .store(in: &cancellables)

Or if you don't have combine available you can add an Observer:

tableView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    if(keyPath == "contentSize") {
        // Here you could get from change or simple get it directly from the table view
        tableViewHeightConstraint?.constant = tableView.contentSize.height
    }
}

Melancholia

Watch out for that strong self inside sink – Examinee

Answer 4

You can observe the content size of UITableView with RxSwift:

    // in UIViewController

    import RxSwift

    @IBOutlet var tableViewHeightConstraint: NSLayoutConstraint!

    override public func viewDidLoad() {
        super.viewDidLoad()

        // subscribe to observe table view content size
        tableView.rx.observe(CGSize.self, "contentSize")
            .subscribe(onNext: { [weak self] newSize in
                guard let self,
                      let height = newSize?.height
                else {
                    return
                }
                // adjust table view height constraint
                self.tableViewHeightConstraint.constant = height
            })
            .disposed(by: disposeBag)
    }

Photocurrent