Xcode overview

Xcode is Apples integrated development environment (IDE). You use Xcode to build apps for
Apple products, including iPad, iPhone, Apple Watch, Apple TV, and Mac. Xcode provides
tools to manage your entire development workflowfrom creating your app to testing,
optimizing, and submitting it to the App Store.
A project keeps the necessary files and resources for developing your app organized. To
create a project, start with one of the templates, then modify it however you like. Templates are
available for each platform (iOS, watchOS, tvOS, and macOS) and for common types of apps
(application and framework). Each template comes preconfigured with default settings and is
ready to build and run.

After you create a project, the main window appears. This window is your primary interface for
viewing, editing, and managing all the parts of your project. It's flexible and configurable,
adapting to the needs of the task at hand and allowing you to configure it to fit your work style.

Use the toolbar to build and run your app, view the progress of running tasks, and configure
your work environment. Youll choose a run destinationfor example, a simulator or device
from the Scheme menu. To show the toolbar, choose View > Show Toolbar.

Use the navigator area for quick access to different parts of your project. Click a button in the
navigator bar to show the corresponding parts in the content area below the navigator bar. To
view files in a project, for example, click the project navigator (
appear in the content area.

) in the navigator bar; the files

Select a file in the project navigator to open it in an editor for the type of file in the editor area.
For example, if you select a source file, the file opens in the source editor and if you select a
user interface file, the file opens in Interface Builder. Interface Builder is the visual design editor
thats integrated into Xcode. If no editor is available, a Quick Look preview of the document
appears.

Select the project (the root file in the project navigator) to open the project editor. Use this
editor to view and edit your project and other settings. Use the tabs to switch between the
different types of settings.

Use the utilities area to inspect objects and use ready-made resources that you've selected in
the navigator or editor area. Use the inspector pane to view and edit information for the
selected object or for the project. To show an inspector, click a button in the inspector bar.
To access resources, select a library in the library bar of the library pane. For example, select
the Object library ( ) to access user interface views and controls. To show a popover
containing information about a resource, click the resource. To show only the library resources
you need, enter text in the filter bar at the bottom of the library pane.

Click symbols, interface objects, and build settings in the editor area to see descriptions in the
Quick Help inspector (
link or the More link.

). To view the full documentation for a symbol, click the Declared In

Create your Xcode project

When you create an Xcode project, you first choose a template for a common style of app or
framework, then modify the project as you like. Xcode templates include essential project
configuration and files that help you start developing your app quickly.
1. Launch Xcode, and in the Welcome to Xcode window, click Create a new Xcode
project.
Alternatively, choose File > New > Project.
2. In the sheet that appears, select the target OS.
3. Under Application, select a template, and click Next.
For example, to create an app with a single empty window, for iOS apps, select Single
View Application; for macOS apps, select Cocoa Application.

4. In the sheet that appears, fill in the text fields and choose options from the pop-up menus
to configure your project.
You must enter a product name and organization identifier to continue to the next sheet.
You should also enter an organization name (if you dont belong to an organization, enter
your name). The following screenshot shows options for creating an iOS app.

5. From the Team pop-up menu, choose your team.

If the Add account button appears, optionally add an account and select a team now.
Otherwise, skip this step and assign a team later.
6. From the Language pop-up menu, choose a programming language.
7. To add test targets to your project, select Include Unit Tests and Include UI Tests.
8. Click Next.
A sheet asks you where to save your project.
9. Specify a location for your project, optionally select Create Git repository on to use
source control, and click Create.
The main window for your project appears, similar to the iOS app main window below.

Run your app in Simulator

After you create your project from a template, build and run your app to see what the app looks
like on a device. For macOS apps, just click the Run button in the toolbar and the app launches
on your Mac. You can develop and test other apps on your Mac using a simulated device and
test again later using a real device connected to your Mac.
Projects can have multiple targetsmultiple apps and multiple configurations of the same app.
A target specifies a product to build, such as an app for iOS, macOS, tvOS, or watchOS. Most
projects you create from a template have one target for the main app and other targets for test
apps. For watchOS apps, theres a target for the iOS app, the WatchKit extension, and the
WatchKit app. To view the targets, click the Project/Targets button in the project editor.

To run your app, choose a scheme from the Scheme pop-up menu in the toolbar. A scheme is
a collection of settings that specify the targets to build, the build configuration, and the
executable environment. Xcode creates a default scheme for each target in your project.
Choose the scheme from the Scheme pop-up menu that matches your apps name.

Next choose a run destination from the Scheme pop-up menu in the toolbar. The run
destination determines where the app runs after its built. For macOS apps, the run destination
is the Mac running Xcode. For other apps, you can choose a simulator of a product family
running a version of the operating system, or a device connected to your Mac. To test your app
without a device, choose a simulator from the Scheme pop-up menu. For tvOS apps, choose
Apple TV 1080p under tvOS Simulator.

To test a WatchKit App target, choose the WatchKit App as the scheme, and choose an
iPhone simulator paired to an Apple Watch as the run destination.

Now click the Run button in the toolbar to compile, link, and debug your app. The activity
viewer in the toolbar shows the build progress and results. If an error or warning occurs, a
corresponding yellow or red icon appears in the activity viewer, and you can click it to view
details in the issue navigator. Click the issue in the navigator, and Xcode displays the line of
code where the compiler error occurred. (You can customize the behaviors of some alerts and
actions using Behaviors preferences.)
If the build is successful, your macOS app launches on your Mac. For other apps, the app
launches in Simulatora developer tool included with Xcode that simulates devices. For iOS
and tvOS apps created from a template, Simulator displays an empty view because you
havent created the user interface yet. For watchOS apps, Simulator opens both an iPhone
simulator displaying the Home screen, and an Apple Watch simulator displaying an empty
view.

In Simulator, you can simulate a physical user actionsuch as rotating or shaking an iOS
deviceusing the Hardware menu. You can also simulate touch gestures and simulate Apple
Watch interactions using the Mac pointer.

For iOS and tvOS apps, use the Settings app to configure the simulator. To open Settings,
choose Hardware > Home and double-click Settings. For example, if your app uses iCloud
services, you can enter iCloud credentials in Simulator before launching your app.

If the target launches successfully, Xcode starts a debug session in the debug area below the
editor. To quit the app and the debug session, click the Stop button next to the Run button in
the toolbar.

Create the user interface

Use Interface Builder to visually lay out your app's user interface. To edit the user interface,
select a user interface file in the project navigator ( ), and the file opens in Interface Builder
in the editor area. All projects created from a template contain a Main.storyboard file that
contains the user interface for your app. For watchOS apps, the file is called
Interface.storyboard. For iOS apps, theres also a LaunchScreen.storyboardfile for
the view that is displayed while the app is launching. A storyboard (.storyboard) file contains
a set of view controllers and their views. To open Interface Builder in a separate window,
double-click the user interface file in the project navigator.

The canvas shows your user interface as it appears on a device. For iOS and watchOS apps,
the first time you open a storyboard file, a sheet prompts you to choose a device family (for
example, iPhone 6s or Apple Watch 38mm). Later, you can change the device using the device
configuration controls below the canvas.
The library in the utilities area contains resources that you can add to your project or files. To
add an object to the user interface, drag the resource from the Object library ( ) to the canvas.
To view the objects in a list or a grid, toggle the icon in the lower-left corner of the library. To
filter the objects, enter text in the filter bar at the bottom of the library. For example, to find a
button, enter button in the filter bar.

Drag all of the objects you want in your user interface to the canvas. Reposition the objects by
dragging them to where you want, using the gridlines to help align and center the objects. To
change text (for example, to edit the title of a button), double-click the object and enter the text.
The File inspector ( ) and Quick Help inspector ( ) in the utilities area are available
throughout your project and display information depending on what you select in the navigator
and editor areas. The other inspectors are specific to what is selected on the canvas. To edit
the attributes of an object, select the object on the canvas and open the Attributes inspector (
). To get information about the size and position of a view, click the Size inspector (

).

To view the user interface on different device types, click the View as button below the
canvas and select a device. To further configure the device, select an orientation and
adaptation. For tvOS apps, select an interface style.

If the objects in the canvas dont appear in the location you expect, use Auto Layout
constraints to set rules for how the objects should scale and reposition. To center an object in a
view, select the object and click the align icon in the lower-right corner of the canvas. To place
the object in the center of the view, select Horizontally in Container and Vertically in Container,
and click Add 2 Constraints in the align tool popover.

Similarly, set the position of other objects, and optionally, set the position relative to an
adjacent object. To pin the bottom of a label to the top of a button, select the label and click the
pin icon (next to the align icon). In the pin tool popover, select the dashed red line below the
box, and click Add 1 Constraint. To check the constraints, change the device configuration
below the canvas or run the app in Simulator again.

The outline view provides a hierarchical view of your objects in the user interface file. If the
outline view is collapsed, click the toggle (
) below the canvas to expand it. You should be
able to see the objects you added to the canvas under View Controller Scene. The outline view
also shows Auto Layout errors. Click the red arrow to see the details of what went wrong, and
then click an error to highlight the associated view.

Every scene in a storyboard references a view controller class that contains the code that
manipulates the view. If you have multiple scenes in the storyboard, select the scene and click
the Identity inspector ( ) to get the associated view controller class. To connect objects on
the canvas to your code, open the assistant editor, and in the jump bar at the top of the
assistant editor, choose Automatic followed by a class implementation filefor example,
choose ViewController.swift.

Add an outlet if you want to reference an interface object in your codefor example, change its
value at runtime. To create an outlet, Control-drag from the object on the canvas to the code in
the assistant editor where property declarations are allowed. In the popover that appears, enter
the property name and click Connect.

To add an action method thats called when the user interacts with a control (for example, taps
a button, enters text, or moves a slider), Control-drag from the control to the method
implementation section of the class source file. In the popover that appears, enter the method
name, and click Connect (optionally, specify the types and the event that invokes the action).
You can enter the code for the action method now, or enter it later using the source editor.

To view and edit the connections for an object, select the object and open the Connections
inspector.
In the assistant editor, you can view a live preview of the user interface as you create it. From
the assistant editor selection bar, choose a user interface file from the Preview menu. For
example, choose Main.storyboard (Preview), and the assistant editor shows the layout of
the first view your users will see. For iOS apps, use the control at the bottom of the preview to
switch between portrait and landscape modes. If you add localization to your app, you can
select a language from the pop-up menu in the lower-right corner. If you dont have localization
yet but want to see how your layout handles different string lengths, choose Double-Length
Pseudolanguage from the language menu.

Write your code

After you create the user interface, you need to implement the action methods that Interface
Builder added to your source files. To view and edit a source file, select the file in the project
navigator ( ), and the file contents appear in the source editor on the right. To open the
source file in a separate window, double-click the file.
To enter code, position the pointer at the desired insertion point in the file, press Return to
create a new line, and begin typing. As you type in the source editor, Xcode scans your text.
When you make a syntax error, Xcode marks it with a red underline or a caret (^). If an error
icon appears, click it to display a message describing the issue.

When you begin typing the name of a symbol, Xcode offers inline suggestions for completing
the name. Click an item in the suggestion list to select it, or use the Up Arrow and Down Arrow
keys to change the selected suggestion. Press Return to accept a suggestion.

When a method or function contains parameters or arguments, code completion includes a

placeholder for each. To move to the next placeholder, press Tab; to move to the previous
placeholder, press Shift-Tab.

To find and replace text in the source editor, choose Find > Find and Replace (or press OptionCommand-F). The search controls appear above the source file. As you type the search string
in the first field, Xcode searches the file and highlights the occurrences of the string. Enter a
replacement string in the second field. To replace the occurrence and find the next, click
Replace. To replace all occurrences, click All.

To find strings in your entire project, choose Find > Find in Project or select the find navigator (
) in the navigator area. Enter text in the search field followed by Return, and Xcode displays
occurrences of the string in the entire project. Select an occurrence to view it in the editor area.
To scope the search, above the text field, choose a string type and options. To find all
occurrences that start with a string, choose Find > Text > Starting with. To find symbols that
start with a string, choose Find > Definitions > Starting with.

To view a symbol declaration, Option-Command-click the symbol in the source editor. Xcode
opens the assistant editor next to the source editor and displays the file containing the symbol
declaration. To remove the assistant editor, click the close button in the upper-right corner. To
navigate to a file without opening the assistant editor, Command-click the symbol. Alternatively,
use the jump bar at the top of the source editor to navigate to methods and properties.

To read a description of a symbol, Option-click the symbol, and a Quick Help popover appears.
To view the full documentation for a symbol, click the Declared In or More link. To dismiss a
Quick Help popover, click anywhere in the source file.

To search for symbols in your project and across the system frameworks, choose File > Open
Quickly (Command-Shift-O) from anywhere in your project. In the search field popover, enter
text followed by Return.

Debug your app

Use the Xcode debugger to inspect your code while running your app. The debug navigator
and debug area automatically appear when you build and run your app. If necessary, show the
navigator area by clicking the left button (
button (

) and the debug area by clicking the middle

) on the right of the toolbar.

To set a breakpoint in your code, open the file in the source editor and click in the gutter next to
the line of code you want to break in. To temporarily disable a breakpoint, click the breakpoint
badge in the gutter and it turns gray. To temporarily disable all breakpoints, click the breakpoint
icon in the debug bar. To delete a breakpoint, drag it out of the gutter. Run your app, and the
debugger stops the app at the breakpoint you specified when that line of code is executed.

The debug bar appears at the top of the debug area and contains buttons that control the
execution of your appfor example, continue, step over, and step in to. The variable area
below shows the variables in the current scope. To view a variable, click the disclosure triangle
next to it. If the value is an image, you can quick look it directly in Xcode. The console area to
the right shows standard output and is where you enter LLDB debugger commands. For
example, enter po [expression] and the debugger executes the expression. As you type an
expression, the debugger offers suggestions for completing it similar to the source editor. The
debug navigatorappears to the left of the debug area and allows you to navigate the stack.

To manage your breakpoints, click the breakpoint navigator ( ) in the navigator area. You
can view, disable, and delete breakpoints. To add special types of breakpoints, click the Add
button (+) at the bottom of the navigator and choose a type of breakpoint from the pop-up
menu. Control-click a breakpoint to display a contextual menu and explore more ways to
manage your breakpoints.

Use source control

The first time you save a project created from a template, you have the option of enabling
source control. If you dont have a Git or Subversion server setup, select Create Git repository
on and choose My Mac from the pop-up menu. Otherwise, choose Add To New Server, and in
the sheets that appear, provide the server information.

To check out an existing project in a repository, choose Source Control > Check Out, and
provide the server information in the sheets that appear. Choose a server from the table or
enter a server address in the text field. Click Next, enter your credentials, and click Next again.
Choose a location for your working copy and click Download. If the download is successful, the
Source Control menu items are enabled.
To see the files you modified in the navigator, click the project navigator ( ) and click the
source control status icon in the filter bar. The project navigator shows only the files that have a
source control status such as modified (M). You can use the filter bar to view the set of files
youre actively modifying.
To see the changes youve made to a file, select the file in the project navigator, choose the
version editor (
)in the toolbar, and choose an option from the pop-up menu. To compare
file versions, choose Comparison. To find out who last changed each line in your file, choose
Blame. To view the source control log for the file, choose Log.

If you choose Comparison, the editor compares the local revision with the last revision
committed to source control. For each change, the version editor shows the line that changed
and highlights the changes to the line. To compare the local revision to an older revision,
choose the older revision from the jump bar on the right. To compare any two revisions, select
them from the jump bars on the left and the right.
To save the changes you made to files, choose Source Control > Commit. In the sheet that
appears, optionally review the changes and exclude or discard specific changes. Then enter a
commit log message, optionally select Push to remote, and click the Commit button.