What you'll build
- An app that displays a photo.
What you'll learn
- How to use Xcode to build and run an app.
Key vocabulary
Introduction
Now that you’re getting more comfortable with playgrounds, you might be wondering how to build an app you can use on your iOS device, or even your Apple Watch. A lot of moving parts need to work together to make an app run, and Xcode is the best tool for putting them all together.
In this four-part lesson, you’ll build PhotoFrame—a simple iOS app that displays a single photo. In the first part, you’ll create an app project from scratch. Then you’ll use Xcode to explore your project and learn to navigate your coding environment.
In part three, you’ll add an image to your project. Finally, you'll create the user interface using Interface Builder—a powerful component of Xcode that has a storyboard to lay out your app screens, a library of user interface objects, and many controls and settings for customizing them.
At the end of this lesson, your app will look like this, but it will display a photo of your own choosing.
Part 1 - New Project
Going Further with Xcode
So far you’ve been working in playgrounds, which allow you to focus on code. Apps aren’t built just from code, though. There are designs for the look of the screens. There are images, sounds, and fonts. And there are instructions for putting all these parts together. Xcode manages it all in a workspace.
In this part, you’ll create an app project and look at it in the Xcode workspace view. If it’s a bit overwhelming at first, don’t worry. You don’t need to know everything about Xcode before you can use it to make apps. You’ll be guided through the process step by step, learning as you go along.
Create a New Project
Xcode includes several built-in app templates for developing common types of iOS apps, such as games, apps with tab-based navigation, and table view–based apps. Most of these templates have a preconfigured interface and source code files. For this lesson, you’ll start with the most basic template, simply called App.
To create a new project
-
Open Xcode from the /Applications directory. The “Welcome to Xcode” window appears.
-
If a project window appears instead, it’s OK—you probably created or opened a project in Xcode previously. Just use the menu item in the next step to create the project.
-
In the welcome window, click “Create a new Xcode project” (or choose File > New > Project). Xcode opens a new window where you can choose a template.
-
Make sure the iOS section is selected at the top of the dialog and that you can see the Application heading.
-
In the main area of the dialog, click App 1 and then click Next 2.
- In the dialog that appears, use the following values to the left to name your app and choose additional options for your project. 1
Product Name: PhotoFrame. Xcode uses the product name you entered to name your project and the app.
Team: If you have an Apple developer account, logging in here will allow you to build your app on a device. If you don't have one yet, you can skip this part and test your app in the simulator on your Mac.
Organization Identifier: Your organization identifier, if you have one. If you don’t, use com.example.
Bundle Identifier: This value is automatically generated based on your product name and organization identifier.
Interface: Storyboard
Language: Swift
Host in CloudKit: Unselected
Include Tests: Unselected
-
Click Next.
-
In the dialog that appears, select a location to save your project and click Create. (If you’re not familiar with source control yet, you can uncheck the box that asks if you’d like to create a git repository.) Xcode opens a workspace window showing your new project. You’ll see a lot of information on the screen, which you can ignore for now. You’ll learn more about these details later.
Build and Run Your App
Because you based your project on an Xcode template, the basic app environment is automatically set up for you. So even though you haven’t written any code, you can actually build and run the App template without any additional configuration.
To build and run your app, use the simulator app that’s included in Xcode. Simulator gives you an idea of how your app would look and behave if it were running on a device. Simulator can model a number of different types of hardware with different screen sizes—including iPhone and iPad—so you can simulate your app on every device you’re developing for.
These buttons 1 appear in the toolbar at the top of the Xcode window:
Clicking the Run button ▶ will tell Xcode to build and run PhotoFrame on the iPhone 14 Pro simulator.
Build means “Assemble all the parts into an app.” Run means “Start the app,” as if you’d tapped its icon on the Home screen. Click the Run button ▶ to build and run your app.
You’ll see the simulator start up, then show the Home screen, then start your app. Congratulations—you made an app!
The iPhone 14 Pro simulator may appear large on your screen. You can make it smaller by choosing Window > Physical Size or by dragging the corner of the window with your mouse (as you would with any other window). You can also drag it around the screen. You may find it easier to drag and resize the window if you uncheck the Window > Show Device Bezels menu item. Otherwise, dragging from the top or bottom of the screen may be interpreted as swipe gestures, such as for invoking Notification Center.
To quit Simulator, you can choose Simulator > Quit Simulator press Command-Q on your keyboard. But you should keep Simulator running while you work on your project, as long as your Mac doesn't slow down too much—you'll save time not having to boot the simulated iPhone each time you build and run your project.
You’ll use “Build and Run” a lot while developing your app, not just when you’re done. You’ll add the image later, but first take a tour of Xcode.
Part 2 - Explore Your Project
The first time you open a project in Xcode, you’ll see dozens of buttons, panels, and tabs. It can be hard to know which buttons will show you different parts of your app and which will actually change the way your app works.
Take it slow. You’ll become familiar with many of the controls in Xcode over time. You don’t have to understand exactly what all the buttons and menus do right away. And keep in mind that even the most experienced developers are always learning new tricks and techniques.
To get started building apps in Xcode, it’s enough to:
- Find your code and interface files
- Edit them
- Add more files
- Build and run
You just built and ran in Part 1 and you’ll add files in Part 3. But for right now, you’ll be exploring the Xcode project you just created. You’ll also get a feel for navigating around an Xcode workspace and then learn tips for finding your way back to your code.
Finding Your Way Around Xcode
The Xcode workspace is divided into a few main areas, each with different information about your app and its files.
Toolbar: You’ll use this to check the project’s status, to hide and show the other window areas and, most importantly, build and run your app from the big “Play” button! If you don’t see the toolbar, you can bring it back by selecting “Show Toolbar” from the View menu at the very top of the screen.
Editor: This is where you’ll edit your project files, whether source code, user interface items, or app configuration. Most developers always keep the editor area visible while they’re working.
Navigator: You’ll use this to move around your project; this is where you select which file to open in the editor by clicking it.
Inspector: You’ll use this to find out more details about the item currently selected or displayed in the editor; you’ll use this area especially when you’re editing user interface files in Interface Builder.
Now follow along by opening your PhotoFrame project in Xcode. Does your Xcode screen show the same panels as the image above?
Just like app developers can configure editor colors just the way they like, they can also change Xcode’s layout to display varied facets of their project. Here are some ways you can change Xcode to see different information:
Show and Hide Navigator and Inspector Areas
You may hide both the navigator area (on the left of the window) and inspector area (on the right of the window) if you’d like more space to edit your code or interface files. You can either do this from the menu options View > Navigators > Hide Navigator, and View > Inspectors > Hide Inspectors, or from the buttons in the top left1 and top right2 corners of the screen.
Exercise
Practice opening and closing the panels from both the buttons and the View menu.
Show different information in the navigator and inspector areas
Both the navigator and inspector areas have a row of buttons at the top.
Each icon in the navigator panel 3 represents one of the eight different ways you can explore your project. The highlighted icon tells you which navigator you’re currently looking at. You’ll usually use the project navigator that shows all your files.
The buttons at the top of the inspector area change depending on what kind of file is being shown in the Editor area. Sometimes they include these three icons. 4
There can be up to seven different inspector icons.
Just like with the navigator area, clicking these different icons changes the display inside the inspector area.
This video shows how to hide and show the navigator area and the inspector area.
Checking Out Your Files
Xcode is a powerful tool not just because it shows so much information about your app, but because it lets you change and update your interface and your code.
The names of your project’s files carefully describe what each file is for. The name of each file has two parts, but Xcode will only show the the first part of the file’s name—like “LaunchScreen,” “Main,” or “ViewController”—which describes the particular file’s identity. The second, hidden, part of the file’s name consists of a period and a file type like “.swift” or “.storyboard.” This is called a file extension and describes the type of content in the file—such as Swift code, in .swift files, or user interfaces, in .storyboard files. Each file in the project navigator has an icon next to its name that indicates its type.
The main files you'll edit in Xcode are Swift code files and storyboard interface files.
Swift files These tell your app what to do, and when and how to do it. You edit these files by typing Swift code (which should feel familiar after all your practice in Swift playgrounds).
Storyboard files Storyboard files tell your app where to display information on the screen. Xcode opens them in a special environment called Interface Builder. You edit these by clicking, dragging, and choosing options in the inspector area. In this course, you'll always use the Main storyboard that comes with an Xcode project by default, but developers sometimes use multiple storyboards in their apps.
You'll see other file types in the list, too, but you won't interact with these nearly as much:
Assets This item, also called the Assets Catalog, holds all the images for your app, including the app icon.
Info This file manages your app’s setup information. You can open Info to take a look around, but you may find it tough to decipher.
Project file There's a secret other kind of file in your project navigator. At the top of the list of files, the item with your project name has an icon that's different from the other files in your app. It's called the project file 1, and you open it by clicking once, just like any other file in your app.
This project file manages information like the display name under your app icon on the Home screen, or whether your app can handle portrait or landscape orientations. During this course, you can safely ignore the project file and the Info file.
Getting Back to a Familiar Home
There are lots of ways to configure the Xcode window and navigate. If you ever feel lost or are unsure about how to find your code again, use these tips to get yourself back to familiar ground.
- Make sure the toolbar is visible by choosing View > Show Toolbar from the menu options.
- Use the buttons in the top right to make sure the navigator area, inspector area, and console aren’t covering the editor area.
- Make sure the editor is in standard editor mode from the menu options Editor > Show Editor Only. Alternatively, you can click the Adjust Editor Options button (with five horizontal lines) in the top right of the editor area and then choose Show Editor Only from the pop-up menu.
- Show the navigator area with your list of files (View > Navigators > Show Project Navigator).
- If you only see the project name and no files underneath it, click the triangle disclosure indicator to reveal the files and directories inside.
Part 3 - Add a Photo
Before you edit your user interface in Interface Builder, you'll need to add a photo or image file to your project. It might be fun to take a selfie with the Photo Booth app, or you can use a photo you already have. Make sure you have the image file handy on the desktop.
This video shows you the steps for adding a photo or image file to the Asset Catalog, which are also described in more detail below.
-
Open the navigator area. Open the navigator area on the left, with the project navigator showing your list of files. If you’re working on a smaller screen, you can close the inspector area on the right.
-
Select Assets. This opens the Asset Catalog that Xcode has added to your project. It’s the best place to keep all the images used in your app.
-
Drag in the image file. This adds the image to your project and gives it a name. The image is now part of your app.
Part 4 - Edit the Storyboard
Now you’ll edit the content in your storyboard, which then will appear in your app.
Open the storyboard by selecting Main from the list of files in the project navigator. The editor area will show an iPhone frame with an empty white screen. This is the main (and only) scene in your storyboard.
For the rest of this section, you’ll need to keep the inspector area on the right visible. If you need more screen space, you can hide the navigator area on the left.
This video shows you the steps for editing the storyboard, which are also described in more detail below.
-
Change the Device. Click the Devices icon at the bottom of the window (the current selection is listed next to the icon) and select iPhone 14 Pro from the popup that appears. This allows you to see your interface layout as it will appear on the iPhone 14 Pro simulator.
-
Select the main view. Click anywhere in the scene to select its main view. In the Document Outline to the left, you’ll notice that the View Controller Scene expands to show the items it contains and that the View item is highlighted. (If you don’t see the Document Outline, look for its button 1 at the bottom left of the editor area.)
-
Show the Attributes inspector. In the inspector panel on the right, show the Attributes inspector 2.
-
Adjust the background color. Select the menu next to Background and select Custom. Then choose a new color for the view from the color picker.
-
Run your app. When you’re happy with your new color, build and run the app again using the Run button in the toolbar. Your app is now a little more interesting.
Adding a Frame
You'll put your photo in a frame by adding another plain view and setting its color—just as you did for the main view in the scene. It's best to add the frame before you add the photo, because the photo will sit inside it.
-
Open the Object library. To open the Object library, choose View > Show Library or click the plus button near the top right of the Xcode window. This floating window holds all the objects you can add to a storyboard. Take some time to look at all the different objects—these are the components from which all apps are built. Scroll through until you find the "View" item. It looks like a gray square containing a smaller white square. (If you want to find it quickly, you can narrow down the selection by typing "UIView" in the search bar at the top.)
-
Drag in a view. Drag and drop the view into the view controller. Notice that as you drag an item from the Object library, the library window will disappear.
-
Position the view. Move the view to the center of the screen. You'll notice that dotted blue lines will guide you as you drag and that the view will snap to them when it gets close. Then use the resize handles at the corners to make the view large enough to display your photo. As you resize the view, you'll notice that the guides appear again to help you with alignment.
-
Set the color. To change the new view's color, follow the same steps you did for the main view. Since the view is already selected, you can go directly to the Attributes inspector, select the menu next to Background, select Custom, and choose a color from the color picker.
Build and run the app again to see your frame.
Adding and Configuring an Image View
It's time to add your image to the frame. Images are displayed in iOS in image views. You'll use a familiar process: dragging a view from the Object library and configuring it in the Attributes inspector.
This video shows you the steps for adding an image view to your app and configuring it to display your image, which are described in detail below.
-
Open the Object library. Scroll through the floating window until you find an image view. Alternatively, type in the search bar at the top to narrow down the list.
-
Drag in an image view. Drag the image view from the Object library. You'll notice that the main view or the frame view will be highlighted as you drag the image view over them. The highlighted view is the one that will contain the image view when you drop it. Make sure to drop the image view into the frame view.
-
Resize and position the image view. Move and resize the image view until the frame behind it is the correct width. The guides should help you center the image view properly. (If the guides are preventing you from getting it just right, you can hold down Command as you drag to prevent snapping and use the arrow keys to fine-tune its position.)
-
Select the Attributes inspector. The contents of the Attributes inspector will look a little different now that you’ve selected an image view. Click the Attributes inspector button, or choose View > Inspectors > Show Attributes Inspector.
-
Choose your image. Choose the image you added earlier from the pull-down menu at the top of the inspector.
-
Select Content Mode. Unless you happened to use an image that's exactly the same shape as the image view, you'll notice that the image doesn't completely fill it. This is because the Content Mode, which you can see under the View heading in the Attributes inspector, is set to Aspect Fit. Aspect Fit stretches the image to fit inside the view, displaying the entire image in its original aspect ratio. Experiment with different settings to see what happens. Aspect Fill, for example, stretches the image so there aren't any empty areas in the frame, cropping off portions of the image to maintain its aspect ratio, but keeping your frame the way you intended it to look.
Use the Run button in the toolbar to build and run your app—as you did before—to see your photo display.
Congratulations! Not only have you made an app, you’ve also made it your own—no other app in the world looks like yours. And you’ve built it using the same tools that professional developers use every day.
Reflection Questions
What do you want to get out of learning how to code?
- Of those goals, which could you accomplish using a playground?
- Which goals would be better accomplished by creating a full app?
Summary
Your coding project is made up of many different files, several of which Xcode creates automatically when you make a new project. You edit most of those files right inside Xcode, and when you’re ready to view your changes, you tell Xcode to build those files into an app that runs on your simulator or device.
Here’s a summary of what you’ve learned so far about using Xcode to explore your project:
- The project navigator shows a list of all your code, interface, and configuration files.
- You can change the editor’s contents by choosing different files in the project navigator.
- When you select different files in the project navigator, you see different options in the inspector area.
- You can show and hide the navigator and inspector areas as you like.
