UIScrollView horizontal paging like Mobile Safari tabs

Viewed 46304

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?

11 Answers

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 the UIScrollView. Then, set your subview's sizes however big you need them to be, and set their centers based on multiples of the UIScrollView's width.

Then, since you want to see the other pages, of course, set clipsToBounds to NO as mhjoy stated. The trick part now is getting it to scroll when the user starts the drag outside the range of the UIScrollView'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 the UIScrollView and it's subviews. Essentially, it should have the frame of what you would assume the UIScrollView would have under normal circumstances. Place the UIScrollView in the center of the ClipView. Make sure the ClipView's clipsToBounds is set to YES if its width is less than that of its parent view. Also, the ClipView needs a reference to the UIScrollView.

The final step is to override - (UIView *)hitTest:withEvent: inside the ClipView.

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
  return [self pointInside:point withEvent:event] ? scrollView : nil;
}

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 return YES based only on the UIScrollView'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.

I wound up going with the custom UIScrollView myself as it was the quickest and simpler method it seemed to me. However, I didn't see any exact code so figured I would share. My needs were for a UIScrollView that had small content and therefore the UIScrollView itself was small to achieve the paging affect. As the post states you can't swipe across. But now you can.

Create a class CustomScrollView and subclass UIScrollView. Then all you need to do is add this into the .m file:

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
  return (point.y >= 0 && point.y <= self.frame.size.height);
}

This allows you to scroll from side to side (horizontal). Adjust the bounds accordingly to set your swipe/scrolling touch area. Enjoy!

Here is a Swift answer based on Ed Marty's answer but also including the modification by Juri Pakaste to allow button taps etc inside the scrollview.

override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
    let view = super.hitTest(point, with: event)
    return view == self ? scrollView : view
}

Swift 5 / iOS 15

TLDR - Do what the accepted answer says, but use my version of hitTest(...) below

I wanted the user to be able to tap a page off to the left or right & scroll it to the center, but existing solutions didn't work (I added gesture recognizers to each page for this, and the gestures were never triggered for pages outside the scrollView frame).

The accepted answer almost worked great for me, but the hitTest override was no good - the elements on each page weren't responding to touches (I had UISwitches that wouldn't react to taps). The suggested modifications of hitTest(...) to allow interactivity on each page weren't complete either, since taps on any page outside the scrollView bounds weren't sent to the page (suggested answers just pass the touch to the scrollView, which doesn't pass the touch down to its content lying outside its frame).

I used the following code instead, and it's working perfectly. I don't like accessing the scrollView's content view like this, but the code won't crash & safely falls back to the original suggested code. If anyone knows of a better way to pass touches to the scrollView's content view, I would appreciate it.

public override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
    guard let scrollViewContentView = scrollView.subviews.first else {
        // fallback behavior - user can scroll carousel if touch starts outside the scrollView frame, but taps on elements outside the scrollView frame will be ignored
        let view = super.hitTest(point, with: event)
        return view == self ? scrollView : view
    }
    
    let convertedPoint = scrollViewContentView.convert(point, from: self)
    return self.point(inside: point, with: event) ? scrollViewContentView.hitTest(convertedPoint, with: event) : nil
}
Related