Applications are open for the Product College - Apply Now

Navigating Xcode

Navigating Xcode

January 15, 2018

Project: Learn how to build apps: Magic 8-Ball

Let's take a look around our newly created Xcode project. All of the files and settings in our current Xcode project are the default configurations when a project is created from the Single View App template.

To see what's in our project and navigate file to file, we'll need to using the Navigator.


Xcode Navigator

The navigator pane contains multiple tabs (call navigator) for many different tools in Xcode.

You can change tabs by clicking on the different icons at the very top of the navigator pane.

Navigator Top Tabs

Each of these navigator tabs are useful tools that you'll eventually learn to use. Some of the most important ones are:

  • Project navigator: navigate and change files
  • Find navigator: search through your project to find files
  • Issue navigator: locate and fix warnings and errors in your project

In this tutorial, we'll only focus on the first tab, the Project navigator, but you'll learn about all of them eventually.

Project Navigator

The project navigator helps you navigate and organize your project files. In other words, it makes it easier to find and open different files in the same project.

In your Navigator pane, make sure you have the project navigator tab active. If you don't, click on the first navigator tab. It has an icon that looks like a file. Project Navigator Tab

With your Project navigator tab active, you should see your project's files right below the Navigator tabs:

Project Navigator Active

Let's look at some of the different files in our project.

Xcode Project File

In the navigator, select the Xcode project file at the very top of the project navigator. You should see the following:

Xcode Project Details

You'll notice, whenever you choose a file in the Project navigator, the Editor area will update with the corresponding file. In addition, the Utilities area will also change to match the options available for the active file. Switch back and forth between a couple files if you want to test it out.

In the project details, you can configure your app's settings. For example, let's go through the process of changing the app's name that is displayed on the home screen of a user's iPhone.

To get a better idea of what we're changing, run the app on the iPhone 7 simulator. You'll see the blank white screen as you saw earlier.

Next, press command-shift-h. This will take you to the home screen of your iPhone 7 simulator.

Home App Display

As you can see above, the app icon is the default blank app icon that comes with new projects. In addition, our project name is by default the product name that we set when creating the project. We'll eventually change both, but first let's change the app's Display Name.

Back in Xcode, we can change the app's display name by editing the Display Name field in our project details. Make sure the Xcode project file is active in your Project navigator.

Set the app's display name from the default MagicEightBall to Magic 8-Ball.

Edit Display Name

Done! That was easy.

Before getting to changing the app's icon, let's take a look at some other types of files.

Swift Source Files

In your Project navigator, select the file nested under your Xcode project file named AppDelegate.swift.

App Delegate Active

Files with the .swift extension are Swift source files. The code you write will be in Swift source files.

The App Delegate is an important object that is responsible for handling your app lifecycle. If you look at the some of the method names in the file, you'll see names like:

  • application(_:didFinishLaunchingWithOptions:)
  • applicationWillResignActive(_:)
  • applicationWillTerminate(_:)

As you can guess, all of these methods happen when your app changes state such as when your app first launches, when it's put into the background, or when it's terminated. Although we won't add anything in here for this tutorial, you can add code here to customize your app behavior when important app lifecycle events happen.

Asset Catalog

Now, let's get back to changing our app icon.

From the Project navigator, select the Assets.xcassets file. Within the editor area, you'll see a single asset placeholder named AppIcon. Normally, you'll see a list of all your app's assets in the Asset Catalog.

In your Asset Catalog, select the empty AppIcon placeholder asset. You will see a bunch of empty placeholders for your app icon in multiple different sizes and devices.

App Icon Asset Empty

If you're wondering why there are so many empty app icon placeholders, it's to support different resolutions and sizes of different devices.

For our Magic 8-Ball app, we'll only add the app icon images to be displayed on the home screen. When you're really submitting your app to the App Store, you'll need to make sure to account for all the relevant app icon sizes.

Go ahead and download the Magic 8-Ball app icon images by clicking here. After downloading and unzipping your image assets, drag and drop the app_icon@2x.png into iPhone App iOS 7-11 60pt @2x empty placeholder. Repeat and do the same for app_icon@3x.png.

When you're finished, your AppIcon image set should look like the following:

App Icon Set

You've successfully added a custom app icon to your Magic 8-Ball app!

After adding your Magic 8-Ball app icon, you'll notice some new warnings appear. These appear because our Xcode project is expecting additional version of our app icon for the App Store and the iPad device. It's ok to ignore these warnings for this tutorial.

Testing Our Changes

To make sure our changes have worked, let's run the app. Remember, we haven't changed what the app does, so when we run the app it'll still be a blank, empty white screen.

Run the app by pressing the Run button in the toolbar or the CMD-r shortcut. With the app active in the simulator, press command-shift-h. You should see the simulator return to the iPhone homescreen with your new app icon and display name!

Home Screen Styled


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