Table View Animations Tutorial: Drop-In Cards

Add some flair to your tables.

Add some flair to your tables.

Update 8/6/14: There is a brand new version of this tutorial fully updated for Swift – check it out!

The standard UITableView is a powerful and flexible way to present data in your apps; chances are that most apps you write will use UITableView in some form. However, one downside is that without some level of customization, your apps will look bland and blend in with the thousands of apps just like it.

To prevent boring table views, you can add some subtle animation to liven up the actions of your app. You may have seen this in the popular app Google Plus, where the cards fly in through the side with a cool animation. If you haven’t seen it yet, download it now to check it out (it’s free)!

In this table view animations tutorial, you’ll be enhancing an existing app to rotate the cells of a table as you scroll through. Along the way, you’ll learn about how transforms are achieved in UIKit, and how to use them in a subtle manner so as not to overwhelm your user with too much happening on-screen at once.

This tutorial assumes you know how to work with a UITableView. If you’re not really familiar with table views, you might want to start with a tutorial such as How to Create a Simple iPhone App that will teach you the basics of a TableView app.

The Code Team is a group of expert-level coders interested in coming up with particularly cool demos demonstrating advanced techniques. The Tutorial Team then converts the best demos into high quality tutorials. If you are an expert level iOS developer and are interested in joining the Code Team, contact me!

Getting Started

Download the starter project and open it up in Xcode. You’ll find a simple storyboard project with a UITableViewController subclass (CTMainViewController) and a custom UITableViewCell (CTCardCell). The cell has all the properties that you need to set the data for each individual.

Build and run the project in the simulator; you’ll see the following:

A perfectly good design, ready to be spiced up.

A perfectly good design, ready to be spiced up.

The app is off to a good start, but it could use a little more flair. That’s your job; you’ll use some Core Animation tricks to animate your cell.

Defining Your Transformation

You’ll add a rotation effect to your cards to make your app feel a little more dynamic. Core Animation can be used with all elements of UIKit, and some incredibly intricate things can be built using this framework. Although it’s incredibly powerful, there are some portions of it that are tremendously simple to implement.

To get your cards rotating, you’ll apply a transformation to the cell as it is displayed, and then animate it so that it returns to its normal position. Since this transformation will be applied to each row, there’s no sense regenerating the animation for every cell. Instead, you’ll store the animation in a property so that you can reuse it.

Open CTMainViewController.m and add the following property to the @interface block:

@property (assign, nonatomic) CATransform3D initialTransformation;

The code above sets up the property to store your animation.

Next, add the following code to viewDidLoad, immediately after changing the backgroundView:

CGFloat rotationAngleDegrees = -15;
CGFloat rotationAngleRadians = rotationAngleDegrees * (M_PI/180);
CGPoint offsetPositioning = CGPointMake(-20, -20);
    
CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DRotate(transform, rotationAngleRadians, 0.0, 0.0, 1.0);
transform = CATransform3DTranslate(transform, offsetPositioning.x, offsetPositioning.y, 0.0);
_initialTransformation = transform;

The code above first sets up a few CGFloat and CGPoint constants to be used in the transformations. Next, it applies a series of simple transformations and translations to build up the effect, as follows:

• Start with an identity transform, which is a fancy math term for “do nothing.”
• Call CATransform3DRotate to apply a rotation of -15 degrees (in radians), where the negative value indicates a clockwise rotation.
• Apply the rotation around the axis 0.0, 0.0, 1.0; this represents the z-axis, where x=0, y=0, and z=1.
• Applying just the rotation to the card isn’t enough, as this simply rotates the card about its center. To make it look like it’s tipped over on a corner, add a translation or shift where the negative values indicate a shift up and to the left.

Note: The transformation ultimately is a complicated matrix. If you studied matrix math in school, you may recognize this as multiplication of matricies. Each step multiplies a new transformation until you end up with the final matrix.

Building up transformations to produce the desired effect.

Building up transformations to produce the desired effect.

The transformation is now stored in a property; to see it in action, you need to apply it to your cards.

Applying Your Transformation

First, you’ll just apply the initial transformation to the cells to tip them on their side. You’ll worry about the reverse transformation — returning the cells to their original position — in just a bit.

Add the following line to import section at the top of CTMainViewController.m:

#import <QuartzCore/QuartzCore.h> 

Next, add the following method to the implementation section of CTMainViewController.m:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    UIView *card = [(CTCardCell* )cell mainView];
        
    card.layer.transform = self.initialTransformation;
    card.layer.opacity = 0.8;        
}

TableView calls tableView:willDisplayCell:forRowAtIndexPath on its delegate just before each cell is displayed. The above method grabs a reference to the subview named mainView defined in CTCardCell. The layer property of the UIView elements hold a reference to the Core Animation layer for the view; in turn, layers have a transform property.

By default, transform is set to the identity transform, but here you override this and set the transform to the one you just stored in the property. Finally you set the initial opacity of the layer to 0.8 to look slightly transparent; as the animation progresses you’ll fade the card in to an opacity of 1.0 — which you’ll take care of a little later.

You’ll notice that you’re transforming a child view of the cell, and not the cell itself. Rotating the actual cell would cause part of it to cover the cell above and below it, which would cause some odd visual effects, such as flickering and clipping of the cell. This is why the cell has a large view (mainView) containing all the other items.

Before you build the project, you’ll need to link the framework into the project to see your hard work in action.

Click the CardTilt target in the navigator section on the left of the XCode window. Click Build Phases, then expand the little triangle next to ‘Link Binary with Libraries’. Click the small ‘+’ at the bottom of that section, and add QuartzCore.framework to the build.

Since you don’t want to leave the cells with this crooked alignment, go ahead with the next section before you run the project.