Photos app-like gap between pages in UIScrollView

Question

UIScrollView in paging mode assumes the pages are located right next to each other, with no gap. However if you open a photo in the Photos app and swipe through photos, you can see that it has some gap between pages. I want these gaps too.

I'm looking for existing solutions if any, or for some more bizarre ideas about implementing the page gaps besides the one I have explained below. Or maybe there's some obvious easy way I am missing?

To be clear: I want the gap to only be visible while scrolling, so I cannot simply inset the page content.

---

My plan is to try moving the page content from inside scrollViewDidScroll callback, so that (assuming you're scrolling to the right) initially the target page is slightly offset to the right of its page boundaries, and by the time you arrive at the target page it's back at its proper location, and the source page is slightly offset to the left of its boundaries. (Or maybe instead of moving things continuously, I'll be better off shifting the offsets, say, exactly halfway between pages.)

I'm the author of the ScrollingMadness article+example that I've been referring some people to here. I've implemented progammatic zooming, and got in-photo zooming+scrolling working together with inter-photo paging. So I know how to play with UIScrollView, and am looking for the advanced stuff.

Please don't point me at TTScrollView. I've already pointed many people to it myself, but I consider it's feel too far from the native UIScrollView behaviour, and do not want to use it in my projects.

Answer 1

The way to do this is like you said, a combination of a few things.

If you want a gap of 20px between your images, you need to:

First, expand your scroll view's total width by 20px and move it left by 10px.

Second, when you lay out the xLoc of your images, add 20px for each image so they're spaced 20px apart. Third, set the initial xLoc of your images to 10px instead of 0px.

Fourth, make sure you set the content size of your scroll view to add 20px for each image. So if you have kNumImages images and each is kScrollObjWidth, then you go like this:

[scrollView setContentSize:CGSizeMake((kNumImages * (kScrollObjWidth+20)),  kScrollObjHeight)];

It should work after that!

Answer 2

Maybe you want to try UIScrollView's contentInset property?

myScrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 10.0);