I have a problem with a custom tableView header, i.e. I can't update table section content in real time.
Here is the sample code which demonstrates my problem:
//SomeViewController.swift
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
if let infoHeaderView = InfoHeaderView.viewFromNib as? InfoHeaderView {
infoHeaderView.update(with: someContent)
updateMethod = { newContent in
infoHeaderView.update(with: newContent)
}
}
}
...
updateMethod(someContent)
...
//InfoHeaderView.swift
func update(with content: Content) {
someLabel.text = content.textProperty
}
Note: I want to achieve this without reloading table or single section. I want to update only single label in my custom table section view.
I expect the label text to be changed on updateMethod call, but it doesn't happen. What could be the problem?
Edit:
When I scroll section header to top and let it go back down, then it works well.
Use index of the section you want to change the header of like this:
if let headerView = self.tableView.headerView(forSection: <section number>) as? InfoHeaderView {
headerView.update(with: content)
}
But probably for this method to work, your header view should be of type which is subclass of UITableViewHeaderFooterView
Related
I'm using RxDataSources to load and display a UITableview. I am trying to update the section header with the amount of items that it holds, however tough the cell and items update correctly, the title remains stale.
This is my code for the DataSource object:
tableViewDataSource = RxTableViewSectionedAnimatedDataSource<TableViewParticipationSection>(
configureCell: { (_, tableView, _, item) in
return TableViewCellType.transformData(item).cell(inTableView: tableView)
}, titleForHeaderInSection: { dataSource, index in
let sectionModel = dataSource.sectionModels[index]
return "\(sectionModel.items.count)"
})
The identity of the section header is just {return 0} since I only have a single section.
Furthermore I have confirmed that if I use this code:
DispatchQueue.main.asyncAfter(deadline: .now()+3, execute: {
self?.contentView.tableView.reloadData()
})
It will actually update the section title, so it seems to be some problem with staleness but I can't seem to track it down.
Does anyone have experience with dynamic titles using RxDataSources
Edit:
After further experiments, the title will update, if I scroll around in the tableview, the title changes at some point.
Turns out that the title or any data on the section model is not included in the diff, so no matter what you do, it won't make a difference. The RxDataSource doesn't support non static headers. The solution is to make a custom view and do the binding myself.
In my case I set new empty UIView for section in
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
if section == 0 {
let customHeaderViewMulti = tableView.dequeueReusableHeaderFooterView(withIdentifier: "CustomHeaderView") as! CustomHeaderView
return customHeaderView
}
// This is WRONG:
return UIView()
}
You must return nil for other cases.
I am using CollapsibleTableView from here and modified it as per my requirement to achieve collapsible sections. Here is how it looks now.
Since there is a border for my section as per the UI design, I had chosen the section header to be my UI element that holds data in both collapsed and expanded modes.
Reason: I tried but couldn't get it working in this model explained below -
** Have my header elements in section header and details of each item in its cell. By default, the section is in collapsed state. When user taps on the header, the cell is toggled to display. As I said, since there is a border that needs to be shown to the whole section (tapped header and its cell), I chose section header to be my UI element of operation. Here is my code for tableView -
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return sections.count
}
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
switch indexPath.row {
case 0:
return sections[indexPath.section].collapsed! ? 0 : (100.0 + heightOfLabel2!)
case 1:
return 0
case 2:
return 0
default:
return 0
}
}
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = self.tableView.dequeueReusableHeaderFooterViewWithIdentifier("header") as! CollapsibleTableViewHeader
if sections.count == 0 {
self.tableView.userInteractionEnabled = false
header.cornerRadiusView.layer.borderWidth = 0.0
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
header.amountLabel.hidden = true
header.titleLabel.text = "No_Vouchers".localized()
}
else {
header.amountLabel.hidden = false
header.cornerRadiusView.layer.borderWidth = 1.0
self.tableView.userInteractionEnabled = true
header.titleLabel.text = sections[section].name
header.arrowImage.image = UIImage(named: "voucherDownArrow")
header.setCollapsed(sections[section].collapsed)
let stringRepresentation = sections[section].items.joinWithSeparator(", ")
header.benefitDetailText1.text = stringRepresentation
header.benefitDetailText2.text = sections[section].shortDesc
header.benefitDetailText3.text = sections[section].untilDate
header.section = section
header.delegate = self
if sections[section].collapsed == true {
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
}
else {
if sections[section].isNearExpiration == true {
header.benefitAlertImage.hidden = false
header.benefitAlertText.hidden = false
}
else {
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
}
}
if appLanguageDefault == "nl" {
self.totalAmountLabel.text = "€ \(sections[section].totalAvailableBudget)"
}
else {
self.totalAmountLabel.text = "\(sections[section].totalAvailableBudget) €"
}
}
return header
}
Function to toggle collapse/expand -
I am using height values of the "dynamically changing" UILabels inside the section and then using those values to extend the border (using its layoutconstraint).
func toggleSection(header: CollapsibleTableViewHeader, section: Int) {
let collapsed = !sections[section].collapsed
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
// Toggle collapse
sections[section].collapsed = collapsed
header.setCollapsed(collapsed)
// Toggle Alert Labels show and hide
if sections[section].collapsed == true {
header.cornerRadiusViewBtmConstraint.constant = 0.0
header.cornerRadiusViewTopConstraint.constant = 20.0
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
}
else {
heightOfLabel2 = header.benefitDetailText2.bounds.size.height
if sections[section].isNearExpiration == true {
header.benefitAlertImage.hidden = false
header.benefitAlertText.hidden = false
header.cornerRadiusViewBtmConstraint.constant = -100.0 - heightOfLabel2!
header.cornerRadiusViewTopConstraint.constant = 10.0
if let noOfDays = sections[section].daysUntilExpiration {
if appLanguageDefault == "nl" {
header.benefitAlertText.text = "(nog \(noOfDays) dagen geldig)"
}
else {
header.benefitAlertText.text = "(valable encore \(noOfDays) jour(s))"
}
}
}
else {
header.cornerRadiusViewBtmConstraint.constant = -80.0 - heightOfLabel2!
header.cornerRadiusViewTopConstraint.constant = 20.0
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
}
}
// Adjust the height of the rows inside the section
tableView.beginUpdates()
for i in 0 ..< sections.count {
tableView.reloadRowsAtIndexPaths([NSIndexPath(forRow: i, inSection: section)], withRowAnimation: .Automatic)
}
tableView.endUpdates()
}
The problem:
I need to have, few section headers in this table view to be expanded by default on the first launch of the view, based on some conditions. As I am calculating the height of the labels and using the heights to set for the border's top and bottom constraint, it has become difficult to show the expanded section header as per design.
The content comes out of the border since the height of my UILabel is being taken as 21 by default.
UPDATE: The row height changes only after I scroll through the view or when I toggle between collapse/expand
The Question:
How do I calculate the heights of the UILabels present in my Section header by the first time launch of the view? (That means, after my REST call is done, data is fetched and then I need to get the UIlabel height).
Currently, I am using heightOfLabel2 = header.benefitDetailText2.bounds.size.height
(Or)
Is there a better way to achieve this?
Thanks in advance!
Here's what I got working based on my understanding of the overall goals of OP. If I'm misunderstanding, the following is still a working example. Full working project is also linked below.
Goals:
Dynamically sized TableViewCells that are also
Collapsable to show/hide additional details
I tried a number of different ways, this is the only one that I could get working.
Overview
Design makes use of the following:
custom TableViewCells
Autolayout
TableView Automatic Dimension
So if you're not familiar with those (especially Autolayout, might want to review that first.
Dynamic TableViewCells
Interface Builder
Lay out your a prototype cell. It's easiest to increase the row height size. Start simply with just a few elements to make sure you can get it working. (even though adding into Autolayout can be a pain). For example, simply stack two labels vertically, full width of the layout. Make the top label 1 line for the "title" and the second 0 lines for the "details"
Important: To configure Labels and Text Areas to grow to the size of their content, you must set Labels to have 0 lines and Text Areas to not be scrollable. Those are the triggers for fit to contents.
The most important thing is making sure there is a constraint for all four sides of every element. This is essential to get the Automatic Dimensioning working.
CollapsableCell
Next we make a very basic custom class for that table cell prototype. Connect the labels to outlets in the custom cell class. Ex:
class CollapsableCell: UITableViewCell {
#IBOutlet weak var titleLabel: UILabel!
#IBOutlet weak var detailLabel: UILabel!
}
Starting simply with two labels is easiest.
Also make sure that in Interface Builder you set the prototype cell class to CollapsableCell and you give it a reuse ID.
CollapsableCellViewController
On to the ViewController. First the standard things for custom TableViewCells:
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return data.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "collapsableCell", for: indexPath) as! CollapsableCell
let item = data[indexPath.row]
cell.titleLabel?.text = item.title
cell.detailLabel?.text = item.detail
return cell
}
We've added functions to return the number of rows and to return a cell for a given Row using our custom Cell. Hopefully all straightforward.
Now normally there would be one more function, TableView(heightForRowAt:), that would be required, but don't add that (or take it out if you have it). This is where Auto Dimension comes in. Add the following to viewDidLoad:
override func viewDidLoad() {
...
// settings for dynamic resizing table cells
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 50
...
}
At this point if you set up the detail label to be 0 lines as described above and run the project, you should get cells of different sizes based on the amount of text you're putting in that label. That Dynamic TableViewCells done.
Collapsable Cells
To add collapse/expand functionality, we can just build off the dynamic sizing we have working at this point. Add the following function to the ViewController:
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
guard let cell = tableView.cellForRow(at: indexPath) as? CollapsableCell else { return }
let item = data[indexPath.row]
// update fields
cell.detailLabel.text = self.isExpanded[indexPath.row] ? item.detail1 : ""
// update table
tableView.beginUpdates()
tableView.endUpdates()
// toggle hidden status
isExpanded[indexPath.row] = !isExpanded[indexPath.row]
}
Also add 'var isExpanded = Bool' to your ViewController to store the current expanded status for your rows (This could also be class variable in your custom TableViewCell).
Build and click on one of the rows, it should shrink down to only show the title label. And that's the basics.
Sample Project:
A working sample project with a few more fields and a disclosure chevron image is available at github. This also includes a separate view with a demo of a Stackview dynamically resizing based on content.
A Few Notes:
This is all done in normal TableViewCells. I know the OP was using header cells, and while I can't think of a reason why that wouldn't work the same way, there's no need to do it that way.
Adding and removing a subView is the method I originally thought would work best and be most efficient since a view could be loaded from a nib, and even stored ready to be re-added. For some reason I couldn't get this to resize after the subViews were added. I can't think of a reason it wouldn't work, but here is a solution that does.
If I understood your question correctly, what you want to do is to resize your tableHeaderView when you call toggleSection.
Therefore what you need to do for your tableHeaderView to resize is this
// get the headerView
let headerView = self.tableView(self.tableView, viewForHeaderInSection: someSection)
// tell the view that it needs to refresh its layout
headerView?.setNeedsDisplay()
// reload the tableView
tableView.reloadData()
/* or */
// beginUpdates, endUpdates
Basically what you would do is to place the above code snippet inside your function toggleSection(header: CollapsibleTableViewHeader, section: Int)
func toggleSection(header: CollapsibleTableViewHeader, section: Int) {
...
// I'm not sure if this `header` variable is the headerView so I'll just add my code snippet at the bottom
header.setNeedsDisplay()
/* code snippet start */
// get the headerView
let headerView = self.tableView(self.tableView, viewForHeaderInSection: someSection)
// tell the view that it needs to refresh its layout
headerView?.setNeedsDisplay()
/* code snippet end */
// reload the tableView
// Adjust the height of the rows inside the section
tableView.beginUpdates()
// You do not need this
for i in 0 ..< sections.count {
tableView.reloadRowsAtIndexPaths([NSIndexPath(forRow: i, inSection: section)], withRowAnimation: .Automatic)
}
// You do not need this
tableView.endUpdates()
}
Explanation: A tableView's headerView/footerView does not update its layout even if you call reloadData() and beginUpdates,endUpdates. You need to tell the view that it needs to update first and then you refresh the tableView
Finally you also need to apply these two codes
func tableView(_ tableView: UITableView, estimatedHeightForHeaderInSection section: Int) -> CGFloat {
return estimatedHeight
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return UITableViewAutomaticDimension
}
In this method,
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
switch indexPath.row {
case 0:
return sections[indexPath.section].collapsed! ? 0 : (100.0 + heightOfLabel2!)
case 1:
return 0
case 2:
return 0
default:
return 0
}
}
instead of using heightOfLabel2, try implementing the following method to calculate heights specific to each cell(since we know the text to be filled, its font and label width, we can calculate the height of label),
func getHeightForBenefitDetailText2ForIndexPath(indexPath: NSIndexPath)->CGFloat
So your method should look like this,
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
switch indexPath.row {
case 0:
return sections[indexPath.section].collapsed! ? 0 : (100.0 + getHeightForBenefitDetailText2ForIndexPath(indexPath))
case 1:
return 0
case 2:
return 0
default:
return 0
}
}
And regarding your problem to expand few cells by for the very first time, make sure you set the collapsed property to true for those cells before reloading the table.
As a performance improvement, you can store the height value calculated for each expanded cell in a dictionary and return the value from the dictionary, to avoid the same calculation again and again.
Hope this helps you. If not, do share a sample project for more insight about your problem.
You can try this for String extension to calculate bounding rect
extension String {
func height(withConstrainedWidth width: CGFloat, font: UIFont) -> CGFloat {
let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude)
let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSFontAttributeName: font], context: nil)
return boundingBox.height
}
}
Source: Figure out size of UILabel based on String in Swift
I am using CollapsibleTableView from here and modified it as per my requirement to achieve collapsible sections. Here is how it looks now.
Since there is a border for my section as per the UI design, I had chosen the section header to be my UI element that holds data in both collapsed and expanded modes.
Reason: I tried but couldn't get it working in this model explained below -
** Have my header elements in section header and details of each item in its cell. By default, the section is in collapsed state. When user taps on the header, the cell is toggled to display. As I said, since there is a border that needs to be shown to the whole section (tapped header and its cell), I chose section header to be my UI element of operation. Here is my code for tableView -
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return sections.count
}
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
switch indexPath.row {
case 0:
return sections[indexPath.section].collapsed! ? 0 : (100.0 + heightOfLabel2!)
case 1:
return 0
case 2:
return 0
default:
return 0
}
}
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = self.tableView.dequeueReusableHeaderFooterViewWithIdentifier("header") as! CollapsibleTableViewHeader
if sections.count == 0 {
self.tableView.userInteractionEnabled = false
header.cornerRadiusView.layer.borderWidth = 0.0
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
header.amountLabel.hidden = true
header.titleLabel.text = "No_Vouchers".localized()
}
else {
header.amountLabel.hidden = false
header.cornerRadiusView.layer.borderWidth = 1.0
self.tableView.userInteractionEnabled = true
header.titleLabel.text = sections[section].name
header.arrowImage.image = UIImage(named: "voucherDownArrow")
header.setCollapsed(sections[section].collapsed)
let stringRepresentation = sections[section].items.joinWithSeparator(", ")
header.benefitDetailText1.text = stringRepresentation
header.benefitDetailText2.text = sections[section].shortDesc
header.benefitDetailText3.text = sections[section].untilDate
header.section = section
header.delegate = self
if sections[section].collapsed == true {
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
}
else {
if sections[section].isNearExpiration == true {
header.benefitAlertImage.hidden = false
header.benefitAlertText.hidden = false
}
else {
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
}
}
if appLanguageDefault == "nl" {
self.totalAmountLabel.text = "€ \(sections[section].totalAvailableBudget)"
}
else {
self.totalAmountLabel.text = "\(sections[section].totalAvailableBudget) €"
}
}
return header
}
Function to toggle collapse/expand -
I am using height values of the "dynamically changing" UILabels inside the section and then using those values to extend the border (using its layoutconstraint).
func toggleSection(header: CollapsibleTableViewHeader, section: Int) {
let collapsed = !sections[section].collapsed
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
// Toggle collapse
sections[section].collapsed = collapsed
header.setCollapsed(collapsed)
// Toggle Alert Labels show and hide
if sections[section].collapsed == true {
header.cornerRadiusViewBtmConstraint.constant = 0.0
header.cornerRadiusViewTopConstraint.constant = 20.0
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
}
else {
heightOfLabel2 = header.benefitDetailText2.bounds.size.height
if sections[section].isNearExpiration == true {
header.benefitAlertImage.hidden = false
header.benefitAlertText.hidden = false
header.cornerRadiusViewBtmConstraint.constant = -100.0 - heightOfLabel2!
header.cornerRadiusViewTopConstraint.constant = 10.0
if let noOfDays = sections[section].daysUntilExpiration {
if appLanguageDefault == "nl" {
header.benefitAlertText.text = "(nog \(noOfDays) dagen geldig)"
}
else {
header.benefitAlertText.text = "(valable encore \(noOfDays) jour(s))"
}
}
}
else {
header.cornerRadiusViewBtmConstraint.constant = -80.0 - heightOfLabel2!
header.cornerRadiusViewTopConstraint.constant = 20.0
header.benefitAlertImage.hidden = true
header.benefitAlertText.hidden = true
}
}
// Adjust the height of the rows inside the section
tableView.beginUpdates()
for i in 0 ..< sections.count {
tableView.reloadRowsAtIndexPaths([NSIndexPath(forRow: i, inSection: section)], withRowAnimation: .Automatic)
}
tableView.endUpdates()
}
The problem:
I need to have, few section headers in this table view to be expanded by default on the first launch of the view, based on some conditions. As I am calculating the height of the labels and using the heights to set for the border's top and bottom constraint, it has become difficult to show the expanded section header as per design.
The content comes out of the border since the height of my UILabel is being taken as 21 by default.
UPDATE: The row height changes only after I scroll through the view or when I toggle between collapse/expand
The Question:
How do I calculate the heights of the UILabels present in my Section header by the first time launch of the view? (That means, after my REST call is done, data is fetched and then I need to get the UIlabel height).
Currently, I am using heightOfLabel2 = header.benefitDetailText2.bounds.size.height
(Or)
Is there a better way to achieve this?
Thanks in advance!
Here's what I got working based on my understanding of the overall goals of OP. If I'm misunderstanding, the following is still a working example. Full working project is also linked below.
Goals:
Dynamically sized TableViewCells that are also
Collapsable to show/hide additional details
I tried a number of different ways, this is the only one that I could get working.
Overview
Design makes use of the following:
custom TableViewCells
Autolayout
TableView Automatic Dimension
So if you're not familiar with those (especially Autolayout, might want to review that first.
Dynamic TableViewCells
Interface Builder
Lay out your a prototype cell. It's easiest to increase the row height size. Start simply with just a few elements to make sure you can get it working. (even though adding into Autolayout can be a pain). For example, simply stack two labels vertically, full width of the layout. Make the top label 1 line for the "title" and the second 0 lines for the "details"
Important: To configure Labels and Text Areas to grow to the size of their content, you must set Labels to have 0 lines and Text Areas to not be scrollable. Those are the triggers for fit to contents.
The most important thing is making sure there is a constraint for all four sides of every element. This is essential to get the Automatic Dimensioning working.
CollapsableCell
Next we make a very basic custom class for that table cell prototype. Connect the labels to outlets in the custom cell class. Ex:
class CollapsableCell: UITableViewCell {
#IBOutlet weak var titleLabel: UILabel!
#IBOutlet weak var detailLabel: UILabel!
}
Starting simply with two labels is easiest.
Also make sure that in Interface Builder you set the prototype cell class to CollapsableCell and you give it a reuse ID.
CollapsableCellViewController
On to the ViewController. First the standard things for custom TableViewCells:
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return data.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "collapsableCell", for: indexPath) as! CollapsableCell
let item = data[indexPath.row]
cell.titleLabel?.text = item.title
cell.detailLabel?.text = item.detail
return cell
}
We've added functions to return the number of rows and to return a cell for a given Row using our custom Cell. Hopefully all straightforward.
Now normally there would be one more function, TableView(heightForRowAt:), that would be required, but don't add that (or take it out if you have it). This is where Auto Dimension comes in. Add the following to viewDidLoad:
override func viewDidLoad() {
...
// settings for dynamic resizing table cells
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 50
...
}
At this point if you set up the detail label to be 0 lines as described above and run the project, you should get cells of different sizes based on the amount of text you're putting in that label. That Dynamic TableViewCells done.
Collapsable Cells
To add collapse/expand functionality, we can just build off the dynamic sizing we have working at this point. Add the following function to the ViewController:
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
guard let cell = tableView.cellForRow(at: indexPath) as? CollapsableCell else { return }
let item = data[indexPath.row]
// update fields
cell.detailLabel.text = self.isExpanded[indexPath.row] ? item.detail1 : ""
// update table
tableView.beginUpdates()
tableView.endUpdates()
// toggle hidden status
isExpanded[indexPath.row] = !isExpanded[indexPath.row]
}
Also add 'var isExpanded = Bool' to your ViewController to store the current expanded status for your rows (This could also be class variable in your custom TableViewCell).
Build and click on one of the rows, it should shrink down to only show the title label. And that's the basics.
Sample Project:
A working sample project with a few more fields and a disclosure chevron image is available at github. This also includes a separate view with a demo of a Stackview dynamically resizing based on content.
A Few Notes:
This is all done in normal TableViewCells. I know the OP was using header cells, and while I can't think of a reason why that wouldn't work the same way, there's no need to do it that way.
Adding and removing a subView is the method I originally thought would work best and be most efficient since a view could be loaded from a nib, and even stored ready to be re-added. For some reason I couldn't get this to resize after the subViews were added. I can't think of a reason it wouldn't work, but here is a solution that does.
If I understood your question correctly, what you want to do is to resize your tableHeaderView when you call toggleSection.
Therefore what you need to do for your tableHeaderView to resize is this
// get the headerView
let headerView = self.tableView(self.tableView, viewForHeaderInSection: someSection)
// tell the view that it needs to refresh its layout
headerView?.setNeedsDisplay()
// reload the tableView
tableView.reloadData()
/* or */
// beginUpdates, endUpdates
Basically what you would do is to place the above code snippet inside your function toggleSection(header: CollapsibleTableViewHeader, section: Int)
func toggleSection(header: CollapsibleTableViewHeader, section: Int) {
...
// I'm not sure if this `header` variable is the headerView so I'll just add my code snippet at the bottom
header.setNeedsDisplay()
/* code snippet start */
// get the headerView
let headerView = self.tableView(self.tableView, viewForHeaderInSection: someSection)
// tell the view that it needs to refresh its layout
headerView?.setNeedsDisplay()
/* code snippet end */
// reload the tableView
// Adjust the height of the rows inside the section
tableView.beginUpdates()
// You do not need this
for i in 0 ..< sections.count {
tableView.reloadRowsAtIndexPaths([NSIndexPath(forRow: i, inSection: section)], withRowAnimation: .Automatic)
}
// You do not need this
tableView.endUpdates()
}
Explanation: A tableView's headerView/footerView does not update its layout even if you call reloadData() and beginUpdates,endUpdates. You need to tell the view that it needs to update first and then you refresh the tableView
Finally you also need to apply these two codes
func tableView(_ tableView: UITableView, estimatedHeightForHeaderInSection section: Int) -> CGFloat {
return estimatedHeight
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return UITableViewAutomaticDimension
}
In this method,
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
switch indexPath.row {
case 0:
return sections[indexPath.section].collapsed! ? 0 : (100.0 + heightOfLabel2!)
case 1:
return 0
case 2:
return 0
default:
return 0
}
}
instead of using heightOfLabel2, try implementing the following method to calculate heights specific to each cell(since we know the text to be filled, its font and label width, we can calculate the height of label),
func getHeightForBenefitDetailText2ForIndexPath(indexPath: NSIndexPath)->CGFloat
So your method should look like this,
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
switch indexPath.row {
case 0:
return sections[indexPath.section].collapsed! ? 0 : (100.0 + getHeightForBenefitDetailText2ForIndexPath(indexPath))
case 1:
return 0
case 2:
return 0
default:
return 0
}
}
And regarding your problem to expand few cells by for the very first time, make sure you set the collapsed property to true for those cells before reloading the table.
As a performance improvement, you can store the height value calculated for each expanded cell in a dictionary and return the value from the dictionary, to avoid the same calculation again and again.
Hope this helps you. If not, do share a sample project for more insight about your problem.
You can try this for String extension to calculate bounding rect
extension String {
func height(withConstrainedWidth width: CGFloat, font: UIFont) -> CGFloat {
let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude)
let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSFontAttributeName: font], context: nil)
return boundingBox.height
}
}
Source: Figure out size of UILabel based on String in Swift
I have got controller 1 with an imageview, uitextview and button. On button click there is an action to show controller with table view. I need to configure this image view and uitextview.text in my table view, but i don't understand how?
I tried to get access
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
var header = tableView.dequeueReusableCellWithIdentifier("customHeader") as CustomHeaderCell
var controller = PreparePhotoViewController()
header.headerLabel.text = controller.textView.text//exc BAD ACCESS - textView is an outlet of controller, it is weak
header.headerPhoto.image = UIImage(named: "heart.png")
return header
}
but it has bad ACCESS exc, cause I think that uitextview with weak property is nil. So any advices how I can do my idea?
Add a property to the view controller you are going to be showing, such as:
var textToDisplay: String?
Then, before you push this new view, set that property, e.g.:
let viewController = [...]
viewController.textToDisplay = "Hello World"
self.presentViewController(viewController, animated: true, completion: nil)
Then, in your pushed view controller's viewDidLoad method, set the value of the UILabel's text property to your new self.textToDisplay value.
Hopefully that's the sort of thing you're thinking of?
I'm not sure about your approach, but I can see issue in your posted code. You are using wrong dequeue function.
Change tableView.dequeueReusableCellWithIdentifier to tableView.dequeueReusableHeaderFooterViewWithIdentifier().
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
var header = tableView.dequeueReusableHeaderFooterViewWithIdentifier("customHeader") as CustomHeaderCell
...
return header
}
And you would probably want to use more accurate name CustomHeaderView, not CustomHeaderCell.
I have a UITableView that displays a list of items. The table view controller has an array of items that gets updated asynchronously upon response from a call to a web service. Here is an example of what I have (in Swift):
class MyTableViewController : UITableViewController {
var items: [ItemClass] = []
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("RootCell", forIndexPath: indexPath) as UITableViewCell
if indexPath.section == 0 {
let item = items[indexPath.row]
cell.textLabel!.text = item.name
}
else if indexPath.section == 1 {
// Another section not shown here
}
return cell
}
}
I want each section of this table to have a footer with a button in it, so I also include this:
override func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
let button = UIButton.buttonWithType(.System) as UIButton
button.setTitle("Add", forState:UIControlState.Normal)
if section == 0 {
button.addTarget(self, action:Selector("itemAddPressed:"), forControlEvents:UIControlEvents.TouchUpInside)
}
else if section == 1 {
// other section not shown here
}
return button
}
Items are added to the items array via an callback that gets invoked outside of the main UI thread. It looks something like this:
private func itemWasAdded(item: ItemClass) {
dispatch_async(dispatch_get_main_queue()) {
self.items += [item]
self.tableView!.reloadData()
}
}
This all works fine, but my use of the table's reloadData seems like overkill to me when I know that only one item is being added at a time. So, I tried to update it to do the following:
private func itemWasAdded(item: ItemClass) {
dispatch_async(dispatch_get_main_queue()) {
self.items += [item]
let indexPath = NSIndexPath(forRow:self.item.count - 1, inSection:0)
self.tableView!.insertRowsAtIndexPaths([indexPath], withRowAnimation: .None)
}
}
When I do it this way, the table continues to work but there's a problem with the footer buttons. Instead of showing the Add button I've created in each section's footer, I see the add button for section 0 showing at the bottom of the table view, underneath section 1.
It seems like doing something to force a refresh of the table seems to fix the problem. This UITableViewController is the top controller in a UINavigationController, and if I select a table cell a new view controller is pushed onto the navigation controller. Navigating back to the original table view controller, the footer buttons are displayed in the correct place.
The easiest way to make this work is just to use reloadData instead of insertRowsAtIndexPaths. But I'd like to know what I'm doing wrong here so that I can avoid reloading all table data if possible.
Am I using the insertRowsAtIndexPaths incorrectly here?
I thought this is happening because beginUpdates() and endUpdates() were missing and it would be very simple mistake. But I had exactly a same problem when I tested it.
I will just share my observations.
When I try with tableview style Grouped, the problem above is not happening. But if I use Plain style, the footer goes down to the bottom of the tableview. I guess there's something to do with different footer view behaviors depending on its style and the way table view layout its content after updating its data.
If you have to use tableview with Plain style, you have to handle the case where the sum of its contents' heights( cells and section footer views) is less than the tableview height right before inserting a row.
Something like,
let contentHeight = CGFloat(items.count * cellHeight + numberOfSection*footerHeight)
if contentHeight < tableViewHeight {
tableView.frame = CGRectMake(0, 0, view.frame.size.width, numberOfSection*CGFloat(items.count * cellHeight + footerHeight))
} else {
tableView.frame = viewHeight
}
In order to make everything clean, you should understand what are the behaviors of section footer/header of tableview with its different style and frames. Hope that you can find the better solution that meets your requirements.