UISlider causing horizontal scrolling

Question

I have a simple screen, with a slider and a label positioned next to each other horizontally. I have embedded these inside a UIScrollView (I set this to fill the screen and used 'Add missing constraints'), because I will need vertical scrolling later down the line. I don't however, want horizontal scrolling. I have seen numerous posts on here and other sources about people wanting to disable horizontal scrolling, however I'm not sure that's what I want to do, I think I need to restrict the UISlider from causing the horizontal scrolling; I think it is trying to take up more width than the screen. I have added what I think are the necessary horizontal constraints:

• Leading space to container for the UISlider
• Horizontal spacing to the UILabel, and
• Trailing space to container for the UILabel

But this still causes horizontal scrolling, and the UISlider's are the cause, they are taking up more room than I want, as seen below:

I have tried disabling horizontal scrolling in the code using a few techniques, one being:

func scrollViewDidScroll(scrollView: UIScrollView) {
    if scrollView.contentOffset.x>0 {
        scrollView.contentOffset.x = 0
    }
}

but this does not seem to stop the horizontal scrolling.

Can anyone offer any suggestions?

Thanks in advance.

Answer 1

My suggestion is to never use Add missing constraints. It never does what you really want.

Here's the problem. You are laying out your UI on a ViewController in the Storyboard that is square. Apple did this to remind you that you need to be flexible in your design, but it doesn't match the size of any device. When you Add missing constraints, it uses the absolute dimensions of that square to create the constraints which are certainly wrong.

In your specific case, it is giving the slider a width that is too wide, which is why the slider goes off the right side of your screen.

Here's the trick about scroll views. If the contents inside of a scroll view are wider than the scroll view itself, then that content will scroll. The same applies vertically: if the contents inside of a scroll view are taller than the scroll view, then the contents will scroll.

In order to design this to work on all phones, you need to make sure that the contents of the scroll view are laid out correctly for each phone size. Which certainly means you don't want to use specific widths for both the label and the slider because you'll end up with the wrong width for some device, if not all of them.

The best way to do this is to:

1. Drag out the scroll view and add it to your ViewController. Add constraints to make sure it is properly sized on all phones, such as attaching it on all sides to its superview with a fixed distance.
2. Drag out a new UIView and drop it on the scroll view. Drag its edges until it exactly matches the size of the scroll view. This will be your content view. Pin all four edges of this content view to the scroll view with offsets of 0.

3. Here's a tricky bit. Even though you've pinned the content view to the scroll view, its size of free to grow because that is what allows it to be bigger than the scroll view itself and allow there to be content to scroll over. To keep your scroll view from scrolling horizontally, you need to make sure the content view has the same width as the scroll view on all devices. To do that, find the scroll view and the content view in the Document Outline to the left of the Storyboard. Control-drag from the content view to the scroll view and select Equal Widths from the pop-up.

   

4. You still haven't told your content view how tall it should be. For now, give it an explicit height constraint of 1000. That will be enough to scroll.

5. Now, add your label and slider to the content view. In addition to constraining them to each other and to the edges of the content view, you will need to give your label a width constraint. Then Auto Layout will have all of the information it needs to compute the width of your slider. Auto Layout knows how wide the content view is (which will be different on different devices), it knows how wide your label is, and how far everything is from everything else, so it will just stretch the slider to fill in the rest.

If you do all of this, you will have a UI that is properly sized for all devices in all orientations that scrolls vertically.