iOS: TableView with expanding cells

Question

I'm currently developing an iOS version of an Android app. On one screen I have a series of rows that, when clicked, expand to provide for information.

Before click:

---

After clicks:

How can I replicate this behavior in iOS? I don't know whether I should use a table view or just construct generic UIViews. I am using Auto Layout.

Answer 1

You can reload UITableVIewCell at particular NSIndexPath and calculate new height for cell.

Check:

- (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation

from UITableView and

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

from UITableViewDelegate .

Answer 2

Simply customize your header views for each group in your UITableView . Use viewforheaderinsection method to do that, and return UIButton for example. And if you tap that button, you should insert UITableViewCells in this selected group. I cant give you a code because I'm on windows now, but it's very simple to do.

UPD: look at this sample code by Apple: http://developer.apple.com/library/ios/#samplecode/TableViewUpdates/Introduction/Intro.html#//apple_ref/doc/uid/DTS40010139

Answer 3

When you receive the touch event for expanding your table cell, use the following calls in your table controller

[self.tableView beginUpdates];
[self.tableView endUpdates];

Though the animation block is empty, calling beginUpdates the endUpdates causes the table view to refresh cell layout and animate changes. This will cause your table view delegate to be re-queried - so ensure you implement the following method in your UITableViewDelegate (Usually you will have set this to be the UITableViewController):

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

Ensure this method will return the appropriate expanded cell size after the touch event is received. The result will be a nice smooth cell expansion animation :)