I lately began building my first iOS application and rapidly encountered problems attempting to apply dynamic heights to UITableView cells based on their content. This appears like the type of common task that Apple will make simple through their APIs but after hrs of research I came across that:
- It is really an very prevalent problem .
- There’s not one, agreed-upon solution.
- Existing solutions (that one from Cacao is My Girlfriend appears is the most broadly associated with) seem to involve lots of code repetition.
Frustrated, I grew to become going to create my very own solution. The goals:
- Make use of a custom UITableViewCell NIB developed in Interface Builder and just adjust things in code at the appropriate interval.
- Have the ability to easily use the custom cell to table views within my application Storyboard.
- Avoid code repetition whenever we can. We’re gonna need to calculate heights once for that row on the other hand for that cell so let’s streamline that.
Here’s things i created.
Make a Prototype Cell
First, produce a new Empty Interface. Drag a UITableViewCell object in, grow it with subviews and place them the way you like. You’ll most likely wish to set the cell Style to Custom within the Attributes inspector. Here’s your prototype cell styles and positioning is going to be inherited from this.
I required the approach of including everything that may be proven within the cell within my NIB in order to hide instead of add elements in code later. Make certain your constraints are positioned up nicely to match the peak of the cell altering –
Next, create a goal-C class that extends UITableViewCell and add qualities to the header file for all those cell elements you’ll want use of inside your UITableViewController later:
Return to your NIB, select your cell, and connect the IBOutlet s within the Connections inspector by ctrl-dragging to the appropriate subviews.
Finally, set the next on the cell inside your NIB and also the prototype cell in every UITableView of the Storyboard.
- Alter the Custom Class within the Identity inspector for your recently produced class ( NaSQuotationTableViewCell ).
- Provide a distinctive Identifier within the Attributes inspector. Mine is QuotationCell .
Apply Dynamic Cell Heights
The very first factor you’ll wish to accomplish is import the brand new cell class within the header of the UITableViewController :
Within the implementation file of the UITableViewController. give a property for the cell prototype:
Then load the prototype NIB once the view loads: – (void)viewDidLoad < [super viewDidLoad]; //load prototype table cell nib static NSString *CellIdentifier = @”QuotationCell”; [self.tableView registerNib:[UINib nibWithNibName:@”NaSQuotationTableViewCell” bundle:nil] forCellReuseIdentifier:CellIdentifier]; self.cellPrototype = [self.tableView dequeueReusableCellWithIdentifier:CellIdentifier];
Now we have the prototype cell labels, we are able to pass their attributes into NSString ’s sizeWithFont: approach to calculate the needed row height:
We are able to reuse sizeOfLabel: in tableView:cellForRowAtIndexPath: to render labels using the correct heights:
There we’ve it! Dynamic table cell heights with respect to the text incorporated inside them. Hopefully this gives a decent beginning point for experienceing this look you would like inside your application. Best of luck!
I confused myself for any good 20 minutes by making use of a height Equal constraint to some UILabel and wondering why altering the frame height in code wasn’t getting any affect. Cheers to my mate Mike for mentioning I needed Under or Equal. ↩