Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable horizontal scroll in UIScrollView with autolayout

Tags:

I want to create view with only vertical scroll. As it turned out it is epic hard to do in iOs. I have done this steps:

1) Create UIViewController in storyboard;

2) Add ScrollView inside View in UIViewController and add 0 constrains to each side.

3) Add elements in scrollview, as result: enter image description here

After I launch my app all works, but:

1) How should I disable horizontal scroll? I add 0 constrain to the right to my scrollView + 0 constrain to the right to my uilabel (as u see on screen for some reasons it is not attached to the right, it has different constrain, but in property I set constrain = 0) and, as I thought, label text supposed to be in my screen bounds, but when I launch app I can scroll to right, i.e. uilable text didn't wrap, my scrollview just resize to fit the text.I tried to set my scrollView in code: scrollView.contentSize = CGSize(UIScreen.mainScreen().bounds.width, height: 800), but didn't help.

2) If I scroll to much, then blank space appears and this is not cool, how to fix it?

like image 458
Panich Maxim Avatar asked Sep 11 '15 10:09

Panich Maxim


People also ask

How do I stop horizontal scrolling in web design?

You can also set the overflow-x CSS property to hidden, which prevents child content from wrapping within its container but turns off sideways scrolling. Another solution is to set the width of child elements to 100%.

How do you stop cell scrolling horizontally in CSS?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.


1 Answers

1) Horizontal scroll enables automatically when the content width in scrollView more than width of scrollView. Therefore, in order to avoid horizontal scrolling is necessary to make width of the content inside scrollView less than or equal to scrollView width.

Leading space and trailing space can't set specific width to views, they just stretch them. In regular views, they no stretch for more than width of view, but scrollView is a special view, actually, with an infinite content width. Therefore, trailing space and leading space constraints in scrollView change the width of views to their maximum possible values (In case with UILabel you can see resize to fit the text).

To avoid horizontal scrolling, you need to set specific width of each view, less than or equal to scrollView width. Specific width of views may be set with width constraints.

Instead of setting each view width, much better to add a view–container and set width to it, and inside it place the views as needed.

Views hierarchy:

View     -> ScrollView         -> ContainerView             -> UILabel             -> UILabel             -> ... other views that you need 

Autolayout constraints:

ScrollView     -> leading space to View : 0     -> trailing space to View : 0     -> top space to View : 0     -> bottom space to View : 0  Container View     -> leading space to ScrollView : 0     -> trailing space to ScrollView : 0     -> top space to ScrollView : 0     -> bottom space to ScrollView : 0     -> width equal to ScrollView : 0 

To set width equal constraint ctrl+drag from containerView to scrollView.

width equal constraint

2) Vertical scroll is dependent on the total height of content. Blank space can be, if the last element inside containerView has a large value of the bottom space to superview.

Or do you mean bounce effect? You can disable vertical bounce of scrollView.

like image 129
ifau Avatar answered Sep 28 '22 23:09

ifau