ScrollView as circle

Question

I want to create exactly same as scrolling of images as sonypictures at app stores. Is it possible with scrollview.

Please any body help me.How can I create that one.

Answer 1

I just had a closer look at iCarousel and it looks like its "Cylinder" type carousel should be pretty much what you want.

My original answer for historical reasons:

I don't know of a ready-made solution, so you'l probably have to use Core Animation as others have noted. However, open source projects like these, TapKu (TKCoverflowView), iCarousel and MBCoverFlowView, which all imitate "cover flow" should give you a good starting point to work from (found via CocoaControls here, here and here).

Answer 2

First of, if you only wanted the behavior of partly showing the left and right posters on a 2D surface like when you are switching tabs in Safari on iPhone. That would be possible to do with a regular scroll view. There are many questions discussing it, like paging like safari, iPad document preview or paging uiscrollview and they in turn link to other related questions and answers. If that is an okay solution for you, then I'm sure that you can find your answer in one of those posts.

If however, it is the 3D cylinder that you are after then you will have to either use a third party framework or you will have to write your own code to get the cylinder effect.

For writing your own code there are two aspects that you need to consider. The first is how the interface will look and the other is how it will feel when the user scrolls in the user face. I haven't used the Sony app so I don't know how it behaves. My guess is that it "pages" i.e. always stops with a movie poster centered, just like the UIScrollView can do for you.

You could base your solution of a UIScrollView with paging turned on to get the nicest scrolling but you could also just add a UISwipeGestureRecognizer to your view and use left and right swipes to switch one poster to the left or right.

If you go for the UIScrollView approach then I suggest that you look at the links above and try working your way from there (and ask new questions when you get stuck).

With the second approach (UISwipeGestureRecognizer) you would have a main view, I will call it "movies view". Its layer would have many "poster layer"-sublayers with one poster each. Depending on the number of posters that you want visible on the screen you could then define a CATransform3D for each position of the posters (center, left and right (and optionally leftEdge, rightEdge or something like that). Then when the UISwipeGestureRecognizer detects a swipe anywhere in the movies view (the entire view) then you would change the transform property on all the layers so that they would animate to their new positions. You would also have transforms that move a layer on and off the screen on the left and right side. By using rotation and perspective (Google "CATransform m34" if your not sure what I mean) you could make it seem like the layers move along a cylinder.

If you search the web or just StackOverflow for "Core Animation CoverFlow" you will find answers that can help you get you started. Just change the rotation so that the off-center layers rotate away from you, make the layers smaller and move then slightly down and you will achieve the "cylinder effect" that the Sony app has.

If you get stuck or just want to learn more about Core Animation there are a lot of great resources out there like these books M. Zarra & M. Long: Core Animation, B. Dudney: Core Animation.

Also, this screencast-series by Bill Dudney (same as the second book) is a fantastic Core Animation resource. And episode 4 even works on a Cover Flow-like application.