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.
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.
Each of these navigator tabs are useful tools that you'll eventually learn to use. Some of the most important ones are:
- Project navigator (folder icon): navigate and change files
- Find navigator (magnifying glass icon): search through your project to find files
- Issue navigator (warning sign icon): 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.
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.
With your Project navigator tab active, you should see your project's files right below the Navigator tabs:
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:
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 (using a single click NOT double click).
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 (
⇧⌘H). This will take you to the home screen of your iPhone 7 simulator.
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.
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
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:
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.
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.
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
iPhone App iOS 7-11 60pt 2x empty placeholder. Repeat and do the same for
iPhone App iOS 7-11 60pt 3x.
When you're finished, your AppIcon image set should look like the following:
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
⌘R shortcut. With the app active in the simulator, press command-shift-h (
⇧⌘H). You should see the simulator return to the iPhone home screen with your new app icon and display name!
If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.