Interface Builder and Storyboards make creating app interfaces super easy and straight-forward. UIStackView is a way we can optimize and organize views in our interface in amazing, scalable ways.
Download here: https://github.com/devslopes/book-assets/wiki
Imagine you have added a bunch of objects into a View Controller and given them all individual constraints. Now, imagine there is a design change and you have to rip out a couple of labels and replace them with text fields. There goes all of your hard work because now you have to rip it all apart and put it all together again. Wouldn't it be cool if there was a way to be able to aggregate and remove objects and they all just automatically adjust? Well, you guessed it, UIStackView is to the rescue.
To begin, open up Xcode and double-click
Single View Application to create a new project. Name it whatever you'd like and save it anywhere.
Assets.xcassets and drag all of your images under the
AppIcon section (Figure 2.2.1).
Next, open up
Main.storyboard and click on the
UIViewController in Interface Builder.
To start building our UI, drag a UIView to the top of the UIViewController, and make it the width of the UIViewController and shrink it to a height of 60 (Figure 2.2.2).
Then pick any shade of red you like, I chose F26A47.
We then need to pin this simulated nav-bar the to UIViewController (Figure 2.2.3).
Pin it 0 from the left, 0 from the top and 0 from the right.
Then give a fixed height of 60.
(Figure 2.2.4) Next type
UIImageView in the search section of the inspector (bottom right).
Image View onto the View Controller.
Adjust the size to have a height of 130 and width of 130 but do not give the
Image View any constraints yet.
Place the image in the center of the View Controller and below the navbar with some space between the two.
Make sure the
Attribute Inspector (downward triangle) is selected and choose the image from the drop-down menu next to the Image property. In this case the image's name is
Then change the change the
Content Mode from
Scale to Fit to
Next, drag a label under the
alarm_clock image view and change the text to Your New Alarm (Figure 2.2.5).
You can then change the color and size of the text to whatever you desire. The color throughout this example is FF5A73.
Then drag a
UIView under the label you just made and make it a line by reducing the height to 1 and extending the width.
After adding the line drag an image view onto the View Controller and resize it to a height of 50 and a width of 50 (do not add any constraints yet).
Copy and paste that image view 4 times then place them side by side as seen in Figure 2.2.5. Then select an image for each image view and change to
Aspect Fit just as you did with the large image.
Remember, the way to change an attribute of an object is to select that object (such as the image) and refer to the Inspector section on the right hand side of Xcode.
Next add one more label below the images and change the text to say "People Also Enjoyed".
The moment you have been waiting for. Now that we have each object we want in this View Controller we are going them in Stack Views.
Below the View Controller there is a light gray bar. On the right side of that bar there are four symbols. The very first one the is what you press to put objects into a Stack View. Hover the mouse cursor over the button and wait until you see the word
Stack appear. That is how you know you are pressing the correct button.
First select the
alarm_clock image view and click the Stack button (Figure 2.2.6).
Do not be alarmed by the fact that your image will change in size. It is normal for this to happen.
In the attribute inspector change the
Axis to Horizontal.
Now do the same for the label that says Your New Alarm and the divider line (remember to select them individually then click the Stack button).
Next select all the small clock images by holding shift then clicking on each one (make sure the big clock image is not selected).
Once you have selected the appropriate images click the
Stack button (figure 2.2.7).
Then select the last label and put it in its own Stack View.
Now select all the Stack Views you just created by holding down
Shift and clicking on each Stack View on the left as seen in the following figure (Figure 2.2.8).
After all have been selected, click the
Stack button and make sure the
Axis is set to vertical.
Distribution of that Stack View to
Fill Equally and the
Center (look at the
Inspector column to the right).
Select the Stack View that houses the 5 clock images. Make sure the
Axis is set to
Horizontal and the
Distribution is set to
Now select the outermost Stack View that contains all the other Stack Views we've created and pin it 0 from the top, 0 from the bottom, 0 from the left and 0 from the right. Click
Add 4 Constraints (Figure 2.2.9).
With the outermost Stack View still selected, click on the
Size Inspector (). Edit the constraints you set earlier by clicking the
Edit button to the right of each one within the Size inspector and modify their
Constant property to the following values (Figure 2.2.10):
Trailing Space: 20
Leading Space: 20
Bottom Space: 40
Top Space: 40
Great, we're making good progress, but as you can tell in the figure above, the dividing red line we created by setting a UIView to only be one pixel tall is more of a rectangle and is not playing nice so lets go about adding it a different way.
To delete it select the Stack View with the line image and hit the delete key.
Poof! It is gone. Now see the magic of Stack Views. All the other Stack Views adjusted to fill the space equally.
Go ahead and run the project to see the following outcome.
Now lets add the line back in. Go ahead and type in
UIView in the search at the bottom of the inspector section. Now drag that view over to the
View Controller Scene(Figure2.2.12). Make sure to drag it under the main Stack View not in the Stack View.
Your View Controller should look like this once you add the image view:
Next change the color of the view to the color you have been using.
Now then give it some constraints. This part might be a little tricky so pay close attention.
Give it a height of 1, leading edge of 20 and trailing edge of 20 (Figure 2.2.13).
Add 3 Constraints
Make sure the view is selected and click on the
Align menu located immediately to the left of the
Pin menu (Figure 2.2.14).
Horizontally in Container and
Vertically in Container and click
Add 2 Constraints
You will notice a bunch of yellow lines on your view and you will notice it isn't a thin line. What the heck? Well it is because you have to update the frames.
Make sure your view is selected and click the
Resolve Auto Layout Issues menu found immediately to the right of the
Update Frames (2.2.15). If it is grayed out it means it is no detecting a selected view. Click somewhere outside the View Controller in the open white space and select the view again.
Make sure you never move the view with your mouse. Inadvertently you will move it inside another view.
Keep in mind it does not look exactly how we laid it out originally above, but that is ok because we are using Stack Views and sometimes we have to sacrifice perfect design for flexibility within the app.
Now you know how to use UIStackView! Way to stick with it. Remember, you can't use a stackview in every circumstance. However, if you want to add and remove objects without having to go through the hassle of resetting every constraint it is a great functionality for you to take advantage of. Next you will use your new found knowledge to build a really cool app in the next chapter that has functionality behind the User Interface.
For this exercise remake the app we just built together but try to do it from memory. Stackviews take practice just like anything else in coding.