How can I animate this custom view transition in my iPhone app?

Question

This is a tricky question to explain, but basically I have an app with a home screen with a bunch of circular icons on it. When the user taps on an icon, it pushes a table view onto the navigation stack. When an icon is tapped on the home screen, I want the tapped icon to stay on top of the table view as it scrolls in, and then drop onto the table view in the cell that represents it. All the other icons, however, should stay below the incoming table view, like normal. Here's a quick diagram I whipped up...

I'm about to begin researching this, I just wanted to quickly post this question in case anyone has some ideas about how I can approach this. Thanks so much for your wisdom!

Answer 1

Oh thats soo easy!!!

I'll try to explain my solution:

You need two sets of icons.

One set lays on Home View, second is exact location, but as a subview on main window (by default - hidden)

Once You select a button, and want to push a list - You un-hide corresponding window subview icon, and with delay - animate / shrink it to tableView corresponding location.

Once animation is finished - hide icon (instant hide will not be noticeable, as this icon will be positioned/scaled to precisely reassemble icon in tableview), and move it to default position/scale (still hidden).

That's it.

Answer 2

This is pretty simple, and can be done without adding second instances of your buttons. You'll use the view hierarchies z-index for this.

When you add the table view as a subview of the main view don't use addSubview , use:

[self.view insertSubview:table belowSubview:button];

Button^ will represent the button that you want to stay on top, and for your other buttons, you just have to make sure that they are lower on the stack. This way, when the table flies in, it can keep going past the button but the button will stay above it.

You can also use:

[self.view insertSubview:table atIndex:5];

On all of these buttons and the table to have total control over each objects z-index.