UITableView - inserting rows and scrolling to a specific section

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
}];

Answer 2

Try with UIView CommitAnimation

Answer 3

Not to nitpick but the "hidedArray" should really be "hiddenArray", for grammatical correctness. Anyway, I don't think you need a separate array for the hidden items. For the sake of example let's say you are using "dataArray" to populate the tableview.

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

     if ((indexpath.section == 1) && (indexpath.row == 0)) {
          if (isShowClicked) {
            cell.textLabel.text = @"Hide";
            cell.selectionStyle = UITableViewCellSelectionStyleBlue;
            cell.textLabel.textAlignment=UITextAlignmentCenter;
           } else {
            cell.textLabel.text = @"Show";
            cell.selectionStyle = UITableViewCellSelectionStyleBlue;
            cell.textLabel.textAlignment=UITextAlignmentCenter;
           }
      }
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 
{
  if ((indexpath.section == 1) && (indexpath.row == 0) && (isShowClicked == NO)) {
    isShowClicked = YES;
    [self.tableView beginUpdates];
    [dataArray addObjectsFromArray:[NSArray arrayWithObjects:@"cell1",@"cell2",@"cell3",@"cell4",@"cell5",@"cell6", nil]];
    NSArray *paths = [NSArray arrayWithObject:[NSIndexPath indexPathForRow:[dataArray count]-1 inSection:1]]; 
    //the first section is section 0, so this is actually the second one
    [[self tableView] insertRowsAtIndexPaths:paths withRowAnimation:UITableViewRowAnimationFade];
    [tableView endUpdates];
    showIsClicked = YES;
    self.tableview.contentOffset = xy; 
   //the value of the tableView's contentOffset when it is scrolled to the right position. You can get it by NSLog-ing the contentOffset property and scrolling to the desired position
   } else if ((indexpath.section == 1) && (indexpath.row == 0) && (isShowClicked == YES)) {
    isShowClicked = NO;
    [self.tableView beginUpdates];
        [array removeObjectsAtIndexes:[NSIndexSet indexSetWithIndexesInRange:NSMakeRange(indexpath.row + 1, 6)]];

    [tableView endUpdates];
    self.tableview.contentOffset = xy; 
   //the value of the tableView's contentOffset when it is scrolled to the right position. You can get it by NSLog-ing the contentOffset property and scrolling to the desired position
   }
}

There might be a few mistakes but i think it's mostly correct.