How to animate table view cells when switching between buttons of UISegmentedControl? - iphone

Question

My application is looking like the below image
I have 3 buttons in my segmented control. Assume that hitting the "Department" button will display 3 departments & hitting "Name" button will show 6 names.
I follow the below steps to make this..
Create UISegmentedControl by this code
segmentedControl = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:#"Department", #"Name", #"ID",nil]]; //Initialize Segmented Control
segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar; //Define bar type (optional)
segmentedControl.selectedSegmentIndex = 0; //Define default clicked button
[segmentedControl addTarget:self action:#selector(segmentClicked) forControlEvents:UIControlEventValueChanged]; //Set target and define which method should called when tapping buttons
self.navigationItem.titleView = segmentedControl; //To add UISegmented Control in the title of the navigation bar
Define the method(segmentClicked) for UISegmented Control
segment = segmentedControl.selectedSegmentIndex;
if (segment==0) {
//Do something for Department tab
[self.tableView reloadData];
}
else if (segment==1) {
//Do something for Name tab
[self.tableView reloadData];
}
else {
//Do something for ID tab
[self.tableView reloadData];
}
Create the cells with reference to the value of segment in tableView: cellForRowAtIndexPath: method. (So that we can get various cells for each UISegmentedControl buttons)
if (segment == 0) {
cell.textLabel.text = [listOfDepartments objectAtIndex:indexPath.section]; //listOfDepartments is the NSMutableArray that contains list of Departments names
}
else if (segment == 1) {
cell.textLabel.text = [listOfNames objectAtIndex:indexPath.section]; //listOfNames is the NSMutableArray that contains list of person names
}
else {
cell.textLabel.text = [listOfIDs objectAtIndex:indexPath.section]; //listOfIDs is the NSMutableArray that contains list of person ID's
}
return cell;
So, finally i got the view showed in the above image.
When i press on the UISegmentedControl buttons, the table view reloads its cells & showing corresponding values perfectly. By default, the "Department" button was selected. If i tap the "Name" button(that is, table will show 6 cells instead of 3), The table changes immediately without any animations. It simply hide 3 cells of department names and showing 6 cells that displaying names of persons without any animations. I could not find a way to making the cell changes with smooth animations.
What should i implement to achieve the smooth animations?
Thanks in Advance

Answer 1

Use insertRowsAtIndexPaths:withRowAnimation: and deleteRowsAtIndexPaths:withRowAnimation: methods which has options for specifying some build-in cool animations.
typedef enum {
UITableViewRowAnimationFade,
UITableViewRowAnimationRight,
UITableViewRowAnimationLeft,
UITableViewRowAnimationTop,
UITableViewRowAnimationBottom,
UITableViewRowAnimationNone,
UITableViewRowAnimationMiddle,
} UITableViewRowAnimation;

Answer 2

It may help to try:
[self.tableView beginUpdates];
[self.tableView endUpdates];
in your segmentClicked method, instead of [self.tableView reloadData];
These methods sometimes animate table changes better.

Answer 3

Use the method reloadSections: withRowAnimation:
If you are having only one section then pass [NSIndexSet indexSetWithIndex:0] as a first argument in above method. In the second argument you can choose the animation type.