StoryBoard

Back to all Lessons

🎯 Learning Goals

  • Add UI elements to the StoryBoard using the Object Library
  • Make UI look clean on all device sizes using constraints
  • Add a home screen icon into the project

📗 Technical Vocabulary

  • StoryBoard
  • UI
  • Constraints
  • Object Library

🌎 StoryBoard & Object Library

Before we write all the Swift code we’ve been learning to make our app DO something, we want to completely set up the UI (user interface). We will drag and drop components of the UI from the Object Library onto the StoryBoard.

Either watch the video below, or watch you instructor walk through how to add objects from the Object Library to the StoryBoard.

Try It: StoryBoard & Object Library

Open a new Xcode, iOS, Single View App, StoryBoard project.

In your new project, drag and drop at least 3 UI Objects (View, Image View, Label) in from the Object Library. Run your project in the simulator.

Add a button. Change the text on the button, the size of the text, the color and background color. Try to use at least one other option in the Attributes Inspector to learn something new!

Now, look at your project on a different device. Does it look right? In the next section, we will learn how to lay out our objects so they look great on all devices.

Constraints

Everything looks great on my iPhone 8 screen, but in the simulator… not so much. Also, on the iPad Pro, everything is on the far left. Constraints are settings on UI Objects that make them appear the way we expect on every device. The video below walks you through a couple of the ways that constraints can be used.

Because there are many ways to apply constraints and combinations of them for working solutions, there are links to several other resources you may find helpful. Watch them, try to implement on your own, and you’ll begin to develop your preferred approach!

  • This video from CodeWithChris goes into a lot of detail and walks you through how to build a professional looking UI.
  • This video walks through using constraints to set a background color and launch screen.
  • If you prefer to read documentations, the official Apple documentation provides an in-depth explanation of how constraints work, and cookbook, and tips on debugging layout!

Try It: Constraints

Building on your project, add constraints to each UI Object. Make sure to get one object looking as expected before moving on to the next.

Nice-To-Know: Nav Bar and Tool Bar

The Nav Bar and Tool Bar are components of most apps we use on our phones. Follow the directions below to add them to your app!

  • Drag and drop a Navigation Bar onto the StoryBoard
  • Drag and drop a Bar Button Item - notice where you can place them
  • Drag and drop a ToolBar onto the StoryBoard
  • Drag and drop a Bar Button Item - notice where you can place them, you can also use Flexible Space Bar Button Item to control spacing.

Nice-To-Know: Home Screen Icon

On the simulator, click the ‘Home’ button, and notice our app icon is pretty boring. Follow the directions below to add one to your app:

  • To add an icon for iPad, it must be exactly 76x76 OR 152x152. In Google Images search, you can select the ‘Tools’ button, then ‘Size’ dropdown, then ‘Exactly’ option.
  • Drag and drop the image from your finder, into the ‘2x’ box right above ‘iPad App, iOS 7 - 12 76pt’ for a 152x152 image, and into the ‘1x’box if the image is 76x76.
  • To see it appear, make sure you are running your simulator with an iPad.

iOS: StoryBoard

You are now building real iOS applications! To get some more practice, complete the exercise below. Feel free to reference any of the videos or your Try It project if you need help.

Practice: StoryBoard

Plan out an app (it could be one screen on your favorite app, the app you're dreaming about making, or just a few simple elements!) by drawing it out on a sketch paper. Label the different parts of your app with the names of the Objects from Object Library you will need to use.

In your new project, drag and drop at least 3 UI Objects (View, Image, Label) in from the Object Library. Each time you add one, do the following:

  • Check the appearance on the simulator
  • Set constraints on each UI Object
  • Check the simulator again

Now, add an icon image. Run the project in simulator to make sure it was loaded in correctly!

Extension 🕵🏾‍♀️

Start over! Drag a Navigation Bar onto the View Controller. Edit the title. Drag 1 or more Navigation Item onto the Navigation Bar - play around with the different icons that are built in that you can use! Finish the UI for the rest of your app now that you have a Navigation Bar! Add an icon image - this time, make sure this will appear on any iPad by also including a 76x76 image in the 1x box.


Back to all Lessons