Storyboard: A feature of Xcode that allows you to visually see the layout and relationship between elements of your App within the Xcode IDE
UIViewController: A view controller is an intermediary between the views it manages and the data of your app
UIScrollview: A view that allows the scrolling and zooming of the views contained within it
UIStackView: An interface for laying out a collection of views in either a column or a row
UIView: An object that manages the content for a rectangular area on the screen
Views: Presents information to the user. Views are, well, UIViews and their subclasses. Think of it as the UI components that have to be controlled by the controller
This is a step-by-step tutorial for creating a stackview that can be scrollable, using Swift and Xcode.
This tutorial is going to use the storyboard which
Create a new Single View App, by selecting File>New Project in Xcode (full guide)
Give the App A name. I wouldn’t recommend that you use “Steven Curtis” as your organisation unless your name is Steven Curtis. If it is, hello Steven. This is quite a coincidence.
You will be asked to select a location for your new project. Pick somewhere sensible (please).
You’ll then be put into a sensible place to start working!
on the left-hand side of the project navigator you can then select the storyboard. This is where most of today’s work will take place. Here we click “Main.storyboard”
You can now see the main view controller
At the top-right hand corner of the screen
Now the first thing that we are going to add into the view controller is a scrollview instance
I selected that from the objects, searching rather swiftly (that’s a joke, by the way) by searching for scroll. The first element can then be dragged into the view
It is best to drag the scrollview to the top-left hand corner. This allows us to see the blue layout guides to help it “clip in”
We then make the scrollview larger, again making it fit the layoutguides
Now we are going to pin the scrollview to the top, bottom, left and right of the superview
This is selected from the bottom-right hand corner
You have to make sure that the Scrollview is still selected, and then you have the following fantastic options:
You then click on each of the top, bottom, left and right to set each one to zero — this means it will be pinned to each side of the superview
We then add a stackview as a descendent of the scrollview. This is done in pretty much the same way as before, that is choose the object (I have searched for stackview)
Now you can choose either horizontal or vertical for your stackview (they are described with the diagram beside them).
Once again we can drag the object to the top-left hand corner of the superview, and then enlarge it.
we must make sure that the stackview is a descendent of the superview. This can be confirmed with (something like) the following setup
So we have errors!
as indicated by the rather upsetting red circle with a white arrow contained within it.
By clicking on the arrow we see two errors:
As you can see the scrollview claims that it does not know either the x position or the width. You might claim that it should be derived from the fact that it is pinned to the beginning and the end of the superview, but still :)
In fact, what we need to do is pin the stack view to the container scroll view. This is done much like as described in the procedure above for pinning the scroll view to the superview, it can be selected and the constraints added:
With 0 set for each constraint
But wait, there is a further complaint!
Upon investigation, the request is for the width and height
The width is no problem — the width of the stackview should be equal to the width of the scrollview.
To do this select the stackview
Then Control-drag to the scrollview and select Equal Widths
Now just the height to fix.
This is the easiest solution, but one that can involve a degree of head scratching if you are not aware of the way to solve it before hand.
The StackView does not have intrinsic height until something is placed inside it. Therefore the solution to this is to place something into the stackview. My choice? I’ve placed a
Job done! There are no errors and if you place something that is too large for the view (or rotate) there is no problem, the scrollview will simply scroll.
This is one of those step-by-step tutorials that can take a while to go through, but once you realise that a stackview does not have an intrinsic height before things are placed within it everything becomes clearer.
I hope that helps!
I’d love to hear from you if you have questions, tips, errors in the code or anything else!