Overview
Well this is going to be a fairly short article, but I just wanted to share with you a snippet of magic I discovered quite some time ago. It is something that I posted on StackOverflow and to date is the most up-votes I have received on there, with votes coming in pretty much every day.
The magic is in how you can animate the height change for a UITableViewCell in a normal UITableView.
Simplicity Defined
This really is as simple as it gets. First you need to implement all of the standard methods that you are required to for a UITableView datasource and delegate. But the key one to look at is the following…
| 1 2 3 4 5 6 7 8 | - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:( NSIndexPath *)indexPath { // If our cell is selected, return double height if ([ self cellIsSelected:indexPath]) { return kCellHeight * 2.0; } // Cell isn't selected so return single height return kCellHeight; } |
What this does is check whether the cell is currently selected and if so returns double the normal height. kCellHeight is a compiler define and cellIsSelected: is a method which takes an indexPath and returns whether the cell is selected or not. This doesn’t come from the cell itself, instead I am just storing the selected state in an NSMutableDictionary keyed on the indexPath.
Animate The Change
So we know that returning a variable height in the heightForRowAtIndexPath method will result in the table sizing the cells accordingly, but how do we animate the change… well simplicity itself… you simply use these two lines…
| 1 2 | [myTableView beginUpdates]; [myTableView endUpdates]; |
What this results in is the UITableView re-evaluating it’s visible cells and setting their size accordingly but without reloading the data, and the best part? IT ANIMATES IT!
In the demo project I toggle the selected status of a cell and call these magic two lines in the following method…
- ( void )tableView:(UITableView *)tableView didSelectRowAtIndexPath:( NSIndexPath *)indexPath; |
The Full Code
The full code for the selection method is as follows…
| 1 2 3 4 5 6 7 8 9 10 11 12 | - ( void )tableView:(UITableView *)tableView didSelectRowAtIndexPath:( NSIndexPath *)indexPath { // Deselect cell [tableView deselectRowAtIndexPath:indexPath animated:TRUE]; // Toggle 'selected' state BOOL isSelected = ![ self cellIsSelected:indexPath]; // Store cell 'selected' state keyed on indexPath NSNumber *selectedIndex = [ NSNumber numberWithBool:isSelected]; [selectedIndexes setObject:selectedIndex forKey:indexPath]; // This is where magic happens... [demoTableView beginUpdates]; [demoTableView endUpdates]; } |
So download the demo project and see it in action…. marvellous!
