[iOS] Paginated UIScrollView with Partial Previous/Next Page Visible

We know that UIScrollView allows us to put a huge content in a container with a limited frame. Sometimes we also need to restrict users to scroll page by page. To make users aware of other pages, we may want to reveal partially the previous and the next page. Here we are going to demonstrate how to make use of UIScrollView to solve that. Like this:

Paginated UIScrollView with two-sided partially visible

1. Prepare UIScrollView

Go to the Attribute Inspector, check the option Paging Enabled. This prevents the Scroll View from arbitrary scrolling, making it scroll by pages.

2. Put a UIStackView inside UIScrollView

Set required constraints to this stack view:

1. StackView.leading = ScrollView.leading
2. StackView.trailing = ScrollView.trailing
3. StackView.top = ScrollView.top
4. StackView.bottom = ScrollView.bottom
5. StackView.height = ScrollView.height

So far, the views are still ambiguous, since the width of Stack View is not determined when there are no subviews inside.

3. Add subviews into UIStackView

Drag multiple views into the Stack View. Assign each of the views the same width as the Scroll View, so that one view occupies exactly one page. For easy identification, we have each view different background colors.

Run the app and you will see the result like this:

4. Make the previous/next page partially visible

First, make the Scroll View smaller. For example:

1. ScrollView.leading = SuperView.leading +15
2. ScrollView.trailing = SuperView.trailing -15

Secondly, select Scroll View, and go to the Attribute Inspector. Uncheck the option Clip To Bounds. Run this app, and you will see:

Here we have our effect done. However, we could do something more to further make it prettier.

5. Advanced: Spaces between subviews

Select Stack View, and set the spacing between subviews. For example, 10.

However, due to the spacing on both sides, the view must shrink in width to fit in the page. For example, we have to deduct 10 from the width of each of the subviews.

Run this app. You should find something wrong. Both sides seem not equally visible. We are not finished yet.

This is because the first subview does not have spacing on the left. So is the last subview; the last does not have spacing on the right. So we should place 0-width placeholder views before and after the first and the last subview.

Also, make Stack View shifted half the spacing to Scroll View. For example, if we have the Stack View spacing 10, we shall make the following change in constraints:

1. StackView.leading = ScrollView.leading -5
2. StackView.trailing = ScrollView.trailing +5

Run the app. Now both sides are equally visible.

Reference:
https://stackoverflow.com/questions/5618780/uiscrollview-with-pagination-showing-part-of-the-previous-following-pages

If this article is helpful to you, please don’t hesitate to encourage me with applause!