How to create a scroll View in iOS using UIkit and interface builder.
Scroll Views are important for dynamic text and should probably be the container for every view controller in your app because of it. This tutorial teaches you how to create a scroll view in interface builder so you can get visual feedback while you design your constraints.
- Create a new project. Open Xcode and click Command-Shift-N and follow the prompts for creating a project.
2. Open Storyboard.
3. Drag in a scroll View: Command-Shift-L, then search for a scroll view.
4. Drag it on to the view controller’s view and constrain it to the edges.
You’ll see this:
5. Resolve the constraints by going to the size inspector, then unchecking “Content Layout Guides”.
6. Drag in a UIView. Command-Shift-L.
Make sure it is a subview to the scroll view.
You can label the view “ContentView”
Click enter.
7 add the following constraints. When we have the content laid out, we can let the height of the content be determined by the contents. Until then, we can set the height manually. When we want dynamic height set by the contents, you can delete the height constraint and set the bottom constraint equal to the bottom of the content.
8. Control drag from the content view to the scroll view
Set equal widths.
We basically finished a Scroll View! Its hard to tell until you hover your mouse over the view and then start scrolling. You should see it moving up and down. I changed the color of my view to be a light blue, so its differentiated from the white of the Viewcontroller’s view.
9. It isn’t the easiest way to work on a Scroll view however… Having to keep scrolling as you work. Lets expand the View Controller so we won’t have to keep scrolling.
Click the yellow circle white square above the ViewController.
Set the height equal to the height we set the contentView, in our case it was 1200.
Now this is a canvas! 🎊
When you want to check out the View Controller in LandScape orientation in interface builder. Freeform does’nt work in landscape oritientation in interface builder you will have to change it back to Fixed.
Embedding in an already existing View
If the view you are looking at has its height set by the contents, then you only need to select your stack View, then click editor, then embed in, then Scroll View.
Then do steps 4 -8, skip 6, and for 7 skip the height constraint because it is set by the contents.
