Coding in Swift 3. Have a tableView with custom cells and header.
I have a tableView with custom cells and headers. The headers have two (2) labels in them and have dynamic cell heights since the labels may be long. My problem is the first time the tableView and sections are configured the label appears as it should, HOWEVER, after scrolling down and then back up the headers' layout somehow breaks.
As you can see below, after I scroll down then back up to the cells, the label is getting cutoff.
After printing out what methods are being called I found that the first time scrolling down the tableView the following two (2) override functions are called.
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
print("\(section) heightForHeaderInSection")
print("\(section) returning AUTO for header")
return UITableViewAutomaticDimension
}
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
print("\(section) viewForHeaderInSection")
let header = tableView.dequeueReusableCell(withIdentifier: "QuestionHeader") as! QuestionHeader
header.delegate = self
header.contentView.backgroundColor = UIColor.groupTableViewBackground
header.questionTextLabel.text = String(questionStringArray[section])
header.questionNumberLabel.text = (String(section + 1) + ")")
return header.contentView
}
But when i scroll back up ONLY the viewForHeader function is called and I think because the height is no longer being set to UITableViewAutomaticDimension the labels get cutoff?
Any ideas?
You should return header instead of header.contentView from tableView: viewForHeaderInSection: method:
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = tableView.dequeueReusableCell(...
...
return header
}
Related
Using method below of viewForHeaderInSection i try and display an image in table header section one , but i also want a heading text, using the method of heading title text i am able to display the heading for all sections but not section 1 , do i need to make some changes to heading view for section one to be able to display the heading , if i were to remove the viewForHeaderInSection then the title for first header section also shows up
let sectionTitle = ["Feedback", "Follow Us"]
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
if section == 0 {
headerTop.headerLogo.image = UIImage(named: "foodpin-logo")
return headerTop.topView
}
return nil
}
override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return sectionTitle[section]
}
You need to create a text label in your headerTop view and remove this function override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int). So your code will be like this:
let sectionTitle = ["Feedback", "Follow Us"]
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
headerTop.headerLogo.image = (section == 0) ? UIImage(named: "foodpin-logo") : nil
headerTop.yourHeaderTextLabel.text = sectionTitle[section]
return headerTop.topView
}
It seems like you are looking for tableHeaderView! The issue is you are overriding the first section's header.
You may consider setting the tableView's tableHeaderView for the headerTop instead. So all sections will have their titles as you expected.
tableView. tableHeaderView = headerTop
Also, if you want yout table's header to be sticky, there are bunch of tutorials for that.
I am developing an application in Swift3 where I have to show and hide UITableView Header for different users. For displaying UITableView Header View, I have created a custom class CustomHeaderCell of UITableViewCell.
Here is my code:
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 235.0
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerCell = tableView.dequeueReusableCell(withIdentifier: "HeaderCell") as! CustomHeaderCell
return headerCell
}
Now Can anyone please help me to hide this Header of my UITableView?
Note: I tried using this tableView.tableHeaderView?.isHidden = true, but not working. Should I need to do the validation in heightForHeaderInSection?
Reference Link to Add HeaderViewCell: http://www.accella.net/knowledgebase/custom-header-and-footer-views-for-uitableviews/
If you have a way to differentiate users then you can just change the header height like this
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
if userA {
return 235.0
} else {
return 0
}
}
That should help in hiding the header
You are mixing tableHeaderView and section header views, which are differents:
tableHeaderView is a view showed as a header for the whole UITableView
section header views are reusable views used for displaying header above each section
In your case, you want to use section header views, so you should return empty ones for non concerned users (I assume here sectionNeedHeader will be replaced by your condition).
Also, you better use UITableViewHeaderFooterView instead of UITableViewCell. The behavior is globally the same but it's made for this usage:
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
if sectionNeedHeader {
return 235.0
}
return 0.0
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
if sectionNeedHeader {
let headerCell = tableView.dequeueReusableHeaderFooterView(withIdentifier: "HeaderView") as! CustomHeaderView
return headerView
}
return nil
}
Is it possible to resize a UITabeView Header after the text is set to it?
In my xib I got a TableView with a header with a height of 42 for 1 line of text. For 2 lines I need a height of 52 and for 3 I need 62. The title is set dynamically to the header. But the heightForHeaderInSection func is called before the header text is set by the Lifecycle. So maybe lines 2 & 3 are not shown.
I wrote a method which tells me how many lines of text the header got but how to update the header? if i call tableView.reloadData() I end up in an infinity loop. And if I set var for every lineamoun
t I found the heightForheaderInSection is never called.
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let cell = tableView.dequeueReusableCell(withIdentifier: headerCell) as! SectionHeader
cell.titleLabel.text = self.sectionTitle
linesOfHeader = cell.getNumberOfLines()
return cell
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
if(linesOfHeader == 1) { return 44}
else if(linesOfHeader == 2) {return 52}
else { return 62}
}
a better solution to support dynamic header height is using "UITableViewAutomaticDimension" like this:
In viewDidLoad add these lines:
self.tableView.sectionHeaderHeight = UITableViewAutomaticDimension
self.tableView.estimatedSectionHeaderHeight = 50
and remove the function heightForHeaderInSection
Then allow the label to extend to the required number of lines
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let cell = tableView.dequeueReusableCell(withIdentifier: headerCell) as! SectionHeader
cell.titleLabel.text = self.sectionTitle
cell.titleLabel.numberOfLines = 3
return cell
}
if the header height overlap the cells height as well add these two lines to viewDidLoad
self.tableView.rowHeight = UITableViewAutomaticDimension
self.tableView.estimatedRowHeight = 40 // estimated cell height
I have created UIViewController and added UITableView on it (pinned to all four edges with autolayout).
Then I set estimatedRowHeight (44) and rowHeight (UITableViewAutomaticDimension) and returned 5 custom cells. And it worked.
Now, I want to add custom UITableViewHeaderFooterView that would have dynamic height.
I'm doing next:
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 88.0
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
return R.nib.orderStatusHeaderView.firstView(owner: self)!
}
My OrderStatusHeaderView is a xib view that has UITableView on it pinned to all 4 edges with autolayout.
OrderStatusHeaderView:
final class OrderStatusHeaderView: UITableViewHeaderFooterView {
#IBOutlet weak var tableView: UITableView! {
didSet {
tableView.dataSource = self
tableView.delegate = self
tableView.rowHeight = 44.0
}
}
}
extension OrderStatusHeaderView: UITableViewDataSource, UITableViewDelegate {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 2
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = UITableViewCell(style: .default, reuseIdentifier: "\(indexPath.row)")
cell.textLabel?.text = "\(indexPath.row)"
cell.backgroundColor = .red
return cell
}
}
This displays like:
And when I tap or scroll, all red cells disappears. What could it be? And how to make UITableView dynamically load content and UITableViewHeaderFooterView will size itself so it fit UITableView.contentSize. Is it possible?
Check out:
tableView(_:estimatedHeightForFooterInSection:)
and
tableView(_:heightForFooterInSection:)
You also have the equilavant for headerInSection.
Since you are asking for a table's header and footer view, you can skip the delegate methods you describe. Those (as the name implies) are for SECTION headers and footers.
When you set a view that is using AutoLayout as the table's header or footer, the its frame still has a zero height (That's why buttons in such view for example won't work as they are not receiving the touches).
To correctly size a table's header or footer views using AutoLayout you have to apply a trick to actually calculate the height yourself, and set the headerView again. It is described in detail in many posts like these:
https://stackoverflow.com/a/28102157/756039
https://gist.github.com/marcoarment/1105553afba6b4900c10
http://collindonnell.com/2015/09/29/dynamically-sized-table-view-header-or-footer-using-auto-layout/
http://roadfiresoftware.com/2015/05/how-to-size-a-table-header-view-using-auto-layout-in-interface-builder/
Hope this helps.
I had a custom cell being used as a tableview section header. I updated to swift 3 and now it is not showing anymore
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = tableView.dequeueReusableCell(withIdentifier: "tableHeader") as! tableHeader
then i put in some constraints and return header
Your custom class should extend from UITableViewHeaderFooterView and it will work.
I know it's a late answer but for some who did not find the correct answer till. You can use UITableViewSectionHeight. Below is an example:
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 80 // this is your row height
}