2

I want to create a UITableView header with dynamic height. I have four labels in the view and the height of the header must be adjusted according to the content in each of the UILabels. I want to achieve something similar to this image. Sample image.

Here the width of the labels would be dynamic according to the screen size. The "type" label would cover around 2/3 of the screen and the rest will be divided equally between the three labels. Here the according to the screen size the labels could be multiline and I want to manage the height of the main view according to the contents of the label.

When I give fixed width constraint to the labels, I am successfully able to manage the height, but I want to keep the width of labels dynamic. This is a UITableView header. Any help would be much appreciated.

Zaeem Khatib
  • 71
  • 4
  • Try This link as reference, https://stackoverflow.com/a/43556505/3236890 Here i have provided solution for Cell, You can do same for Section header return section you need + 1 , and for first section return numbers of cells 0 , For dynamic height for section header, use height for section and estimated height for section header UItableViewautomaticdimension same as cell on link, hope this will help. – dip Jun 07 '17 at 11:53
  • if my answer is helpful, hope you will accept it too. :) – elk_cloner Jun 07 '17 at 12:07
  • @dip whenever I use leading/trailing or proportional width constraints, the width of the label does increase but the height of the label does not increase according to the content. Need to increase the height of label and view, if text does not fit in the given width. Thanks for the reply. – Zaeem Khatib Jun 07 '17 at 12:39
  • @ZaeemKhatib: check out my github link https://github.com/junaid4058/stackAnswerAutolayout just apply the autolayout logic in TableCell.That's it. – elk_cloner Jun 07 '17 at 18:49

1 Answers1

0

Make a customCell just like tableViewCell for header and design like this.

enter image description here

How design is done:

SMS EMAIL and PUSH NOTIFICATION are encapsulated into a stackView and it has been auto layout with TYPE label.

this is the hierarchy.

enter image description here

And this is the layout design for Type(2/3).Calculate accurately by yourself.

enter image description here

This is for stackView.

enter image description here

Both are autolayout with superView(that is cell)

StackView:

enter image description here

and for TYPE label.

enter image description here

Insert this cell as a headerView of your tableView.

How?

in viewDidLoad:

tableView.register(UINib.init(nibName: String(describing: TableHeader.self), bundle: nil), forCellReuseIdentifier: "headerCell")

Add this two function in your respectivew view controller.

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let cell = tableView.dequeueReusableCell(withIdentifier: "headerCell") as! TableHeader
    return cell
}

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 58
}

And here is the output:

enter image description here

For iOS 8:

StackView is absent so we need to use UIView instead.As explaining autolayout is tricky so i just shared my project which is easier to understand.You can checkout from here

The output without using StackView is down below:

2 Views are taken. Color has been given for better understanding.

enter image description here

elk_cloner
  • 2,049
  • 1
  • 12
  • 13
  • Thanks for the reply. using StackView is a great idea but I am supporting iOS 8 as well, so can you suggest an alternative to that? – Zaeem Khatib Jun 07 '17 at 12:34
  • yes just replace stack with a view. and make each label in that view 1/3 of that view and make its witdth using multiplier with superview – elk_cloner Jun 07 '17 at 13:28
  • Thanks, just one more thing, I want to manage the height of the view as well. Let's say the text "Push Notification" is changed to "Push Notification Very Long Text", the label height does increase, but the content view height should also increase accordingly, please refer the same in your solution for iOS 8. Thanks again for the help, much appreciated. – Zaeem Khatib Jun 08 '17 at 06:03
  • I hope you accept my answer and give upvote for all of my effort – elk_cloner Jun 08 '17 at 06:04
  • Sure, I just need to manage the height of the view and labels as you might have noticed, I mentioned it in the question as well. – Zaeem Khatib Jun 08 '17 at 06:15