Peeling away the interface in an iOS app

Mark Rickert

  • Reading Time  Min Read
  • Publish Date June 28, 2011

Update: thanks to Elliott’s comment, I was able to remove the screen capturing portion of the code since UIKit captures the screen FOR us immediately before the animation fires. This eliminates a lot of memory usage. Thanks Elliott!

I’m a big fan of the Square iPhone app. It is a great service with a  beautiful and extremely well-designed interface.

But this isn’t a commercial for Square—I’m going to walk you through step-by-step how to implement that really cool page curl animation they use when you hit the "Clear" button. Don’t know what I’m talking about? Here’s the effect in action:

[Square Page Curl Animation]

So if you have got an application that does something and then clears the screen, how do you go about implementing this in your own app?

There are four basic steps involved in creating this effect:

  1. Add a blank transparent UIView to your stack.

  2. Do all the clearing of interface elements and reset everything the way you want.

  3. Initialize the page curl effect to peel away the dummy UIView.

  4. Remove the UIView from the view hierarchy and then from memory.

Here’s a demo video of what we’re going to make.

Let’s walk through the steps.  (Note: This tutorial assumes you know how to create IBOutlets and IBActions and connect them in Xcode’s Interface Builder view.)

First we want to create an IBAction for your button that’s going to initialize the action. Create the method in your .m and .h files and wire up the action to the appropriate interface element (usually a UIButton).

Next, we’ll add the code to actually perform our task. We’ll be using blocks to handle the completion instead of delegate methods because it just makes the code a little cleaner.

Here’s my IBAction that’s wired to my UIButton in the interface:


As you can see from all the inline comments: I created the view, added the view as a subview to my view controller’s main view, cleared everything off the screen, peeled back that subview, and released it from memory.

Check out the example project on github. Fork it and use it!


Feel free to leave comments, improvements, or alternate solutions below.

Send Us a Message

Let's Work Together

By filling in the form, you agree to our Privacy Policy, including our cookie use.