Simple Overflowing Paginated UIScrollView

[ahmedk92]

(Originally published 2019-05-12)

So, I was using this beautiful Quran app Ayah. I noticed something cool about how it pages its content; there is a visual divider between each two inner pages, and a different one between outer pages. See the below gif for clarity.

Preliminary Analysis

You may see such effect being called "Overflowing Pagination". This is not uncommon, and there is good write-ups on how it can be achieved; for example: Soroush's articles 1 & 2. Also allow me to plug in an earlier experimentation of mine 😁.

But...I overthought the problem. As usual.

Techniques mentioned above deal with a trickier problem; paging with a page size different than the scrollView's bounds width (the default behavior you get with isPagingEnabled). Luckily, to achieve what we saw in the video, we don't need any of this.

If you notice, you'll see that although there are two different looking separator views, they are of the same size. So, this gives us an idea. Instead of having the width of the scroll view being equal to our screen, we increase it by how big we want our separator views to be (with the extra width being evenly distributed over both sides). Moreover, we center the scroll view in which the extra portions are off-screen. And that's it. Here's a sample code, and a demo of it below.

And as you may already know, as this applies to UIScrollView, then it applies to UIPageViewController (as in the linked sample) and UICollectionView with isPagingEnabled.

Thanks. Looking forward for your feedback.