How to create a horizontal scrolling view for the iPhone?

Question

Safari does this with tabbed web pages. The AppStore (3.0) does this with an app's preview images. Views scroll horizontally and lock in centered on each view. Any idea how to accomplish this?

Answer 1

You need:

1. A ScrollView with paging enabled, three screens wide.
2. To have three subviews in your scrollview - L (left content, at 0,0), C (centre content, at 320,0), R (right content, at 640,0). C is the content you want to initially show. L is the content to show if the user scrolls left.
3. Set the contentoffset of the scrollview to 320 (for portrait mode), because you want C to display initially, not L.
4. Every time a scroll finishes, the contentoffset will be an integer multiple of screens. If you are still displaying C (contentoffset is 320), then you're fine. If the contentoffset is now 0 or 640, you have a bit of work to do.

If the user scrolls left - you have the same view hierarchy, but now the scrollview is showing L rather than C, because the contentoffset is 0, with a scrolloffset of 0. You should now reset all the content so you have XLC and a scrolloffset of 320 - in case the user wants to scroll left again. In other words, C becomes the new R, L becomes the new C, and X is the new content to display if the user scrolls left again.

The method to override to do this is:

(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView

Answer 2

I would do this using a CATransition, with type kCATransitionPush.

CATransition *animation = [CATransition animation];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromRight]; //or ...FromLeft, as the case may be

I've gotten better performance with CATransitions than with other techniques so far, but that might depend on several factors.

Have a look at the TransitionView class in Apple's example code for an example of how to build a view that does transitions. With that class you can do:

- (void)replaceSubview:(UIView *)oldView withSubview:(UIView *)newView transition:(NSString *)transition direction:(NSString *)direction duration:(NSTimeInterval)duration;