Set UITableView's height to the height of its content with Auto Layout

Question

I have a View which has two labels and a Table View inside it. I want label 1 to always stay above my Table View and label 2, to be below the Table View. The problem is that the Table View needs to auto-size meaning either increase in height or decrease.

Right now I have a constraint saying the Table View's height is always equal to 85 and a @IBOutlet to the height constraint where i'm able to change the constant.

I'm guessing I need to change the constant to the height of all the cells, but i'm not sure how.

Another solution is to make a subclass of `UITableView` that sets its own `intrinsicContentSize.height` to its `contentSize.height`. See http://stackoverflow.com/a/17335818/77567 . — rob mayoff, Oct 21 '15 at 20:50
@robmayoff answer is better in my opinion as it is more dynamic than joern answer. — Altimac, Jun 22 '17 at 14:33
I know this isn't the answer of your question but did you consider using UIStackview instead of tableview? — Emre Önder, Jan 28 '20 at 13:20

score 66 · Accepted Answer · edited Jan 23 '19 at 08:53

66

You have to override updateViewConstraints() in your UIViewController and set the height constraint's constant to tableView.contentSize.height:

override func updateViewConstraints() {
    tableHeightConstraint.constant = tableView.contentSize.height
    super.updateViewConstraints()
}

Then you have to make sure that Label2 has a top constraint that is greaterThanOrEqual to the table view's bottom. And you also have to change the table view's height constraint's priority from Required to High to avoid conflicting constraints when the table view's contentHeight is larger than the available height.

edited Jan 23 '19 at 08:53

Iulian Onofrei

9,188
10
67
113

answered Oct 21 '15 at 20:20

joern

27,354
7
90
105

7

Adding this in the viewDidLayoutSubviews, worked for me. – Hanushka Suren Mar 27 '17 at 10:30
2

@GMHSJ, afaik viewDidLayoutSubviews is called after layout system finish calculating frames, therefore if you change constraints here, it will trigger layout process again, which should create infinite recursion in the end. – vahotm May 04 '17 at 14:49
@vahotm: Ya true, But updateViewConstraints didn't work for me. Donno why :( – Hanushka Suren May 07 '17 at 05:18
1

While I think this is a good solution, it requires you to be adjusting the height of the tableview based on a constraint. I found the solution below by nova to be better because it is not dependent on using constraints to change the height. In my case, my tableView was a subview and the superview needed to adjust its own frame based on the size of the tableView. – Nate4436271 Mar 19 '18 at 19:46
1

@GMHSJ, Does calling the `super.updateViewConstraints()` method at the end of `updateViewConstraints` help? Because this is the correct way to override it according to [the documentation](https://developer.apple.com/documentation/uikit/uiviewcontroller/1621379-updateviewconstraints). – Iulian Onofrei Jan 23 '19 at 08:55
i have used same method but now i am getting a long table more than its content – keshav Mar 16 '22 at 10:35

score 62 · Answer 2 · edited Jan 28 '20 at 13:16

62

There is another way to do that. You can add an observer on table view contentSize variable, and self size when change in table view content.

@IBOutlet weak var tableView: UITableView!
@IBOutlet weak var tableHeightConstraint: NSLayoutConstraint!

override func viewDidLoad() {
    super.viewDidLoad()
    self.tableView.addObserver(self, forKeyPath: "contentSize", options: NSKeyValueObservingOptions.new, context: nil)
}
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    tableView.layer.removeAllAnimations()
    tableHeightConstraint.constant = tableView.contentSize.height
    UIView.animate(withDuration: 0.5) {
        self.updateViewConstraints()
    }

}

edited Jan 28 '20 at 13:16

Sourabh Sharma

8,222
5
68
78

answered Apr 20 '17 at 12:50

Hamed Nova

1,061
9
15

It is working for me. But 'observeValueForKeyPath' method getting called many times. – Kirti Nikam Oct 04 '18 at 07:28
@iKT when you observe on a key with NSKeyValueObservingOptions.new you will get called each time that key updated to a new value so whenever you want you can remove that observer – Hamed Nova Oct 06 '18 at 09:32
4

Useful. Not an elegant way to do. Actually MANY years and APPLE didn't implement a fashion way to do that as "tableview.contentSize" with an event didFinishLoad. But so far this is the cleaner way to do that without create an specific class or extension to handle such ordinary task. – Bruno Reis Portela Mar 25 '19 at 22:20
Remember to remove the observer on `deinit` with `removeObserver` – lawicko Nov 19 '19 at 15:56
how to remove observer in deinit @HamedNova – Poornima Mishra Dec 14 '21 at 06:19

score 4 · Answer 3 · answered Jun 30 '20 at 19:34

The below code worked for me.

Create an outlet for tableViewHeight.

@IBOutlet weak var tableViewHeight: NSLayoutConstraint!
var tableViewHeight: CGFloat = 0  // Dynamically calcualted height of TableView.

For the dynamic height of the cell, I used the below code:

func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
    return tableView.estimatedRowHeight
}

For height of the TableView, with dynamic heights of the TableView Cells:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    print(cell.frame.size.height, self.tableViewHeight)
    self.tableViewHeight += cell.frame.size.height
    tableViewBillsHeight.constant = self.tableViewHeight
}

Explanation:

After the TableView cell is created, we fetch the frame height of the cell that is about to Display and add the height of the cell to the main TableView.

score 1 · Answer 4 · answered Apr 03 '19 at 06:45

In Swift 4.2 and Xcode 10.1

Here you have two options to set height for UITableView based on content dynamically.

1) If you get content size use this code in viewDidLayoutSubviews()

DispatchQueue.main.async {
  var frame = self.TblView.frame
  frame.size.height = self.TblView.contentSize.height
   self.TblView.frame = frame
}

2) Based on table view height constraint update table view height. After got the response from server when reload table view write this code.

DispatchQueue.main.async {
    self.TblViewHeightConstraint.constant = CGFloat((self.array.count) * 30)//Here 30 is my cell height
     self.TblView.reloadData()
}

score 0 · Answer 5 · answered Oct 07 '19 at 05:11

Extending @nova answer to swift 4

tableViewSizeObservation = tableView.observe(\.contentSize) { [weak self] (tableView, _) in
   tableView.layer.removeAllAnimations()
   self?.tableViewHeightContraint.constant = tableView.contentSize.height
   UIView.animate(withDuration: 0.5) {
         self?.view.updateConstraints()
         self?.view.layoutIfNeeded()
   }
}

deinit {
    tableViewSizeObservation?.invalidate()
}

score 0 · Answer 6 · answered Feb 26 '20 at 13:12

0

A more modern way is doing this:

override func updateViewConstraints() {
    tableView.heightAnchor.constraint(equalToConstant: tableView.contentSize.height).isActive = true
    super.updateViewConstraints()
}

answered Feb 26 '20 at 13:12

jocken

324
3
10

But every time `updateViewConstraints` is called, you create a new constraint. So you are accumulating multiple height constraints, so if tableView.contentSize changes, you'll have height constraints with conflicting values. So it's worth it to store a height constraint and always update that one (you can create it in viewDidLoad). Besides, even if size never changes, auto layout has to work more to process extra constraints. – androidguy Nov 30 '20 at 07:55

score 0 · Answer 7 · answered Dec 03 '21 at 09:18

0

override func viewDidLayoutSubviews() {
      super.viewDidLayoutSubviews()      
           let contentheight = tableView.contentSize.height
           self.tableHeightConstraint.constant = contentheight
  }

answered Dec 03 '21 at 09:18

Naresh

129
1
11

score -1 · Answer 8 · edited Feb 19 '20 at 13:42

For TableView Height adjustment automatically with its content size use this in ViewController class.

//constraintTableViewHeight :- tableview height constraint 

override func viewWillLayoutSubviews() {
    super.updateViewConstraints()
    self.constraintTableViewHeight.constant = self.tableView.contentSize.height
}

and also add this

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    self.viewWillLayoutSubviews()
}

This code easily adjust tableview height automatically with its content size.

Set UITableView's height to the height of its content with Auto Layout

8 Answers8

Linked