Today I gonna show you how you can easily animate your
QuartzCore out of the box functionality. This allows you to create smooth animation during state changes like adding or deleting some rows or sections of your table view.
For this tutorial I am using the – at the moment – latest iOS SDK 8.1, but the code is downward compatible. We will implement all the code within a subclass of
UITableViewController and you should be already familiar with the default code within such a subclass.
The workflow to create smooth row animations is pretty simple:
- React to some kind of user interaction (e.g. selecting a
UITableViewCell) or an event.
- Mark the beginning of a
- Change the state of your view controller
- Insert/delete/reload corresponding rows and/or sections with a selected animation type
- Mark the end of a
One of the important thing to know is that you have to ensure that the correct number of rows and sections is returned of your
UITableViewController implementation after calling methods like
insertRowsAtIndexPaths: withRowAnimation: or
deleteRowsAtIndexPaths: withRowAnimation: and committing the table view update. If you have four rows in your first section and you remove two of them within a
endUpdates block your implementation of
tableView:numberOfRowsInSection: must return two after that.
UITableView provides the following methods to implement row animations:
Next you will find two easy examples showing you how to create simple row animations as well as how to chain two row animations in sequence.
Simple Row Animation
Ok, lets get hands-on and create a simple row animation. We are going to remove a row which was selected by a user. We are using a simple
NSMutableArray as our data model containing some
_data . Next we implement the
UITableViewDataSource methods for returning the number of sections and rows per section.
Next we are going to create a little bit more complex animation. First we remove a row and after that we will add another section to our
UITableView . For this case we will use a multidimensional
NSMutableArray to represent sections and rows as our data model. Again our methods for the number of sections and rows are stated below:
To get a smooth animation we need to chain two animations in a sequence. Since
UITableView provides no callbacks or methods with completion blocks for executing code after an animation is done, we use the help of
CATransaction . Each layer animation happens within a
CATransaction and this transactions can be nested too. In our case we use
CATransaction to batch another animation after the first animation did end. To start a transaction use the method
begin and to end it use
commit. To set the next animation use the method
I hope this post helped you or saved you some time.
Leave a Reply