ScrollView

In iOS applications, sometimes, we may need to show the content that doesn't fit into the screen. To show this type of content, we use ScrollView in the application. A ScrollView allows the user to drag the area of the content. It is an instance of the UIScrollView class, which inherits UIView.

The ScrollView allows the scrolling and zooming of its contained views. The tableview and collectionview are the subclasses of UIScrollView, and therefore, these classes provide a great way to display the content that is larger than the screen. In iOS applications, we use tableview to display the vertically scrollable content, and the collectionview to display the horizontally scrollable content.

The origin of the UIScrollView object is adjustable over the content view. A ScrollView tracks the movement of the fingers and adjusts its origin accordingly.

Adding ScrollView to the interface

Adding ScrollView to the interface builder is a bit complex as compare to the other objects. We need to define the auto-layout rules to guide the layout and position of the scroll view on the different screen devices.

Follow the following steps to add the scrollview to the interface using the interface builder (main.storyboard).

• Search for the ScrollView on the main.storyboard and drag the result to the ViewController.

• Define the Auto layout rules (constraints) for the ScrollView, as shown in the following image.

• Add ContentView to the ScrollView and define the auto-layout rules for the content view.

Give the constraint margin 0 to the contentView from ScrollView. We also need to make the height and width of them equal.

Make the priority of the ContentView to the low, as shown in the below image. This is the most important step in this setup; otherwise, the scrollview doesn't scroll.

We will have the ScrollView and the ContentView on the storyboard. Since ScrollView works when the content size doesn't fit into the entire screen of the iPhone Screen. We define the size of the ViewController screen into the size inspector in XCode. By default, the simulated size of then ViewController is fixed. However, we need to make it freeform and give the height anything greater than the current Screen height as given in the below image.

Add a UILabel to the top, center, and bottom of the ScrollView and give the vertical spacing between them, to test whether the ScrollView is working or not. After adding the UILabels and changing the background color, the interface builder will be looking like the following window.

The above setup will make the ScrollView to Scroll to show the whole content on the screen.

ScrollView Properties

The UIScrollView class contains the following properties.

Example

This is a simple example in which we will create a ScrollView and the ContentView. We will create two UIViews inside the scroll view to display the actual content.

Interface Builder

In this example, we will use the scrollview, which contains a content view. The content view will be scrolled to display two uiviews. For this purpose, use the instructions given in this tutorial to add the scrollview to the interface builder and add the scrollview to the interface.

Add the UIView to the ScrollView and define the auto-layout rules for the UIView. After adding the UIView (ContentView) to the scrollview, we need to add two UIViews and a UIButton to the storyboard.

To make the ScrollView, scrollable, we need to change the ViewController size from fixed to freeform and define some vertical spacing among the views.

Set up the auto-layout rules for the ScrollView, ContentView, UIviews, and the submit button.

AutoLayout Rules for ScrollView

AutoLayout rules for ContentView

AutoLayout rules for AdminDetailsView

AutoLayout Rules for UserDetailView

Main.storyboard

ViewController.swift

Output: