Chapter 18: UIStackView

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.


What you will learn

  • Use UIStackView to align your objects equally within the View Controller.

Key Terms

  • UIStackView (Stack View)
  • Content Mode
  • Aspect Fit
  • Distribution
  • Axis
  • Alignment

Resources

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.

Creating a New Project and set up User Interface

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.

Then, select Assets.xcassets and drag all of your images under the AppIcon section (Figure 2.2.1).

Figure 2.2.1 Screenshot 2016-10-13 14.01.51-1.png

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.

Figure 2.2.2 Screenshot 2016-10-12 15.50.49.png

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.3 Screenshot 2016-10-12 16.02.02.png

(Figure 2.2.4) Next type UIImageView in the search section of the inspector (bottom right).

Drag the 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 alarm_clock.

Then change the change the Content Mode from Scale to Fit to Aspect Fit.

Figure 2.2.4 Screenshot 2016-10-13 14.05.38.png

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".

Figure 2.2.5 Screenshot 2016-10-13 14.44.26.png

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.

Figure 2.2.6

Screenshot 2016-10-13 15.09.00.png

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).

Figure 2.2.7 figure-2.2.7-img.png

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.

Figure 2.2.8 Screenshot 2016-10-13 15.43.13.png

Change the Distribution of that Stack View to Fill Equally and the Alignment to 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 Fill Equally.

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).

Figure 2.2.9 Screenshot 2016-10-13 21.00.20.png

With the outermost Stack View still selected, click on the Size Inspector (size-inspector.png). 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

Figure 2.2.10 Screenshot 2016-10-13 21-1.16.39.png

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.

Figure 2.2.11 Screenshot 2016-10-13 21.53.33.png

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.

Figure 2.2.12

Screenshot 2016-10-14 10.37.25.png

Your View Controller should look like this once you add the image view:

Figure 2.2.12 Screenshot 2016-10-14 10.49.28.png

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).

Figure 2.2.13 Screenshot 2016-10-14 10.54.50.png

Click 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).

Select both Horizontally in Container and Vertically in Container and click Add 2 Constraints

Figure 2.2.14 Screenshot 2016-10-17 14.00.04.png

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 Pin menu.

Click 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.

Figure 2.2.15 Screenshot 2016-10-17 14.31.27.png

Make sure you never move the view with your mouse. Inadvertently you will move it inside another view.

Figure 2.2.16 Screenshot 2016-10-17 14.33.09.png

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.

Wrapping up

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.

Exercise

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.