Sunday, June 12, 2011

How does UITableViewCell reorder, expand/shrink work ?

So you spent way too much time in figuring out how to make UITableview collapsible, you are at the right tutorial.This sample code, I have written is a more like a template which developers can take and use in their own application customize it according to their need. It basically deals with TableView property of reordering, expanding and shrinking.

Here are some screenshots which display the work on UITableview collapse expand process.

You can either expand them OR                 Fold them up to see the UITableview collapsed section.

While reordering the cells in editing mode(Press Edit button on top of Tableview on the tool bar to go into editing mode of table), you can move the cells with in the same Section like Row 4 is being moved around(You have to press on the "list icon" (the icon with 3 tiny horizontal lines) which is present in the cells and then drag the cell around.) You don't have to give specific image, this is inbuilt image of reordering which comes with Apple API.

You can move the cell from one section to another section entirely.As you can see here that Cell 5 is being moved from Section 1 to Section 2.

Then in  MainController.m >

cellArray  is the array which stores  title which will be displayed on each cell in various sections.
Its structure is as following

{@"row1",@"row2",@"row3", @"row4",@"row5"}, // Titles  for cells in section 1
{@"row1",@"row2",@"row3", @"row4",@"row5"},// Titles  for cells in section 2
{@"row1",@"row2",@"row3", @"row4",@"row5"},// Titles  for cells in section 3
{@"row1",@"row2",@"row3", @"row4",@"row5"},// Titles  for cells in section 4
{@"row1",@"row2",@"row3", @"row4",@"row5"},// Titles  for cells in section 5

So its an array of arrays. When you move cells around on your screen, these title strings will move in the array as well.

- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath

I am finally printing the reordered cell array(which has strings stored presented on each cell) in the given above method. Now its your job to save the updated cellArray into somewhere so that changes can be reflected back when you open the app next time and when it loads up the cellArray again on the screen.
Hope this code helps save someone lots of time.

Download the code HERE


  1. Great job. Thanks a lot. It helped me save a lot of time. :)

  2. please check the download link it is not working , i need this code

  3. Hi!! Good tutorial!! Just a question. Is it possible to get the row text and the parent name when i click on a row? Thanks