How to create static cells with dynamic cell heights with Swift - ios

I have looked at several tutorials that show how to set dynamic cell heights, but all of them only show it if you are using dynamic cells by setting the appropriate constraints and using UITableViewAutomaticDimension. However, I would like to do this for static cells.
I have a table view controller in my app that contains several cells that display a category with a disclosure indicator in which there is a title and then a description and the size of the description text varies. Thus, I would like the height of the cell to be dynamic per the size of the description text.
The reason why I am using static cells and not dynamic cells is because above the category cells I have a few cells with some designs that I could only get by using static cells and storyboarding.
I am using iOS9, Xcode 7.3 and Swift 2.2
UPDATE
Table View Controller Code
import UIKit
class CategoriesTableViewController: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 140
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
// MARK: - Table view data source
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return 2
}
}
UPDATE 2
Per accepted answer below I added the two methods below to my table view controller and removed the 2 lines I had in viewDidLoad(). This did it for me! Keep in mind that I had to make sure all the labels in each cell used a top, bottom, leading and trailing constraint. Also, the number of lines for each label must be set to 0.
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
override func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}

UILabel:
Set numberOfLines = 0 via programmatically or set lines to zero in attributes inspector of the UILabel.
UITextView:
Let's select your text view and uncheck the scrolling enabled like as below image.
Add the below code to your view controller:
Swift 5:
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
Swift 2.2:
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}

For Swift 3
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}

All you have to do is set proper AutoLayout inside the cell, so the height increases based on the length of the description text.
Then you need to set the following in your viewDidLoad
tableview.rowHeight = UITableViewAutomaticDimension
tableview.estimatedRowHeight = 44
Please note: you need to set the numberOfLines of UILabel to 0

#Forge, add please to your topic
Swift 4 variant:
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}

#Forge answer Swift 5 variant,
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}

Related

UITableView Cell Auto Dimension Working in First Attempt But Not Working Afterwords

I created UITableViewController to show reviews, shown in below picture.
It shows the layout correctly for the first build like below.
Correct Layout
But when I close the app and re-open it, It shows the layout like below.
Wrong Layout
I am using Xcode 12.0 and I tried on iOS 12,iOS 13 and iOS 14 same problem occurs.
Here is my code for the app: (It's a Table View Controller)
override func viewDidLoad() {
super.viewDidLoad()
}
#IBAction func addTapped(_ sender: Any) {
self.present(AlertService().ReviewAlert(), animated: true, completion: nil)
}
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
tableView.layoutIfNeeded()
}
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 {
// #warning Incomplete implementation, return the number of rows
return 5
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "ReviewCell", for: indexPath) as! reviewCell
// Configure the cell...
cell.ratingSetup(rating: (indexPath.row + 1))
cell.reviewLabel.text = String(repeating: "Lorem Ipsum ", count: ((indexPath.row + 1) * 5))
if indexPath.row == 1 || indexPath.row == 3 { cell.markedAsRead.isHidden = true }
cell.sizeToFit()
cell.reviewLabel.numberOfLines = 0
cell.layoutIfNeeded()
return cell
}
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return CGFloat(100)
} }
Here is my Table View Cell Content as well.
Remove methods:
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
tableView.layoutIfNeeded()
}
...
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return CGFloat(100)
} }
Remove:
cell.sizeToFit()
cell.reviewLabel.numberOfLines = 0
cell.layoutIfNeeded()
Set numberOfLines right in the storyboard for the label.
Check cell size field in the storyboard to be empty.
Check if you have all constraints - try to make the cell longer in the storyboard and check how label is rendered there (add long text to check if new lines are added).
Check if when launched you have no constraint warnings, if you have, then find "label to bottom" constraint and set priority from 1000 to 999.
I don't know why it happened but found a solution.
I added all other view to a Header.xib file and used basic cell type for review text.
Then It worked. Probably Cell can't handle auto dimension when there is bunch of stuff going on the prototype cell.

UILabel taking space when number of lines is fixed in UITableViewCell?

I have a UILabel in UITableViewCell.I have given it's constraints as Top,Bottom,Leading ,Trailing. If I give it numberoflines as 0 then it does not take any space.But if give it fix number of lines then it takes extra space from top & bottom. Please tell me what is the issue ?
Code for UITableView Delegates
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
Constraints Given as
Screenshot for the UITableViewCell
When you give number of lines 0 along with the above constraints, the UILabel will have auto height, which means the AutomaticDimension for tableview cell will height relative to UILabel. When UILabel's text is empty, it's height becomes zero.
To overcome this situation, you can specify either of two things:
Minimum height for the UILabel (e.g. in the constraint give height > 30)
Estimated height for UITableViewCell using delegate method
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return 100
}
extension ViewController: UITableViewDelegate, UITableViewDataSource {
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
let lbl = cell.contentView.viewWithTag(10) as! UILabel
lbl.text = "abcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksdabcljfdslkfj;dlskfjd;slkfjds;ljdsfldjsf;ldsjfdslkfjds;lfjds;lfjdfl;jdsf;lkdjsf;ldsjf;ldskjd;slfjdsl;fjd;fljdfl;kjsdflljksd"
return cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return 100
}
}

Swift 3: How can I remove the extra space from the TableView?

I have a webview on the tableview, and on each cell I have some extra blank space after the phone numbers and email/ website addresses. So how can I remove/ delete the extra blank space from the cell to make it look bit better.
the code what I have is this:
self.heightOfTheCell = CGFloat(((heightMul)*32)+4)
I am not too sure how to play up with these numbers.
Please find the screenshot attached.
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if indexPath.section == 0
{
if heightOfTheCell != nil
{
return heightOfTheCell
}else{
return UITableViewAutomaticDimension
}
}
else{
return UITableViewAutomaticDimension
}
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
Here's how I do it.
First setup properly the constraints for the cells.
then on your viewController
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}

Dynamically adjust the height of the tableview cell based on content - iOS Swift

I am trying to set the row height dynamically based on the content set in the detail text label, by using the below code in Part A.
I am inserting few lines of text into a cell's detail text label as shown below in Part B
I've looked at other similar questions but none have helped.
Can some one please advice how I can adjust the row height dynamically based on the content of the detail text label.
Part A
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
Also tried
func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
Part B
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "daysIdentifier", for: indexPath)
cell.textLabel?.text = days[indexPath.row]
cell.detailTextLabel?.numberOfLines = 0
var joinedString = self.availabilityTimeDict[dayName]?.joined(separator: " \n ")
cell.detailTextLabel?.text = joinedString
return cell
}
Use custom cell and labels.
Set up the constrains for the UILabel. (top, left, bottom, right)
Set lines of the UILabel to 0
Add the following code in the viewDidLoad method of the ViewController:
tableView.estimatedRowHeight = 68.0
tableView.rowHeight = UITableView.automaticDimension
// Delegate & data source
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return UITableView.automaticDimension;
}
Swift 4:
// Delegate & data source
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
Swift 4.2:
// Delegate & data source
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
give top,bottom,leading and trailing to your lable inside content of tableview.Use below methods of table view
func tableView(_ tableView: UITableView,heightForRowAt indexPath:IndexPath) -> CGFloat
{
return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat
{
return 100
}
First setup a custom cell and add a label and set its number of lines to zero and give bottom, top, leading, trailing constraints to cell's content view(dont give the height) also give a custom height to cell in size inspector then in viewDidLoad you just need to do,
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 100.0

iOS: UITableView inside UITableViewCell with dynamic cell height

I want to implement UITableView inside UITableViewCell with dynamic height of cell according to inside UITableView content size. How can I implement this any suggestions?
I want layout something like this...
Code work:
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let identifier = "OrderHistoryTVCell" let cell: OrderHistoryTVCell! = tableView.dequeueReusableCell(withIdentifier: identifier) as? OrderHistoryTVCell
let tableInnerContentSize = cell.tableInner.contentSize.height
let nn = cell.viewAfterTable.frame.height+tableInnerContentSize
return nn
}
use following:
#IBOutlet weak var tableView: UITableView! //connect the table view
//do following in viewDidLoad method
tableView.estimatedRowHeight = 100 //Your estimated height
tableView.rowHeight = UITableViewAutomaticDimension
Also set these two properties of UILable from Attributes inspector section of storyboard:
lines to 0
Line break to word wrap
or you can also set these properties from code:
self.lblxyz.numberOfLines = 0
self.lblxyz.lineBreakMode = .byWordWrapping
Note - Add constraint properly in table view cell.
You have to do something like this:
In ui Master-Item # is be your section header. So take UILabel and add it as a section header.
Your sub-item is the prtotype-cell cell which contains one label.
Constraints for label inside cell.
In your cell first add UIView with constraints as follows:
Top , Bottom , Leading, Bottom to superView as 0.
Now add label and give constraints as follow.
Top , Bottom , Leading, Bottom to UIView as 8.
Give height constraint as per your requirement.
Give height relationship from = to >=.
Set label property line to 0 from storyboard.
Implement this lines in
//MARK:- TableView
public func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat{
return 60 // return header height
}
public func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
// return your section header i.e. master item label
}
public func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat{
return 50;
}
public func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat{
return UITableViewAutomaticDimension
}
public func numberOfSections(in tableView: UITableView) -> Int{
// return number of section i.e. total count of master item.
}
public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
// returns number of cells in each section
}
public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{
// return your custom cell here
//eg:
// cell.labelFood.text = your data
}
NOTE Don't forget to bind delegate and dataSource of tableView.
use this code in viewDidLoad()
self.tableView.estimatedRowHeight = 350
self.tableView.rowHeight = UITableViewAutomaticDimension
Use this Delegate
func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
{
self.tableView.estimatedRowHeight = 160
return UITableViewAutomaticDimension
}
Also set these two properties of UILable.
#IBOutlet weak var label: UILabel!
label.numberOfLines = 0

Resources