In this tutorial, we are going to discuss about implementation of Scroll View to scroll the content if there is more content going out of screen in iOS application in Xcode 8. Scroll View is a tool which is used for the purpose of scrolling the content within the app.

Following are the steps to implement Scroll View:

Step 1: Open Xcode -> click on Create new Xcode project then choose Single View Application template under iOS tab as shown in below image and click Next button.

Step 2: Enter the product name as ScrollViewDemo and click on ‘Next’ button as shown in below image. Later click ‘Create’ button to create project appear on the next window.

Step 3: Adding UIScrollView into the View Controller.

On your project, click on main.storyboard file available in the project navigator, and then select the UIScrollView from object library, drag into the superview of View Controller, it will look like below.  

Also, set its constraints by pinning from all four sides to ‘0’ & click on ‘Add 4 Constraints’.

Step 4: Change Height of View Controller

Now select View Controller, go to size inspector and change ‘Simulated Size’ from Fixed to Freeform then change its height to ‘1000’ as shown in below screenshot.

Step 5: Adding UIView on the Scroll View.

Search UIView and add it to ScrollView and set constraints from all four sides to zero and fifth constraint is Height which should be equal to View Controller’s height and then click ‘Add 5 Constraints’ as shown in below screenshot.

And one more constraint to add to equalise its width to superview. Just drag by control button to superview and select ‘Equal Width’ constraint.  

Step 6: Add 5 Buttons & set its constraints.

Now, add 5 buttons to the view and set its position using constraints all over the view as shown in image. 

Step 7: Run Simulator

Finally, UIScrollView implemented in the project and now run it to check its working for scrolling the content.

Have Fun !

You can also watch its video on below link:

Leave a Reply

Your email address will not be published. Required fields are marked *