Up to this point, we haven't done anything that changes what our app will do when it's run. As we can see from running our app in the simulator, it's still just an empty, blank white screen.

In this section, we'll build the UI for our Magic 8-Ball.

What is UI?

User interface, commonly referred to as UI, are any elements that your app will display on screen to a user. This includes visual elements like text and images as well as interactive elements like buttons, sliders and tabs. In programming, it's also common to refer to UI as your views.

Introducing View Controllers

If you're planning to build iOS apps, you'll need to learn about the UIViewController. View controllers are one of the fundamental building blocks of iOS development.

The UIViewController is a class that is responsible for controlling it's set of views. Each view controller has a root view that acts as a canvas to place other subviews.

Root View Highlighted

As you can see above, both the text label and button are subviews placed on top of the view controller's root view.

As a beginner, you can think of each screen of your app as a view controller. All buttons, text, images are subviews that the corresponding view controller object controls. If the user taps a button, the view controller will be responsible for what happens.

Although we'll only use a single view controller in this tutorial, you can have any number of view controllers in your app.

Next, let's build our UI in the default view controller that comes with every Single View App Xcode template.

Adding UI in Storyboard

First we'll need to open our storyboard file.

In your Project navigator, select the Main.storyboard file. You'll see your editor area change to the following:

Main Storyboard Overview

Each of the highlighted areas is important to building your UI in your Main storyboard file:

  • Document Outline (Orange): displays a vertical view hierarchy of your storyboard file
  • Interface Builder (Blue): displays a visual representation of what your UI will look like
  • Utilities Area (Purple): configure properties, size, and other details of your storyboard elements
  • Object Library (Pink): displays a list of all Apple's pre-built UI components you can use in storyboard

Let's add our Magic 8-Ball Shake It! button to our view controller.

Find the Button object in the Object Library and drag and drop it onto the root view of your view controller.

Next, let's learn more about the Utilities area so we can configure our button to have the right title text.

Utilities Area

Just like the Navigator, the Utilities pane has multiple different tabs at the top called inspectors.

Utilities Inspector Tabs

The tabs are contextual based on what is actively selected. That means that the tabs in the Utilities area will change based on whatever you last clicked in Xcode.

Each inspectors allows you to configure different details and attributes about the selected item.

Attributes Inspector

First we'll look at the Attributes Inspector which changes the attributes of a selected storyboard object. We can use this to change the title of our button.

  1. Make sure you click on the button and that it's actively selected. Remember the Utilities pane is contextual so it will change based on what is selected. Select Button
  2. Next, navigate to the Attributes Inspector tab in the Utilities area. It is the 4th icon from the left. Open Attributes Inspector
  3. Last, find the title field and change it from the default text Button to Shake It!. Set Button Title

You should now see a squished button with the Shake It! title.

Squished Button

We'll fix this next using the Size Inspector.

Size Inspector

Right now our shake button is squished because the new title text is longer than the width of the button. To fix that we'll change the frame of the button.

The frame of an object refers to a object's X and Y position and it's size (height and width.)

We can view our current skip button's frame in the Size Inspector.

First, navigate to the Size Inspector in the utilities area. Size Inspector Active

You can view and edit the current frame of the selected storyboard object under it's View section. Size Inspector View Section

A simpler, but less precise way of changing our button's frame is by selecting it your cursor and dragging. You can drag the center of the object to move as well as the corners of it's bounds to resize it.

Change your skip button's frame to be centered and positioned along the bottom of the Interface Builder view controller.

The positioning doesn't have to be perfect, but if you want to be more precise you can use the Size Inspector.

In this tutorial, we'll be setting a pre-defined frame for each of our subviews. That means that if the user is using a simulator or iPhone with a different screen size, our UI will be incorrectly sized.

This is ok for now. This tutorial is more focused on making sure you get a lay of the land with Xcode and iOS development. In the next Tip Calculator tutorial, you'll learn about using tools like auto-layout and stack views to create dynamically re-sizable views.

Adding a Label

To complete our UI, we'll also need to add a label to display the Magic 8-Ball's answers.

From the Object Library find the label and drag it onto center of the view controller's root view.

Next, we'll change the size and attributes of our label.

  1. Select the label and open the Attributes Inspector in the Utilities area. Label Attributes
  2. Change the Text attribute from the default Label placeholder to Have a question?. This will be the new default text that the app starts with every time the app is opened. Change Label Text
  3. Resize the label so that it fits the new text. Resize Label
  4. In the Attributes Inspector change the text alignment to Center. Change Text Alignment
  5. Last, change the Font attribute from System 17.0 to System Bold 28.0. Change Font

We've just finished setting up the UI for our app. Let's take a second to build and run to see our progress.

Build and run your app on the iPhone 7 simulator. You'll see the following:

Storyboard UI Finished

We've laid out our UI using Interface Builder. Next, we'll look at connecting our views to our Swift source files. As you might imagine, without connecting our storyboard objects to code, our app won't be able do much.

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 in San Francisco and Asia

Find your location

Product College

A computer science college

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

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more