Flicking through pages / photos with UIImageViews (similar to Facebook photos app or home screen)

Question

Hello,

First of all, I'd like to point out that I'm not asking for code. I'm just asking for the sort of things I'd need to do to get this to work, as right now I've absolutely no idea. Here's what I want to do:

Similar to viewing someone's photos in the Facebook app, I'd like to display an image (UIImageView) on the screen. When the user flicks it left (off the screen), the next photo in the album appears (I guess I could use some sort of array of images?). Flicking right moves to the previous photo in the album.

I'm sure I could figure out the loading images and array stuff, but the thought of moving an imageview off the screen with a flick animation and showing the next photo in the series is really daunting.

If you haven't used the Facebook app, the effect I'm after is the same as switching pages on the home screen of the iphone. Once you drag the page so far, it snaps to the next page. Any help greatly appreciated.

Answer 1

You can do this very simply (as long as you aren't implementing zoom as well) using UIScrollView with its pagingEnabled property set to YES, and UIImageViews as subviews of the UIScrollView to display your images, of course.

With pagingEnabled == YES, the UIScrollView will snap its contentOffset to multiples of its bounds' height and width.

http://developer.apple.com/IPhone/library/documentation/UIKit/Reference/UIScrollView_Class/Reference/UIScrollView.html http://developer.apple.com/IPhone/library/documentation/UIKit/Reference/UIScrollView_Class/Reference/UIScrollView.html#//apple_ref/occ/instp/UIScrollView/pagingEnabled

Answer 2

Facebook released the Three20 library, which also contains their photo album component. Take a look at it and maybe you can save yourself a lot of time by not reinventing the wheel... it also contains many other useful utilities that I don't want to miss anymore when doing iPhone development.

Answer 3

Apple has released the 2010 WWDC session videos to all members of the iphone developer program. One of the topics discussed is how they created the photos app!!! They build a very similar app step by step and have made all the code available for free.

It does not use private api either. Here is a link to the sample code download. You will probably need to login to gain access.

http://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?code=y&source=x&bundleID=20645

And, here is a link to the iTunes WWDC page:

http://insideapple.apple.com/redir/cbx-cgi.do?v=2&la=en&lc=&a=kGSol9sgPHP%2BtlWtLp%2BEP%2FnxnZarjWJglPBZRHd3oDbACudP51JNGS8KlsFgxZto9X%2BTsnqSbeUSWX0doe%2Fzv%2FN5XV55%2FomsyfRgFBysOnIVggO%2Fn2p%2BiweDK%2F%2FmsIXj