Stack Views to the Rescue!

Stack Views to the Rescue!

April 16, 2017
Expand

Project: Tip Calculator in Swift 3

We are going to be using Stack views to make our layout easier. Stack views are used to align elements vertically or horizontally. Each pair of label and text field / segmented control will be added to a horizontal stack view. All these "rows" and the button will then be added to a single vertical stack view.

By the end of this page, we'll have our full interface finished and it will work on all screen sizes!

Preliminary layout

Creating stack view rows

Let's go ahead and get each pair of elements combined into horizontal stack views. These will become the rows of our vertical stack view.

Watch the video and follow the steps below:

  1. Click on the first label to select it. Hold shift and click on the text field to its right.
  2. Click the stack button (rectangles with down arrow, near pin button) to combine them in a horizontal stack view. You should see them squish together and form one unit.
  3. Repeat for the other three label and text field/segmented control pairs.

Creating the super stack view

Now that we have rows, let's combine them into a single, vertical stack view. This will be easier to do from the left side, layout tree navigator on the left. Watch the video first!

Watch the video and follow the steps below:

  1. Notice how it is hard to click and select the stack view itself.
  2. Click the first stack view from the left side layout tree navigator panel.
  3. Hold command while clicking each other stack view and the button so they are all selected.
  4. Press the stack button to combine them all into a single, vertical stack view.

Organizing our layout tree

Before we move any further, let's organize our layout tree and update our labels to display the correct information!

Watch the video and follow the steps below:

  1. Expand the tree in the left side layout tree navigator (as seen in the video).
  2. Click once to select the root stack view, pause, click again to edit its name. Enter Super Stack View. From now on, we'll refer to this process as "rename the element".
  3. Rename the first horizontal stack view to Bill Amount Stack View.
  4. Select the first label and change its text to Bill Amount: from the attribute inspector.
  5. Rename the first text field to Bill Amount Text Field
  6. Rename the second horizontal stack view to Tip % Stack View, change its label's text to Tip %:, and rename its segmented controller to Tip % Segmented Controller.
  7. Rename the third horizontal stack view to Tip Amount Stack View, change its label's text to Tip Amount:, and rename its text field to Tip Amount Text Field.
  8. Rename the fourth horizontal stack view to Total Stack View, change its label's text to Total:, and rename its text field to Total Text Field.
  9. Select the button and change its title to Calculate from the attribute inspector.

There we go! Isn't that much cleaner?

Add spacing to super stack view

Things are a bit crammed together. Let's add some spacing!

Watch the video and follow the steps below:

  1. Select super stack view from the layout tree.
  2. Change spacing to 15 in the Attributes Inspector.

Constraining super stack view

It's finally time to make this stack view full-screen! We'll be adding constraints to it similar to what we did with the Tip Calculator label that became our title bar.

Watch the video and follow the steps below:

  1. Select super stack view from the layout tree and open the pin menu.
  2. Activate the left, top, and right constraints. Set the left and right to 50. Set the top to 20.
  3. Click the Update frames button (looks like a refresh button).
  4. Run the simulator and see how nice it looks!

Looking good!

Constraining the "rows"

Do you see how the label and element pairs are still squished together? Let's add a few more constraints to make them take up the full size of the super stack view!

Watch the video and follow the steps below:

  1. Close the stack view rows in the layout tree to make this a bit easier.
  2. Select Bill Amount Stack View, control-click (or right-click) drag from the Bill Amount Stack View to the Super Stack View and, in the menu that appears, select Equal Widths. This will ensure that the row is always the same width as the Super Stack View.
  3. Repeat this process for each other stack view row and the Calculate button.

Setting the segment values

The last piece of the puzzle is setting the values for each segment in the segmented control!

Watch the video and follow the steps below:

  1. Select the segmented controller (Tip Selector) from the layout tree.
  2. Modify the values of each segment to 15%, 18% and 20% respectively.

Quick Review

So far, you should have:

  1. Learned the basics of Stack Views
  2. Added all of the interface components into stack views for each row
  3. Added all of those row stack views into one larger stack view
  4. Organized and renamed all of the labels, text fields, segmented control, and stack views
  5. Added spacing to the super stack view to make things look much better
  6. Added constraints to the super stack view and row stack views
  7. Learned how to change the labels of a segmented control

Alright! We have a basic interface and it looks correct on all devices! Ready to get it running on your iPhone?

Feedback

If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations across the USA and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more