2 Create Your First App

This chapter guides you through building your very first iOS app while introducing the big ideas you’ll use throughout the book. You set up Xcode, learn what a user interface is and why it matters, and see how to run and test apps on either a real device or the simulator. Along the way, you follow a milestone-focused journey that keeps things simple, hands-on, and encouraging for beginners.

You start by creating a new Single View project, filling in basic project details, and saving your work. Next, you get oriented to Xcode’s main areas—Navigator, Stage, Inspectors, Libraries, and the Toolbar—then open Main.storyboard to design the screen. You pick a preview device size, drag a Label onto the view, center it using alignment guides, and change its text to “Hello World!”. To test, you choose a simulated device and press Run; you also learn what the simulator can’t emulate (like camera, microphone, accelerometer, and gyroscope) and see the optional steps for running on a physical iPhone or iPad.

With the basics working, the chapter expands your UI skills. You explore common controls (labels, buttons, text fields, switches, and text views), and use the Attributes inspector to adjust text color, backgrounds, fonts, alignment, and more. You learn simple navigation with segues by presenting another screen modally, then practice by building small interfaces and a multi-screen quiz. The chapter wraps up with practical design guidelines: keep text legible, prefer system fonts, use color consistently, make good use of screen space, and focus on features most users will actually need.

Your first app will display the words “Hello World!” on a blank screen. You can test your app on a simulator if you don’t have an iDevice.

The General tab of your Xcode Project

The view controller in the main storyboard. The rectangle you see when you open the storyboard is called your ViewController. It allows you to control what you see on screen.

Click this to view different screen sizes

A selection of screen sizes

The iPhone X in the ViewController

The Libraries panel stores objects and controls for your app.

  Drag a label onto your screen.

Press this button to choose the device you want to simulate

Choose the device you want to simulate from the popup menu.

► “Clip this to run your app in the simulator.” Figure 2.11  Click the play button to run the app in the simulator.

Figure 2.11  Click the play button to run the app in the simulator.

  The simulator window opens with your app running in it.

A UI (user interface) is anything the user sees or that you can interact with. This is your app’s UI, but I added a bunch of controls to the UI to make it a silly app. These are just a few of the UI elements you could add.

Try to make this app, with a button, a label, and a text field on the screen.

   You’ll find many of the UI interface elements in the same place in Xcode. They’re in the Object library, on the bottom right of Xcode.

  The attributes inspector

Here are some things you can do with other controls in your app. Can you make these?

The UI with three screens for the Segues app.

Segues application in action

Try to create this app.

1. You create an app that uses the camera on an iPhone. Why can’t you test the camera function with the simulator?
2. What is the purpose of the iOS Human Interface Guidelines?
3. Download the “Bad App” example from our website and try your best to make it follow the rules of a good UI! [THIS EXAMPLE IS NOT AVAILABLE YET]
4. What is a UI and where is the Attributes Inspector?

FAQ