Question

I have a tableview like..

The cells xxxx, yyyy & zzzz are fixed, so that, there is no click action to them. But the cell “Show” is clickable. I want to show some six cells under the “Show” cell when it is clicked.

So, after clicking the “Show” cell, the table will look like..

Here, what I done is,

• Changed cell.textLabel.text to “Show” to “Hide”

• Used [tableView reloadData]; in tableView:didSelectRowAtIndexPath: method.

My code is:

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.title = @"My title";
    // This Mutable array contains the hided cell objects
    hidedCellsArray = [[NSMutableArray alloc] initWithObjects:@"Cell 1", @"Cell 2", @"Cell 3", @"Cell 4", @"Cell 5", @"Cell 6", nil];
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{
...

else if(indexPath.section == 1)
    {
        if (isShowClicked) //isShowClicked is a boolean value that determines whether the show cell was clicked or not
        {
            if (indexPath.row == 0)
            {
                cell.textLabel.text = @"Hide";
                cell.selectionStyle = UITableViewCellSelectionStyleBlue;
                cell.textLabel.textAlignment=UITextAlignmentCenter;
            }

            else
            {
                cell.textLabel.text = [hidedCellsArray objectAtIndex:indexPath.row-1];
                cell.selectionStyle = UITableViewCellSelectionStyleBlue;
                cell.textLabel.textAlignment=UITextAlignmentCenter;
            }
        }

        else
        {
            cell.textLabel.text = @"Show";
            cell.selectionStyle = UITableViewCellSelectionStyleBlue;
            cell.textLabel.textAlignment=UITextAlignmentCenter;
        }
    }
...
return cell;
}


- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 
{
    if (indexPath.section == 1)
    {
        if (isShowClicked)
        {
            isShowClicked = NO;
        }

        else
        {
            isShowClicked = YES;
        }

        [tableView reloadData];
    }
}

What I need:

• I want to animate the cells when I click on the show/hide button. I come to know that, the method insertRowsAtIndexPaths: withRowAnimation: should be used to achieve the insertion effect. But I really don’t see any simple example for this. Should I include any other methods like setEditing:animated: or tableView: commitEditingStyle: forRowAtIndexPath: methods to do this?

• The second thing is, before the animation (cell insertion) happen, I want to move the tableview to section 2 (That is, the “show” cell) to the top. Then the animation of inserting cells should be happen. So, the final appearance of the table after clicking the show cell should like..

Help needed.. I just confused!!

Answer 1

For the first part, you can check “Batch Insertion, Deletion, and Reloading of Rows and Sections” section under Table View Programming Guide for iOS. The most important thing is you need to make sure your data source is matched with the change.

For the second problem, you can set the contentOffset of the table view to the point of the origin of second section title. Something like:

self.tableView.contentOffset = CGPointMake(0, [self.tableView rectForSection:1].origin.y);

If you want to use animation for better UE, just do

[UIView animateWithDuration:duration animations:^{
    //Move table view to where you want
} completion:^(BOOL finished){
    //insert rows when table view movement animation finish
}];