Mobile Safari allows you to switch pages by entering a sort of UIScrollView horizontal paging view with a page control at the bottom.
I am trying to replicate this particular behavior where a horizontally scrollable UIScrollView shows some of the next view's content.
The Apple provided example: PageControl shows how to use a UIScrollView for horizontal paging, but all views take up the whole screen width.
How do I get a UIScrollView to show some content of the next view like mobile Safari does?
Best Answer
A
UIScrollView
with paging enabled will stop at multiples of its frame width (or height). So the first step is to figure out how wide you want your pages to be. Make that the width of theUIScrollView
. Then, set your subview's sizes however big you need them to be, and set their centers based on multiples of theUIScrollView
's width.Then, since you want to see the other pages, of course, set
clipsToBounds
toNO
as mhjoy stated. The trick part now is getting it to scroll when the user starts the drag outside the range of theUIScrollView
's frame. My solution (when I had to do this very recently) was as follows:Create a
UIView
subclass (i.e.ClipView
) that will contain theUIScrollView
and it's subviews. Essentially, it should have the frame of what you would assume theUIScrollView
would have under normal circumstances. Place theUIScrollView
in the center of theClipView
. Make sure theClipView
'sclipsToBounds
is set toYES
if its width is less than that of its parent view. Also, theClipView
needs a reference to theUIScrollView
.The final step is to override
- (UIView *)hitTest:withEvent:
inside theClipView
.This basically expands the touch area of the
UIScrollView
to the frame of its parent's view, exactly what you need.Another option would be to subclass
UIScrollView
and override its- (BOOL)pointInside:(CGPoint) point withEvent:(UIEvent *) event
method, however you will still need a container view to do the clipping, and it may be difficult to determine when to returnYES
based only on theUIScrollView
's frame.NOTE: You should also take a look at Juri Pakaste's hitTest:withEvent: modification if you are having issues with subview user interaction.