How did they do this? [iPhone layout]

Question

checkout this app:

If you swipe left in main image (the black shoes) you can see another image.

Can anyone try this app (Fashiolista, it's free and signup isn't required) and say me how can I do an effect like that?

Thank you guys.

Answer 1

They seem to be using Core Animation to modify the images' alpha and animate the images out and in.

Check out Introduction to Core Animation Programming Guide.

*edit:

They could also be using UIViews animation API. This is probably even simpler. View Programming Guide - Animations

Answer 2

I've not tried the app, but the way you usually accomplish that is with UIScrollView. In order to get the swiping-action to work as expected, you have to set pagingEnabled to YES.

The hardest part of implementing something like this is handling limited system resources: you'll run out of memory really quick. So you have to implement a queuing system rather like that used in UITableView. There are a few projects of this sort on GitHub, but I recommend checking out Apple's dev resources on this; I don't remember the link, but I believe in the last WWDC materials, they had info on how to build this properly.

Answer 3

Looks like they are lowering the opacity of the content as it scrolls of using core animation and ease out transition