How to Implement a UIScrollView (Xcode)

UIScrollView is one of the most heavily used user interface (UI) elements in modern iOS development. However, many people who are new to iOS development struggle with the implementation of it. That is why I made this tutorial, which shows you how to make a basic art portfolio application using a UIScrollView and assumes that you have little to no experience with iOS development.

Before we begin, please make sure that you have Xcode installed and that it is updated to the latest version (at the time of this tutorial, version 8.0).

To start off, open up Xcode and click “Create a new Xcode project”.

Next, make sure that “Single View Application” is selected and click “Next”.

You will then be asked to fill in some information. Fill out the product name with something that describes the application that you are building (in this case, “Art Portfolio”). Your “Organization Name” can simply be your first and last name and then the two fields after that will be auto completed. Make sure that “Swift” is selected as the “Language” and “Universal” is selected as the “Devices”. We will not be using Core Data in this application, so you can leave this box unchecked. Click “Next”.

Choose a folder that you would like your project to be stored in and click “Create”.

Once the project is created, the first thing you will be see the project information. There is nothing that has to be changed there, so click on Main.storyboard to view your UI builder.

All you should see is a blank View Controller with an arrow pointing to it. To the left of the View Controller, you should see a pane that simply shows “View Controller Scene”. Click on the down arrow next to “View Controller Scene” and then click the arrow next to “View Controller” so that the pane looks like the image above.

At the bottom right hand corner of your screen, you will find the Object library. Click in the text field that says “Filter” and type “scroll view”. Now click on the Scroll View object and drag it onto the View Controller.

While the Scroll View is selected, click on the top left hand corner of it and drag it to the top left corner of the View Controller. Then click on the bottom right corner of the Scroll View and drag it to the bottom right corner of the View Controller so that the Scroll View fills up the entire view.

Next, click on the Pin tool as shown in the image above. You should see a zero to the top, left, right, and bottom of the square just as it shows in the image above. If you do not see zeros on each of the sides, then go back and make sure that the Scroll View is taking up the entire view. If you do see all zeros (as it should), then click on each of the I beams so that they turn red and click on the “Add 4 Constraints” button. These constraints make sure that your Scroll View fills up the entire screen regardless of the screen size of the device running your application.

This is where things start to get interesting. Now that you have your Scroll View, you need to put a regular View inside of it to hold all of your content. This View is commonly referred to as the Content View since it stores all of the content that your users will be scrolling through.

To start, go to the Object library and search for “UIView”. Click the View object and drag it over on top of the Scroll View. If you look at the left pane now, you should see a View object indented under the Scroll View object. If the View is not indented under the Scroll View, then make sure you dragged the View on top of the Scroll View. Also make sure to change the size of the View to fill up the entire screen just like the Scroll View.

(Optional) If you would like your View to have the same background color as mine, make sure the View is selected and go to the Attributes Inspector in the right pane (the icon to the left of the ruler icon). Click on “Background”-->“Other…” and you should see a color palette. Click on the colored pencils icon on the far right to see a selection of colored pencils to choose from. Choose the color “Mercury” to change your background color to reflect mine.

While the View is selected, click on the ruler icon near the top of the right pane. Change the value of height to 905. This will be explained further in a later step. Next, navigate to the View object in the View Controller Scene pane on the left. Control+click on the View object and drag to the Scroll View object. Once you release the mouse, you should see a list of options to choose from as shown in the second image. Click the Equal Widths option. This will ensure that the width of the Content View is always the same as the Scroll View.

Finally, select the View object and click on the Pin tool. You will notice that the constraint for the bottom has a negative value. Make sure you change that value to “0” before you add the four constraints to the View object as shown in the third image. You will see a lot of red on your screen after you add the constraints, but that will be fixed shortly.

It’s finally time to start putting objects in the View! To start, go to the Object library and drag an Image View onto the View. Click on the ruler and make sure that it has the same dimensions and position as the image above. Next, drag a Label from the Object library and place it right under the image view in the center. Xcode should help you place the Label the correct distance away from the Image View.

Now, click on the Image View. While the Image View is selected, command+click the Label so that both items are now selected. Press command+d so that now you have an additional Image View and Label. Drag the two new items under the first two as shown in the image. Continue duplicating the items until you have five Image Views and five Labels.

While you are placing the items, you will notice that you run out of space on the bottom. When this happens, just click on the View object that is in the Scroll View and move it up so that the bottom of the View can be seen. Now you can move the rest of your items to the right position.

Now that we have all of our UI elements in place, we have to add constraints to them in order to make sure that they show up correctly on our devices. One of the constraints that all of the elements need is the constraint to be centered horizontally in the container. In order to do that, select all of the elements in the left pane by clicking on the first Image View at the top and then shift+click the last Label on the bottom. While they are all selected, click on the icon to the left of the Pin tool and check the box next to “Horizontally in Container” as shown in the first image. Click “Add 11 Constraints”.

Next, click on the top Image View. Click on the Pin tool and add the constraints as shown in the second Image. Continue going down the UI elements and add the same three constraints to each element (top, width, and height). Once you reach the last label, make sure to add the bottom constraint (as shown in the third image) in addition to the three constraints that you added to each of the other elements. If any of the constraints are highlighted as yellow on your screen, be sure to select the element that has that constraint, click the icon to the right of the Pin tool (as shown in the fourth image), and click Update Frames.

Before we approach the final step, make sure you have five images on hand to bring into your project. Now that you have those five images, navigate to the Assets folder as shown in the first image. Right now, you should not see anything aside from an empty AppIcon in that folder. Click and drag the five images that you chose into the Assets folder.

Now navigate back to the Storyboard and click on the top Image View. Go to the right pane near the top and click on the Attributes inspector next to the ruler icon. The first text field to fill in is Image, so enter the name of the file that you would like to be shown as your first image here. Click on the other Image Views and follow the same steps to designate them images as well. Lastly, double click on each Label and fill out the title for each Image View.

Congratulations! You should now have a fully functioning app that uses a Scroll View. Just choose your simulator device in the top left corner and then click the play button to see the application in action.