Swift UIScrollView - Correct Implementation for Only Vertical Scrolling

Question

In advance, I apologize as I would say that I'm a beginner with iOS programming.

I want to use UIScrollView because the content to display exceed the height of the screen. Therefore, I would like only a vertical scroll and not a horizontal scrolling.

I'm using the Storyboard to draw the views with AutoLayout.

Here's are the screenshot of my UIViewController with the UIScrollView :

Then I change the Label to a big text like that

override func viewDidLoad() {
    super.viewDidLoad()

    self.label1Label.text = "Seize jours après la chute du président Blaise Compaoré, le Burkina Faso a un nouveau chef d'EtatA l'issue d'ultimes tractions, civils et militaires se sont accordés, lundi 17 novembre, sur le nom du diplomate Michel KafandoSeize jours après la chute du président Blaise Compaoré, le Burkina Faso a un nouveau chef d'EtatA l'issue d'ultimes tractions, civils et militaires se sont accordés, lundi 17 novembre, sur le nom du diplomate Michel Kafando"
    self.label1Label.numberOfLines = 0
    self.label1Label.sizeToFit()

My problem is that if I don't set manually a width for my contentView (inside the UIScrollView), the scrolling is horizontal, not vertical. (Look Screenshot below):

I've tried to set contentSize as I've seen in many google post but without success :

self.scrollView.contentSize = CGSizeMake(400.0, 600.0)

If I set a width manually for my contentview (i.e : 320pts), the scrolling will be vertical (GOOD) but then depending on the iphone size, it won't cover the whole width of the screen as shown in the following screenshot :

The question is : what is the correct implementation to use UIScrollView to have a contentView that respect the autolayout constraint (full screen : 0top - 0bottom - 0left - 0right) and the scrolling to be only vertical.

Thanks a lot for your help!

Answer 1

Mike Woelmer shows how to do this correctly with Interface Builder on the Atomic Object blog.

http://spin.atomicobject.com/2014/03/05/uiscrollview-autolayout-ios/

I also have my own code only (no storyboard implementation) on github.

https://github.com/nadthevlad/AutolayotScrollview

You don't want to set the height or width of your content or views. Instead you want to use Autolayouts pins and constraints to set how the scrollview behaves.

1. Create your UIScrollView *scrollView.

2. You want to create one UIView *contentView which you will put the rest of your view elements into.

   [self.view addSubview:scrollView];
   [scrollView addSubview:contentView];
   [contentView addSubview:_label1];
   [contentView addSubview:_label2];
   [contentView addSubview:_label3];
   [contentView addSubview:_label4];
   [contentView addSubview:_label5];
   [contentView addSubview:_label6];
   

3. Pin the 4 edges of scrollView to the 4 edges of self.view

4. Pin the top and bottom edges of contentView to the top and bottom of scrollView.

5. This is the tricky part. To set the horizontal sizing, you want the leading (right) and trailing(left) edges of the contentView to be pinned to the leading and trailing edges self.view instead of scrollView. Even though contenView is a sub view of scrollView its horizontal constraints are going to reach outside of the scrollView and connect to self.view.

6. Pin any other view elements to contentView as you normally would.