I have a UITableViewController with a static table cell.
And I'm trying to make a cell With UIImageView and this image clipToBounds to this cell but it's not working.
This is a sample that I want to do.
But when I make a UITableView and set UIImage clipToBounds to TRUE
the result is :
Am I just need a way to make UIImageView like the first image anyway to do that with UITableView Cell?
And this is my UIImageView Constraints :
and here's my code :
class ProfileTableViewController: UITableViewController {
#IBOutlet weak var userImage: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = false
// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem()
// image view
self.userImage.layer.cornerRadius = self.userImage.frame.width / 2
self.userImage.clipsToBounds = true
}
// MARK: - Table view data source
override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 3
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
var number = 0
if section == 0
{
number = 1
}else if section == 1
{
number = 4
}else if section == 2
{
number = 1
}
return number
}
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 100
}
}
just create outlet for image view make it corner radius itswidth/2 (make sure height and width same size) and make clip to bounds true. for ex:
imageView = imageView.frame.size.width/2;
imageView.clipsToBounds = true;
I Found the solution when i added this method and add custom Section header
and give it clipToBounds = false
problem solved
i'm just added :
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let view = UIView()
view.clipsToBounds = false
return view
}
and it's working perfectly :))
thanks all for trying to help me
Why clipsToBounds = true ?
If the image must be outside the cell, then I guess you want the opposite:
yourView.clipsToBounds = false
this might solve your problem. In cell for row at indexPath
let height = CGFloat(cell.frame.size.height-10)
let leading = (cell.frame.size.width - height)/2
let top = CGFloat(18)
let myImage = UIImageView(frame: CGRect(x: leading, y: top, width: height, height:height))
myImage.layer.masksToBounds = true
myImage.layer.cornerRadius = (height)/2
cell.contentView.addSubview(myImage)
//OR
cell.myImage.layer.cornerRadius = cell.myImage.frame.width / 2
cell.myImage.clipsToBounds = true
try like this
enter image description here
Related
I am creating a simple iOS app with Xcode and Swift 5 where the user can pick a theme and then the background will change color. I want to accomplish this by adding buttons onto a table view's cells. I know how to add one button to a table view, but I have no idea how to put multiple buttons into a table view cell.
Here is a table view cell with a button I added to it:
p.s.: ignore the text inside of the button
What I'd want is for one button on each side and one in the middle, like this:
Here's my tableviewcontroller:
import UIKit
#objcMembers class TBController: UITableViewController {
var times = 0
var lastChar = ""
var subString = ""
var text = ""
override func viewDidLoad() {
super.viewDidLoad()
let value = UIInterfaceOrientation.portrait.rawValue
UIDevice.current.setValue(value, forKey: "orientation")
}
override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return singleton.count
}
// 3
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
var cellButton: UIButton!
///////////////////
cellButton = UIButton(frame: CGRect(x: 5, y: 5, width: 50, height: 30))//5, 5, 50, 30
times = times + 1
cell.textLabel?.text = SingletonViewController.singleton[indexPath.row]
if times == 1{
cellButton.setTitle("Back", for: UIControl.State.normal)
cell.addSubview(cellButton)
cell.accessoryView = cellButton
cellButton.backgroundColor = UIColor.blue
cell.tag = 1
}else{
cell.tag = 2
}
return cell
}
}
You need to subclass UITableViewCell and create your own custom implementation, you can do this by code or by IB
This is the IB way of doing it:
When you create a new Cocoa Touch Class file, choose to subclass from UITableViewCell and select the create XIB file option. After that configure the XIB's view whoever you want and set a reuse identifier in the Identity Inspector.
If you want to have the layout from your screenshot, drag a UIStackView, set it's constraints to top, bottom, leading and trailing to the contentView of the cell, set the alignment to horizontal, then select fill equally and drag 3 UIButtons inside of it, the stackView will make sure to arrange them nicely
In your viewController don't forget to register the cell with the tableView, and then return that cell from cellForRowAtIndexPath
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 am using a custom UITableViewHeaderFooterView for me TableView. I was trying to implement hiding and showing rows in a section(which I have working). I decided to add a button (>) to the section header so that I can rotate it when the section is "expanded/collapsed".
The problem I have appears when I click the button. When the rotateCollapseButton() function is called, the (>) buttons in all the section headers rotate, not just the one that was clicked. Sometimes it'll even exclude the button that was clicked or clicking one will affect a different one and not itself.
How can I make it so that only the correct button will rotate?
This is the code I have for the custom Header I created.
var rotated:Bool = false
var section:Int?
weak var delegate:MessageGroupHeaderDelegate?
#IBAction func expandCollapseButtonClicked(_ sender: Any) {
rotateCollapseButton(sender as! UIButton)
delegate?.didPressExpandCollapseButton(atSection : self.section!)
}
func rotateCollapseButton(_ button:UIButton) {
UIView.animate(withDuration: 0.5) { () -> Void in
var rotationAngle:CGFloat = CGFloat(M_PI_2)
if self.rotated {
rotationAngle = CGFloat(0)
}
button.transform = CGAffineTransform(rotationAngle : rotationAngle)
self.rotated = !self.rotated
}
}
EDIT: Code where the header is initialized...
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
// Dequeue with the reuse identifier
let cell = self.massMessageGroupsTableView.dequeueReusableHeaderFooterView(withIdentifier: "MessageGroupTableViewHeader")
let header = cell as! MessageGroupTableViewHeader
header.groupNameLabel.text = messageGroupsMap[section]?.messageGroup.name
header.section = section
header.setComposeButtonImage()
header.delegate = self
return cell
}
Thank you!
In your header setting, trying doing this instead:
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
// Dequeue with the reuse identifier
let cell = self.massMessageGroupsTableView.dequeueReusableCell(withIdentifier: "MessageGroupTableViewHeader")
let header = cell as! MessageGroupTableViewHeader
header.groupNameLabel.text = messageGroupsMap[section]?.messageGroup.name
header.section = section
header.setComposeButtonImage()
header.delegate = self
let containingView : UIView = UIView()
containingView.addSubview(header)
return containingView
}
So basically I have implemented a static table so far and at the very bottom, I want to add another dynamic table for the participant list of the event. Check out the screenshot here:
My problem now is, that I'm not able to setup the dynamic table with its own class which is placed in the last static table view cell. You can check out the red marked squares in the screenshot. My actual plan was to give the dynamic table its own class and then retrieve the participant list as an array and setup the numberOfRowsInSection according to the count of the array etc.
Do you guys have an idea how I can implement that within a static table? Basically, how can I add that dynamic table at the bottom, including later then endless scrolling?
I've tried this post so far but it didn't completely help me: Dynamic UITableView inside static cell
I'll add my solution below.
Your help would appreciated a lot!
Kind regards
Matt
Unless there's a real reason to have the top portion be a table as well, the easiest solution is going to be to make the top portion a table header view and just use a dynamic table.
Create a ViewController. Then place two ContainerViewControllers inside of the ViewController. Create segues to 2 separate tableViewcontrollers using embed. One to the static tableview and one to the dynamic tableview. This way you could have a static table on top and a dynamic one below.
Okay thank you rMickeyD for your tip. I used it partially and implemented it. You can see the result on this screenshot here:
Adding to this I set the height of the cell in the static table with a prepareToSegue to the array of the guests.count * 44 for the cell height in the right.
Code for the static table view (left):
import UIKit
class EventDetailTableViewController: UITableViewController {
var attendeesArrayFromDatabase = ["Kathi", "Cansin", "Tyrone", "Manuel", "Stavros", "Christoph", "Maria", "Aditya", "Kathi", "Cansin", "Tyrone", "Manuel", "Stavros", "Christoph", "Maria", "Aditya"]
override func viewDidLoad() {
super.viewDidLoad()
}
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
if indexPath.section == 1 && indexPath.row == 0 {
let height:CGFloat = CGFloat(attendeesArrayFromDatabase.count * 44)
return height
}
return super.tableView(tableView, heightForRowAtIndexPath: indexPath)
}
// MARK: Navigation
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
let destViewController : EventPeopleJoinedContainerTableViewController = segue.destinationViewController as! EventPeopleJoinedContainerTableViewController
destViewController.attendeesArray = attendeesArrayFromDatabase
}
}
and the right tableview for the dynamic table:
import UIKit
class EventPeopleJoinedContainerTableViewController: UITableViewController {
var attendeesArray = []
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
// MARK: - Table view data source
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return attendeesArray.count
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("personJoined", forIndexPath: indexPath) as UITableViewCell
//Create a label with the name of a person from array attendeesArray
let attendeeNameLabel = UILabel(frame: CGRect(x: 70, y: 0, width: cell.frame.width, height: cell.frame.height))
attendeeNameLabel.font = cell.textLabel?.font.fontWithSize(14.0)
attendeeNameLabel.textColor = UIColor.darkGrayColor()
attendeeNameLabel.text = attendeesArray[indexPath.row] as? String
//Create a image view for the profile picture of the guest
let attendeeImageView = UIImageView(frame: CGRect(x: 25, y: 7, width: 30, height: 30))
attendeeImageView.layer.cornerRadius = attendeeImageView.frame.size.width/2
attendeeImageView.layer.borderColor = UIColor.whiteColor().CGColor
attendeeImageView.layer.borderWidth = 0.5
attendeeImageView.clipsToBounds = true
attendeeImageView.image = UIImage(named: "profilPicDummy")
cell.contentView.addSubview(attendeeNameLabel)
cell.contentView.addSubview(attendeeImageView)
return cell
}
}