Scroll View Guide

Overview

Scroll views allow you to display content in an area on the screen that
is smaller than the size of the content. They allow the user to pan
(scroll) and/or zoom the content. The
UITableView and UICollectionView
are a subclasses of UIScrollView, so many of the
points below will apply to them as well.

Basic Usage

Step 1: Add scroll view to view hierarchy

Add a scroll view to your view controller by dragging one from the
Object Library. The size of the scroll view is the size of the area
that is visible to the user.

Step 2: Set content size

Tell the scroll view about the size of your content area by setting the
contentSize property. In this example the content has the same width
as the scroll view and three times its height. The user will have to
scroll vertically to access the lower parts of the content area.

Step 3. Add content subviews

What is shown in the scrollable content area of a scroll view is
determined by its subviews. The frame of each subview is relative to
the top left of the content area. A scroll view can contain more than
one subview. In this example we add a series differently-colored
subviews. Each subview has the same width as the scroll view, but we
offset the top of their frames so they do not overlap each other.

Using paging mode

Enabling paging

You can force the scroll view to to snap to "page" boundaries by setting
the pagingEnabled property. The size of a page is equal to the size
of the scroll view. You'll generally want to disable to scroll
indicators when paging is enabled. Here we allow the user to
horizontally page through three views.

Adding a page control

The paging behavior is often combined with a UIPageControl that
displays a dot for each page and allows the user to switch pages by
tapping. This behavior can be achieved by implementing the
UIScrollViewDelegate and adding an action handler for the page
control.

Pinch to zoom

Basic zooming behavior via pinch gestures is provided by the scroll view
if you implement the viewForZoomingInScrollView delegate method.
Since a scroll view can have more than one subview, this method will
identify which view will be zoomed when the pinch gesture fires. You'll
also need to set the minimumZoomScale and maximumZoomScale.

Using scroll views with auto layout

As noted above, there are two sizes that are relevant
when working with a scroll view:

the scroll view's (frame) size. This determines how the scroll view
fits inside its parent view and its size as it appears on the screen to the user.

the scroll view's content size. This determines the size of
available to the scrollable content within the scroll view.

In order to use a scroll view with auto layout you must still specify
both of these sizes.

One approach to accomplishing this is to use auto layout constraints
only to determine the scroll view's size relative to its parents and
neighbors. The content size and size of subviews inside the scroll
view are still set programatically as we have been doing throughout this
guide.

A second approach uses only Auto Layout constraints. In particular,
this means there must be a way for Auto Layout to specify the content
size of a scroll view. Altogether, the constraints must be enough to
determine three things:

The size of the scroll view. You can use the pin and align tools to
create constraints to parent and sibling views. Unlike other views,
you cannot rely on the size of child views of the scroll view here.

The content size of the scroll view. This is specified by creating
constraints between the scroll view's edges and the subviews within
the scroll view. Note that these constraints have a different
meaning than normal constraints between a parent view and its child
views. The only size being determined here is the content size of the
scroll view.

Finally you must set constraints to determine the size of the actual
subviews containing the scrollable content.
These constraints cannot depend on the edges of the scroll
view—since as we just saw, they would then be interpreted as
constraints on the content size. It is typical here to set a fixed size
for a single main scrollable subview and to place other views inside this
subview.