Xcode

All great programmers have taken time to become comfortable with the IDE (integrated development environment) they're using to develop their apps. For iOS developers, Xcode is the cornerstone of that environment. At first, Xcode might seem like just another text editor. But you'll quickly learn it's an indispensable tool for compiling and debugging code, building user interfaces, reading documentation, submitting apps to the App Store, and so much more.

In this lesson, you'll learn to create a basic iOS app, which will give you a chance to become familiar with the Xcode interface and its capabilities.

What You'll Learn

• How to navigate Xcode projects
• How to use the project navigator, debug area, assistant editor, and version editor

Vocabulary

• active scheme
• assistant editor
• compiler
• console pane, or console area
• debug area
• executable apps
• Git
• IDE
• project
• project navigator
• project template
• push notifications
• standard editor
• storyboard
• target
• inspector area
• variables view
• version editor

Related Resources

• Xcode Help Links to an external site.
• Xcode Overview Links to an external site.
• WWDC 2016: Introduction to Xcode Links to an external site.

Guide

Xcode Interface

The Xcode workspace is divided into five main sections.

The first is the editor area, where you spend most of your time writing Swift code and building UIs using Interface Builder.1 The file you select in the Project navigator column on the left determines what’s displayed in the editor area.2 When you edit code, an overview of the entire file appears on the right. This overview is the mini map.3 You can interact with the mini map to navigate your source code quickly.

Above the editor area is the jump bar, which contains the following controls from left to right:

• Related Items — Navigate to various related items for the file you're currently editing.
• Go Back/Forward — Use navigation buttons to move back and forth through your navigation history within the editor. This includes navigation actions such as jumping between definitions within a file and moving between different files.
• Path—Use this breadcrumb style control to see the current editing context relative to its parent groups and folders in the project. Click any item in this control to navigate to other items at the same level. The farthest right item navigates the structure within the file. (It might say "No Selection.")
• Adjust Editor Options — Change the options of the current editor as well as create an assistant editor that appears alongside your current editor with related files. This is most useful when referencing other source files and when creating connections between source code and Interface Builder.
• Add Editor — Add an additional editor to the window (much like the assistant editor). By default, this adds an editor to the right. By holding the Option key, you can add an editor below. When multiple editors are present, two new buttons appear to the left of the jump bar. One closes the editor and another focuses the editor, causing it to hide all others. The ability to use multiple editors is an advanced feature that greatly improves your productivity when referencing and editing multiple files.

Next is the toolbar, which spans the top of the Xcode workspace.

Moving from left to right are the following buttons:

• Build and run — Verifies that all of your code is correct; and, if so, executes your app on the specified device.
• Stop — Stops the app from running.
• Active scheme (two separate buttons) — A single Xcode project can create multiple apps, for example, an iOS application and a watchOS application. If you click to the left of the chevron, a dropdown menu will let you choose which of these apps you wish to run. Clicking to the right of the chevron allows you to select the device or simulator you wish to run the app.
• Library — Opens a context-sensitive library of Code Snippets, Media, Colors, and Interface Builder Objects. The options are dependent on what type of file you're currently editing.
• Code Review - Displays side-by-side views of the current version and other versions if you're using a source control system, such as Git, to manage your Xcode files.
• Toggle area (three buttons) — Hides or shows the navigator area, debug area, or inspector area.

The third section is the navigator area, a narrow column on the left. At the top of the column is the project jump bar, which allows you to select which navigator is displayed.

Moving from left to right are buttons for the following navigators:

• Project navigator — Lists all files associated with your project.
• Source Control navigator - Displays information about your project's Git repository if one is set up.
• Symbol navigator — Lists all the symbols, or data types, you've defined in your project. Since a single file can contain multiple symbol definitions, use this navigator when you're unsure which file a symbol defines.
• Find navigator — Allows you to perform a search for specified text throughout your project, with the option to also replace the text.
• Issue navigator — Displays all the warnings or build errors that were encountered the last time your app was built.
• Test navigator — Lists all the tests that you've written for your application and allows you to run each test individually.
• Debug navigator — Displays the order in which the code was executed when you're actively debugging an app.
• Breakpoint navigator — Lists all the breakpoints you've added to your project and makes it easy to enable or disable them individually.
• Report navigator — Provides a detailed log of each build of your project.

At the bottom of the Xcode window is the fourth main section, the debug area. To the left of this area is the variables view, which lists the value of each variable while you're actively debugging an app. To the right is the console pane, which displays any print statements you or the system has output. Each of these views can be shown or hidden using the button in the bottom right .

Finally, the inspector area is a context-sensitive pane that displays details about any file selected in the Project navigator, such as the file's location on disk or the apps in which the file is included. When you're using Interface Builder, you'll find that this area is particularly useful for adjusting the attributes of your UI elements, including position, size, and color.

Xcode File Types

Xcode knows how to work with a variety of files that span across multiple programming languages. For now, you'll learn about files related to projects written in the Swift language.

At the very top of the Project navigator, you'll see a file with a tiny blue Xcode icon. Click the file to open it in the editor area. This is the .xcodeproj file, which includes all the settings for your project and its targets. Each target is a product that Xcode can build from the project. For now, the targets you'll build will be executable apps. Later, you may use targets to build frameworks, different versions of a particular app, or versions for different platforms like watchOS or tvOS.

The particular project you're working with has only one target: an iOS app. Within the project file, you can change all the details of a particular target. For example, under Deployment Info, you can specify which version of iOS your code must support, change which devices your app is intended to run on, or show/hide the status bar.1

By selecting Signing & Capabilities at the top of the pane, you can configure code signing, which is a requirement for deploying to devices or the App Store.1 From this screen, you can also enable different features within the selected target. For example, if your application needs to accept push notifications, you can add the Push Notifications capability and Xcode configures everything necessary for your app to receive notifications from the Apple Push Notifications service. 2 You can add capability configurations by clicking the Capability button +.3

Some capabilities have configuration options that you can disclose by clicking the triangle next to them.

Files that include the .swift extension contain Swift code, as you'd expect. Whenever you build your app, Xcode gathers up all included .swift files and runs them through the Swift compiler, which converts the Swift code into a format your selected device understands.

All .storyboard files are unique to Interface Builder. They contain information about the design of each scene within your application, as well as how one screen transitions to another. You'll learn more about storyboard files in an upcoming lesson.

The .xcassets file represents an asset catalog. In an asset catalog, you can manage many different kinds of assets. This includes your app's icon, images, color definitions, and other forms of data to be bundled with your app. An asset catalog also allows you to specify variants of your assets based on device settings and capabilities such as light and dark appearance, accessibility settings for high and low contrast, and hardware differences from screen resolutions to memory capacity and graphics chip support.

The Info.plist file contains a list of properties and settings for your app. Xcode provides a special interface for editing this file so that you rarely need to interact with it directly. These settings are organized on various screens that you can find when you select the .xcodeproj file you learned about earlier.

Keyboard Shortcuts

As you become more proficient with Xcode, you'll discover that it's much faster to execute tasks using keyboard shortcuts. Make sure to learn the most common shortcuts right away:

• Command-B – Build the project
• Command-R – Build and run the project
• Command-/ – Toggle comments on selected rows of code
• Command-[ – Shift the selected code left
• Command-] – Shift the selected code right
• Command-↑ - Navigate to the top of the file

Refer to the Xcode Keyboard Cheat Sheet Links to an external site. for a full list of shortcuts.

Xcode Preferences

Xcode is a powerful tool with many options. As you work with Xcode you'll learn more about what it can do and how you can customize it to work how you want it to. Check out the Xcode Preferences by choosing Xcode > Preferences from the menu bar. You can use the Preferences to add developer accounts, customize navigation or fonts, or choose certain behaviors when text editing and more.

Open Xcode Preferences and navigate to the Fonts & Colors pane.

You can choose a new theme, or set of colors and fonts, by selecting different options in the list on the left. Some themes have a suffix of "(Light)" or "(Dark)." These variants are used respectively based on the system's current light or dark appearance. Xcode also allows you to override its appearance behavior independent of the system setting from the General pane.

To read more about Xcode and its various tools, read the Xcode Help Links to an external site. documentation by choosing Help > Xcode Help from the menu bar.