- 10 feb 2017
- 7 Min. de lectura

How to use UIScrollView with Autolayout in Swift. iOS Tutorials.

Actualizado: 17 oct 2020

One of the most complicated tasks with Auto Layout in iOS 8 is getting UIScrollView to work properly. We’ve been searching all over the Internet and we did not found any good documentation or tutorial about it, so after several tries we want to explain how we got UIScrollView working properly with Auto Layout on iOS8 with Swift.

…Let’s start!

First of all you’ll need to create a new project,

(Xcode menu) File > New > Project > Single View Application (in iOS/Application)

Fill whatever information you want and be sure the language is set to Swift. After this point, your screen should be similar to this one.

We are gonna use a Scroll View with paging option enabled using Auto Layout and supporting both Portrait and Landscape orientation, imaging a kind of tutorial/walkthrough for our iOS app.

1) Open the Main.storyboard and set your View Controller to use Any Width | Any Height (All possible layouts)

2) Let’s say we want three pages on our Scroll View, if you want to design them properly, you will need to resize your whole View Controller accordingly. Click on View Controller on the Document Outline and go to the Size Inspector on the Utilities menu. You’ll need to change the Simulated Size of your controller to Freeform and set it to your maximum content width. In our case, if we want 3 full-screen views, the final size will be 1800px width x 600px height.

3) Perfect! Everything is ready to start placing our UI elements on our View Controller. First of all let’s see what are we going to do. Our aim is to implement the following interface.

4) Place all the UI elements on the View Controller. Your view hierarchy should be like the following one.

TRICK According to Apple’s documentation, you should have only ONE view as the container of your Scroll View.

That is why is extremely important to double-check if your view hierarchy is exactly the same as the one in the image. Your Scroll View should have only ONE view as the container of all the other scrollable views.

Constraints, constraints, constraints.

Once you have everything on their place, we should start adding all the needed constraints.

5) You will be adding constraints in an out-in approach, so you will start with the Scroll View and the Page Control.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ custom_padding=»0px|90px|0px|90px» custom_padding_tablet=»0px|0px|0px|0px» custom_padding_phone=»0px|0px|0px|0px» custom_padding_last_edited=»on|desktop»][et_pb_row custom_padding=»0px|0px|0px|0px»][et_pb_column type=»4_4″ parallax=»off» parallax_method=»on»][et_pb_image src=»https://www.dribba.com/wp-content/uploads/2017/04/uiscrollview_autolayout_swift_app_barcelona_dribba_blog_6.jpg» alt=»UIScrollView con Autolayout y Swift. Añadiendo constante inferior para Blog de Dribba.» title_text=»UIScrollView con Autolayout y Swift. Añadiendo constante inferior para Blog de Dribba.» animation=»off» max_width=»700px»][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ custom_padding=»0px|90px|0px|90px» custom_padding_tablet=»0px|0px|0px|0px» custom_padding_phone=»0px|0px|0px|0px» custom_padding_last_edited=»on|desktop»][et_pb_row custom_padding=»0px|0px|0px|0px»][et_pb_column type=»4_4″ parallax=»off» parallax_method=»on»][et_pb_image src=»https://www.dribba.com/wp-content/uploads/2017/04/uiscrollview_autolayout_swift_app_barcelona_dribba_blog_7.jpg» alt=»UIScrollView con Autolayout y Swift. Añadiendo constantes paso a paso para Blog de Dribba.» title_text=»UIScrollView con Autolayout y Swift. Añadiendo constantes paso a paso para Blog de Dribba.» animation=»off» max_width=»700px»][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ custom_padding=»20px|360px|0px|90px» custom_padding_tablet=»|0px||0px» admin_label=»section» custom_padding_last_edited=»on|desktop»][et_pb_row admin_label=»row»][et_pb_column type=»4_4″ parallax=»off» parallax_method=»on»][et_pb_text admin_label=»Text» module_class=»blog-style»]

You’ve added 6 constraints, 4 constraints to the Scroll View (Leading, Trailing, Top and a bottom constraint to the Page Control) and 2 more constraints for the Page Control (Bottom constraint to content view and Center X constraint with the Scroll View). You can ⌘+R to see if everything is working right. You can also ⌘+→ to change the orientation of the iDevice and see how your interface is now ‘responsive’.

6) Add the Leading, Trailing, Top and Bottom constraints from the Container View. (These are special ScrollView constraints and they have no effect on your content size or position)

Are you having some Storyboard errors? Let’s fix them. You just need to add two more constraints to the Container View.

You’ve added two more constraints that specify the height and the width of the Container View. Add a ‘Equal Width’ and ‘Equal Height’ as the Scroll View to the Container View. All the errors had dissappeared ?

7) Let’s keep adding constraints. Now is the turn of our scrollable pages. They should be referenced one to each other, so you will add the constraints having that in mind.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ custom_padding=»0px|90px|0px|90px» custom_padding_tablet=»0px|0px|0px|0px» custom_padding_phone=»0px|0px|0px|0px» custom_padding_last_edited=»on|desktop»][et_pb_row custom_padding=»0px|0px|0px|0px»][et_pb_column type=»4_4″ parallax=»off» parallax_method=»on»][et_pb_image src=»https://www.dribba.com/wp-content/uploads/2017/04/uiscrollview_autolayout_swift_app_barcelona_dribba_blog_11.jpg» alt=»UIScrollView con Autolayout y Swift. Añadiendo constantes 2 para Blog de Dribba.» title_text=»UIScrollView con Autolayout y Swift. Añadiendo constantes 2 para Blog de Dribba.» animation=»off» max_width=»700px»][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ custom_padding=»0px|90px|0px|90px» custom_padding_tablet=»0px|0px|0px|0px» custom_padding_phone=»0px|0px|0px|0px» custom_padding_last_edited=»on|desktop»][et_pb_row custom_padding=»0px|0px|0px|0px»][et_pb_column type=»4_4″ parallax=»off» parallax_method=»on»][et_pb_image src=»https://www.dribba.com/wp-content/uploads/2017/04/uiscrollview_autolayout_swift_app_barcelona_dribba_blog_12.jpg» alt=»UIScrollView con Autolayout y Swift. Añadiendo constantes para Blog de Dribba.» title_text=»UIScrollView con Autolayout y Swift. Añadiendo constantes para Blog de Dribba.» animation=»off» max_width=»700px»][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ custom_padding=»0px|90px|0px|90px» custom_padding_tablet=»0px|0px|0px|0px» custom_padding_phone=»0px|0px|0px|0px» custom_padding_last_edited=»on|desktop»][et_pb_row custom_padding=»0px|0px|0px|0px»][et_pb_column type=»4_4″ parallax=»off» parallax_method=»on»][et_pb_image src=»https://www.dribba.com/wp-content/uploads/2017/04/uiscrollview_autolayout_swift_app_barcelona_dribba_blog_13.jpg» alt=»UIScrollView con Autolayout y Swift. Vista 3 para Blog de Dribba.» title_text=»UIScrollView con Autolayout y Swift. Vista 3 para Blog de Dribba.» animation=»off» max_width=»700px»][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ custom_padding=»20px|360px|0px|90px» custom_padding_tablet=»|0px||0px» admin_label=»section» custom_padding_last_edited=»on|desktop»][et_pb_row custom_padding=»27px|0px|0px|0px» admin_label=»row»][et_pb_column type=»4_4″ parallax=»off» parallax_method=»on»][et_pb_text admin_label=»Text» module_class=»blog-style»]

You sould add 3 constraints to the first view (Leading, Top and Bottom), 4 constraints to the second view (leading constraint to the first view, trailing constraint to the third view, top and bottom) and 3 constraints to the third view (Top, Bottom and Trailing).

Finally, you want all the views to have the same width, so let’s do it.

You just added two ‘Equal Width’ constraints from the first view to the second view and from the second view to the third view.

8) You want the scrollable pages to have the same width of the ScrollView, so let’s indicate it.

Add one last ‘Equal Width’ constraint between the first view and the Scroll View.

Some Storyboard errors may appear after this step. If that occurs, just delete the Equal Width – Container View – Scroll View constraint.

9) Setup the rest of the UI with your desired constraints (Page # always centered on the view). And setup the Scroll View to enable paging as follows.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ custom_padding=»20px|360px|0px|90px» custom_padding_tablet=»|0px||0px» admin_label=»section» custom_padding_last_edited=»on|desktop»][et_pb_row custom_padding=»27px|0px|0px|0px» admin_label=»row»][et_pb_column type=»4_4″ parallax=»off» parallax_method=»on»][et_pb_image src=»https://www.dribba.com/wp-content/uploads/2017/04/uiscrollview_autolayout_swift_app_barcelona_dribba_blog_17.jpg» alt=»UIScrollView con Autolayout y Swift. Propiedades ScrollView para Blog de Dribba.» title_text=»UIScrollView con Autolayout y Swift. Propiedades ScrollView para Blog de Dribba.» animation=»off» max_width=»400px»][/et_pb_image][et_pb_text admin_label=»Text» module_class=»blog-style»][/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ custom_padding=»20px|360px|0px|90px» custom_padding_tablet=»|0px||0px» admin_label=»section» custom_padding_last_edited=»on|desktop»][et_pb_row custom_padding=»0px|0px|0px|0px» disabled_on=»off|off|off» admin_label=»row»][et_pb_column type=»4_4″ parallax=»off» parallax_method=»on»][et_pb_text admin_label=»Text» module_class=»blog-style»]

10) Go to your ViewController.swift file and replace everything for the following piece of code.

import UIKit class ViewController: UIViewController, UIScrollViewDelegate { @IBOutlet weak var pageControl: UIPageControl! @IBOutlet weak var scrollView: UIScrollView! // MARK: – Lifecycle override func viewDidLoad() { super.viewDidLoad() scrollView.delegate = self } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } // MARK: – ScrollViewDelegate func scrollViewDidEndDecelerating(scrollView: UIScrollView){ let pageWidth: CGFloat = CGRectGetWidth(scrollView.frame) var currentPage: CGFloat = floor((scrollView.contentOffset.x – pageWidth/2) / pageWidth) + 1 self.pageControl.currentPage = Int(currentPage) } }

11) Connect your elements in the Storyboard with the @IBOutlet.

12) ⌘+R… and we’re done! You should be seeing something similar to this.

If you got lost on any of the steps of this tutorial or you just want to have the whole finished example, you can grab it from my GitHub account.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ custom_padding=»20px|80px|0px|80px» custom_padding_tablet=»|0px||0px» custom_padding_phone=»|0px||0px» admin_label=»Section» custom_padding_last_edited=»on|desktop»][et_pb_row custom_padding=»0px|0px|0px|0px» admin_label=»row»][et_pb_column type=»4_4″ parallax=»off» parallax_method=»on»][et_pb_text admin_label=»Text»]

Notícias relacionadas

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row custom_padding=»20px||0px|» admin_label=»Row»][et_pb_column type=»4_4″ parallax=»off» parallax_method=»on»][et_pb_blog fullwidth=»off» posts_number=»3″ include_categories=»13,1,8″ show_author=»off» show_categories=»off» show_pagination=»off» offset_number=»0″ admin_label=»Blog»][/et_pb_blog][/et_pb_column][/et_pb_row][/et_pb_section]