UIScrollView with Auto-Layout and Size Classes
A simple tutorial on making scrollable view that can accommodate any screen sizes. Download Link.
1.) First, of course we need a scrollview. So, drag a scrollview inside the storyboard and make sure that its distance from every side is zero.
2.) To make sure that it will accommodate any screen sizes; we have to pin all of its side to its superview. Click the newly added scrollview (just in case you click somewhere) and go to "Editor" -> "Pin" -> "Leading Space to SuperView". Repeat the same process for trailing, top and bottom.
3.) Now we need a container to display our UI's. So, drag a simple view and make sure that all of its distance to every side it zero, similar to scrollview.
4.) To make sure that it will accommodate any screen sizes the same process (2) must be done.
5.) Since we just need to be able to scroll up and down, we need to fix its width. Select the newly added view and and "control-drag" it to scroll view, and then select "Equal Widths".
6.) For the height, select the view and "control-drag" it to itself, then select "Height". You will be given a height of 580. You can change its value by clicking the height constraint then going to attribute inspector and then changing the "constant" to any value you want.
And that is it. You can now build and run the project to see how it works.
Post a Comment