Xcode Tutorial for Beginners

Learn how to use Xcode! Where to download it (options for PC), navigating Xcode and the menus, coding in Swift, debugging and building user interfaces

Continue Reading…

Written by

Chris C

Published on

30 Sep 2019

This guide will demystify Xcode for you and teach you what you need to know in order to start building apps!

Xcode icon

You’ll learn:

  • Where to download Xcode and how to set it up
  • The 5 main parts of the Xcode development environment and how to navigate around
  • How to code and build your user interface with Xcode
  • How to use the iOS simulator to test your app

The Complete Xcode 11 Tutorial:

  1. What is Xcode? (and what’s new in Xcode 11)
  2. Download Xcode and install it
  3. How to use Xcode
  4. Find your files in the Navigator Area
  5. Write code in the Editor Area
  6. Build your user interface (Storyboards or SwiftUI)
  7. Configure elements with the Utility Area
  8. Run and build your project using the Toolbar
  9. Test and fix bugs with the Debug Console
  10. Run your app using iOS Simulator (or your device)
  11. Learn to code with Xcode Playgrounds
  12. Submit your app with the Xcode Organizer
  13. Conclusion

Chapter 1

What is Xcode?
(and what’s new in Xcode 11)

What is Xcode?

Xcode is an application that developers use to build apps for Apple’s various platforms such as iPhone, iPad, Macs, AppleTV and Apple Watch.

Xcode Requirements

Xcode is available for Macs only but there are alternative options for PC users. I also often get asked if you can run Xcode on iPad and unfortunately the answer is no.

It requires macOS 10.14.4 or later and 7.6 GB of hard drive space. If you don’t meet the minimum requirements, you can try to update Xcode using this method (at your own risk).

The latest version of Xcode is 11. If you want to check what version of Xcode you currently have, just launch it and in the welcome screen, you’ll see it clearly stated.

Xcode requirements
Xcode requirements

What’s new in Xcode 11?

Xcode 11 brings lots of new features such as support for Swift 5.1, Apple’s latest iteration of the Swift programming language, SDKs for iOS 13, tvOS 13, watchOS 6 and macOS Catalina 10.15.

Xcode 11 welcome screen
Xcode 11 welcome screen

Each of those platforms has changed since their previous iteration and Xcode 11 allows you to build apps to utilize these new features.

In terms of how Xcode itself has changed as an IDE (integrated development environment), there are many new features to make it easier for you to build software.

I’ve made a video going through all the changes below:

(Note: this is going to be most relevant for people who have used previous versions of Xcode before. If you’re a beginner, I recommend that you skip this section for now)

Should you update to Xcode 11?

The biggest incentive to update is the ability to work with the latest version of the Swift programming language as well as Apple’s new declarative UI framework, SwiftUI.

Apple keeps a pretty tight leash on the App Store and over time, they raise the requirements on apps that are published. Eventually, you will have to update to Xcode 11 in order to build apps that use the latest versions of iOS.

If your Mac is pretty new (2015+), there’s no disadvantage to updating and working with the latest technology.

However, if your Mac is too old to handle the systems requirements of Xcode 11 and you’re just starting to learn iOS development, there’s no problem with using an older version of Xcode just to learn.

Chapter 2

Download Xcode And Install It

The easiest way to download Xcode for free is through the Mac App Store. Click the link to go to the listing.

You can also download it manually if you don’t have the Mac App Store. Just visit the Apple Developer page for Xcode.

If you download it from the Mac App Store, then updating Xcode becomes really easy since you can just download and install the update through the store.

Download the latest version of Xcode from the Mac App Store
Download the latest version of Xcode from the Mac App Store

Xcode Older Versions

If you’re looking for older versions of Xcode, check out this page. You can download previous versions of Xcode as well as betas versions. You’re going to have to sign up for a free Apple ID if you don’t have one because the betas are only available for members of the Apple Developer Program.

Download older versions of Xcode
Download older versions of Xcode

Xcode on Windows

Unfortunately Xcode is only for Macs but if you’re using a PC, there are alternative ways to run Xcode on Windows. Check out my guide for options!

Xcode Alternatives

I highly recommend you use Xcode if at all possible. The reason is that when Apple announces new changes (like they did this year with SwiftUI), they build support for those new technologies directly into Xcode.

AppCode IDE
AppCode IDE

Other third party IDEs have to play catch-up and it might not even be guaranteed that they’ll roll out support for the new changes from Apple at all!

Having said that, if you still want to check out some alternatives to building iOS apps with Xcode, check out the following:

Chapter 3

How To Use Xcode

Video walkthrough of the Xcode interface
Xcode cheatsheet

I have an awesome cheatsheet that I created for referencing all the keyboard shortcuts I use! It’ll come in handy as you learn to use Xcode for yourself. You can download the cheatsheet here.

By the end of this chapter, you’ll have a great understanding of how to navigate the development environment and how to create your first Xcode project.

Before we dive in, keep this Apple Documentation for Xcode handy.

Let’s now look at the diagram below. If your interface looks different, make sure you have Xcode 11 and not an earlier version.

Xcode 11 User Interface

The reason this is a great diagram is because it lets me refer to these different sections of the interface and you can refer back to this diagram to see what I’m talking about!

As you can see from the diagram, there are 5 major areas: the Navigator, Editor, Utility Area, Toolbar and Debug Area. We’ll cover each area in detail later but for now, let’s talk about general navigation of Xcode.

Keep in mind that you can adjust the size of each of those panes by hovering your cursor over the boundaries of each area and dragging.

You can also show and hide the various areas as needed via the “View” buttons in the upper right hand corner:

Xcode toggle view buttons

This can be helpful, for example, when you’re writing code and you don’t need the debugger area or the utility area. Then you can use the View buttons to hide those 2 panes to give your editor more visible space.

Xcode editor area
Xcode editor area

Alright, let’s go through the Navigator area now!

Chapter 4

Find your files in the Navigator Area

In this pane, there are a bunch of different navigators that you can switch between using the Navigator Selector Tab Bar (see screenshot below).

Since there are so many (eight!), I’m only going to talk about the three most common ones you’ll use as a beginner: the Project, Search and Issue navigators.

The Xcode Project Navigator

The Project Navigator is where you’ll see all the files associated with your project. This is the default tab you’ll see when you create a brand new Xcode project.

Xcode file navigator
Xcode Project Navigator

Organizing your files

Within the Project Navigator, you can also create Groups to organize your files in. Think of them like folders. You can create a new Group and then drag your files into them to organize your project a little bit.

Adding groups to Xcode
Creating new groups to organize your Xcode project

Creating and adding new files

You can also right click on the Project Navigator and create new files or add existing files to your project. Or you can drag folders or files from your computer directly onto the Project Navigator and will popup a dialog asking how you want to add the files.

Xcode new file dialog
Xcode new file dialog

Editing files

If you click on a file in the Project Navigator, it will display the contents of that file in the Editor Area so that you can edit that file.

The Xcode Search Navigator

With the search navigator tab, you can easily look for pieces of text in your project.

Xcode search navigator
Xcode Search Navigator

You’ll find yourself using this a lot when you’re looking for a specific property, method or variable and you can’t remember exactly where it is.

One of my favorite Xcode shortcuts is cmd+shift+F. Hitting these keys is going to switch to the Search Navigator to perform a project-wide search. This really helps when you need to make a change in multiple places in a project.

The Xcode Issue Navigator

The issue navigator shows you all the problems with your app.

Xcode issues navigator
Xcode Issues Navigator

When you build and compile your application to test, if there are some problems where Xcode can’t build your app, it will halt and show you the red colored errors in the issue navigator. You can click on an error and it will show you in the editor area which file and line it’s failing at.

It will also show yellow Warnings in the issue navigator. Although resolving warnings is not necessary for building your app, they’re warnings that there may be potential issues.

Similarly, when you’re building your user interface in Xcode, any errors will also show itself in the Issue Navigator.

Chapter 5

Write code in the Editor Area

The editor area is where we’ll probably be spending most of our time! This is where all the coding, configuration and user interface building happens.

The Editor Area changes depending on what file you have selected.

If you have a Swift file selected, it’ll show you the code editor like below. However, if you have a user interface file (like a Storyboard) selected, then it’ll show you Interface Builder which is a visual editor for your user interface. Later in this article, I’ll talk more about Interface Builder.

Let’s go through the Editor Area in the context of editing code files first.

Writing Code

Click on a Swift file from the Project Navigator and you’ll see something like this:

Xcode editor area
Xcode code editor area

If you want to show line numbers in the gutter to the left of the editor, you can enable line numbers in the Xcode preferences. The Dark theme can also be enabled in the preferences.

Aside from that, you write code in the big text editing area!

Let’s go through some handy tips to make your code writing experience more enjoyable:

Navigation and Breadcrumb

There are these little back and forward arrows in the upper left corner of the editor area. Unfortunately these arrows aren’t labeled in the trusty Xcode interface diagram at the beginning of this article so I’ll call them “Xcode back and forward arrows” and show you an image of them here:

Xcode breadcrumb and navigation bar
Xcode breadcrumb and navigation bar

These guys are actually pretty useful. They act like the back and forward buttons on your browser and they let you navigate to previously viewed files.

Another way to quickly get to the file you need is to use the Jump Bar. Click any segment of the Breadcrumb and it’ll show you a menu of files or groups that you can select at that hierarchy level.

The jump bar allows you to quickly drill down through your groups and find the file you need.

Click a segment of the breadcrumb to access other files and folders
Click a segment of the breadcrumb to access other files and folders

If you click the tail segment of the jump bar (which is the current file you’re looking at), it will open up a menu showing you all the methods in the file to show give you an overview of what methods are in that file and to allow you to jump to a specific method.

See an outline of the file and quickly jump to specific methods or sections
See an outline of the file and quickly jump to specific methods or sections

Finding and replacing within the file

Just hit Command-F to bring up a search popup in the upper right corner that will look for whatever you type in within the current file. This is also a great way to jump to various areas of your file. You can also use this popup to do replacements within your file.

Jumping to definitions

If you’re looking at some code and you see a classname that you want to jump to the definition of, you can hold down Command and click the classname to quickly jump to that file.

Right click a method or class to jump to its definition
Right click a method or class to jump to its definition

The breakpoint gutter

A breakpoint is an Xcode debugging feature that lets you pause the execution of code at a specific line of code.

The breakpoint gutter (where the line numbers are) is where you can click to set breakpoints at certain lines of code.

When you set a breakpoint, you’ll see a blue indicator appear. To turn off a breakpoint, just click the blue indicator again and it will dim out.

Xcode breakpoints
Xcode breakpoints

If you want to completely remove the breakpoint, you can click and drag the blue indicator off of the breakpoint gutter.

To view a list of all the breakpoints that are set in your project, there’s a “breakpoint navigator” tab in the Navigator area.

There’s also a global toggle to turn breakpoints on or off at the top of the editor area which we’ll see when we review the toolbar.

Don’t worry if you can’t remember everything right now. We’ll be working with all of these areas and when you start coding, this will all become second nature to you after a week.

Configuring Xcode project properties

The root node of the project navigator is your Xcode project file (indicated by the blue icon). If you click that, the project properties will open in the editor area.

Xcode project configuration and properties
Xcode project configuration and properties

You’ll visit the project properties screen quite a bit during the process of building your app. In this screen, you can configure things like:

  • Set the name of your app
  • The bundle identifier (your unique ID for the app)
  • Allow your app to work on multiple device orientations
  • Set the version of your app
  • Set the minimum required iOS version that your app can be install on
  • Add additional Apple frameworks and libraries
  • Indicate your code signing options which are mandatory for submitting your app to the App Store (if you have code signing errors, this is where you’d fix it!)
  • There’s a lot more!

Chapter 6

Build your user interface
(Storyboards or SwiftUI)

Xcode 11 brings two different ways of building the user interface (UI) for your app: Storyboards or SwiftUI.

When you create a new Xcode project, you’ll see a dropdown to choose one of these two options:

Xcode new project select a user interface option
Xcode new project select a user interface option

Storyboards are interfaces built with visual drag and drop in the Editor Area using Interface Builder.

Xcode project using storyboards
Xcode project using storyboards

SwiftUI was released in late September 2019 as a new way to build user interfaces by writing code. Xcode 11 has a special Preview Canvas pane that shows your user interface change in real time as you write the code to modify your user interface.

Should you use Storyboards or SwiftUI?

As a beginner, most of the tutorials you’ll find on the internet right now will based around Storyboards and UIKit since SwiftUI was just released. Most of my tutorials are based on Storyboards because it was the easiest way for beginners to grasp.

However, since Apple is moving forward with SwiftUI, it’s a better investment for the future but at the present moment, you’ll be limited with the amount of help and educational content you can find on it. I’ve written a SwiftUI tutorial so check that out if you want to move forward with that!

In this Xcode tutorial however, I’ll show you how to work with both options inside the Xcode Editor Area.

How to use Storyboards and Interface Builder

If you chose Storyboards as your UI building option when you created the Xcode project, then your project will have a file called Main.Storyboard.

Click this file and the Editor Area will change to the visual UI designer known as Interface Builder.

Xcode interface builder
Interface Builder

The Object Library

The Object Library is a pane where you can search for user interface elements from UIKit. These elements are things like buttons, sliders, labels and textfields.

You can drag and drop them onto the view but in order to size and position them, you need to use the Auto Layout system.

Adding Auto Layout constraints

Auto Layout is a system to arrange and size the elements on the view based on what rules (known as “Constraints”) you add to the elements.

For example, you might add a constraint saying that an element should be 20pt below the element above it. I have an introduction video to the Xcode Auto Layout system here:

With enough constraints in place, the Auto Layout system has enough information to lay out the user interface. However, having too many constraints may result in conflicts where two or more constraints have opposing demands. In this case, Xcode will notify you of the error and you’ll have to fix it.

To add constraints, use these buttons in the lower right corner of Interface Builder:

Adding Auto Layout constraints in Xcode
Adding Auto Layout constraints in Xcode

The Document Outline

The Document Outline is the skinny panel in between the Navigator Area and Editor Area. It only shows up when you’re looking at an Interface Builder file like the Storyboard.

It’s a very important pane because it shows you the visual hierarchy of all the elements that you’ve added to the view. It also lists all of the Auto Layout constraints you’ve added.

Document outline shows the elements in your view
Document outline shows the elements in your view

The visibility of the Document Outline can also be to toggled with this small button in the lower left corner of Interface Builder:

This tiny button toggles the visibility of the document outline
This tiny button toggles the visibility of the document outline

Assistant Editor

The Assistant Editor view which will show you the accompanying file to the file you’re currently looking at. It looks like a two pane view.

If you’re working with Storyboards, the Assistant Editor will be helpful for connecting user interface elements from the Storyboard view to the code file so that you can manipulate those elements via code.

For example, if you’re looking at a view in the Storyboard, the right pane will show you the linked class file for that view. Each pane also has independent jump bars, so you can also use that to change what file each pane is displaying.

The Assistant Editor is useful for connecting elements in your storyboard to your code
The Assistant Editor is useful for connecting elements in your storyboard to your code

To open the Assistant Editor, you can go into the Editor menu and choose Assistant.

Open the Assistant Editor
Open the Assistant Editor

For more practice using Storyboards, check out my beginner series on YouTube.

How to use SwiftUI and the Preview Canvas

If you created your Xcode project choosing SwiftUI for your user interface option then you won’t get a Main.Storyboard file but you’ll see a ContentView.swift file instead. This file is where you’ll build your first SwiftUI user interface.

The ContentView.swift is where your UI code is
The ContentView.swift is where your UI code is

The Preview Canvas

The canvas is a pane beside your code editor where you’ll see a live preview of your user interface.

Xcode Preview Canvas
The Xcode SwiftUI Preview Canvas

If you don’t see it, go to the Editor menu and select Canvas. Note that it needs at least macOS 10.15 to run. If you don’t have that, then you can still launch your app in the iOS Simulator to see the UI of your app.

Show the canvas pane in the Editor Area if it's hidden
Show the canvas pane in the Editor Area if it’s hidden

Using the Object Library for SwiftUI

The Object Library shows you a list of SwiftUI elements you can add to your UI. You can search for what you need and then drag and drop it into the code editor and it’ll generate the code for you.

SwiftUI Object Library
The SwiftUI Object Library

We’re not going to dive deeper into how to build UIs with SwiftUI since it’s a lot of code writing and this is a tutorial for how to use Xcode. If you’re interested in learning how to use SwiftUI, check out my SwiftUI tutorials on YouTube.

Chapter 7

Configure elements with the Utility Area

The Xcode utility area as a variety of Inspectors to view details about the file, element or piece of code that you’re looking at.

In this chapter, we’ll go through a few scenarios of how you’ll use the various inspectors.

Xcode utility area
Xcode Utility Area

The File Inspector

The File Inspector is the first tab in the Utility Area and it shows details about the current highlighted file in the File Navigator.

Information such as the physical location of where the file is on your hard drive and other file properties:

The Xcode file inspector
The file inspector

The Quick Help Inspector

The Quick Help Inspector shows you documentation about the method, class or keyword that your typing cursor is currently on.

This is very useful because you don’t have to launch the developer documentation if you’re looking for some quick information about how to use that piece of code.

The quick help inspector
The quick help inspector

Suffice to say, this inspector will draw a blank unless your typing cursor is in the code editor over a valid method, class or keyword.

The Attributes Inspector and Size Inspector

These inspectors will only show up as tabs in the Utility Area when you’ve selected a user interface element in the Storyboard.

These two inspectors allow you to customize the element.

Xcode attributes inspector
The Attributes Inspector
The size inspector
The Size Inspector

Chapter 8

Run and build your project using the Toolbar

We’ve talked about some of the buttons on this tool bar already. Let’s start from the left.

Xcode toolbar
The Xcode Toolbar

Building and running your Xcode project

The left-most button is the run button. This will build and run your application and launch your app in the iOS Simulator. The button beside it will stop the execution of your application and return you to Xcode.

If you click and hold down the Run button, you’ll get more options to run your app:

Build and run your project
Build and run your project

Test to run your unit tests if you have them in your project.

Profile to measure various aspects of your application such as performance, memory usage and more.

Analyze to let Xcode analyze your code and check for potential leaks or bad practices.

Selecting an iOS Simulator to test your app on

The dropdown beside the Stop button indicates which build target you want to run (your can run an Apple Watch target too) and you can also choose if you want to run it under the iPhone or iPad simulators (or different version if you have them installed). The selection “iOS device” is to run your app on your device if you have it plugged in and properly provisioned (which needs a whole tutorial in itself!).

Choose a target simulator to run your app on
Choose a target simulator to run your app on

The Xcode Status Bar

The status bar will show you what Xcode is currently doing. You’ll also see little indicators for errors and warnings if they exist in your project.

Xcode status bar
Xcode status bar

The Object Library and hiding/showing panes

And finally in the far right side of the toolbar, we have the Library button (which we’ve talked about in the user interface section of this guide), Code Review button (used to review code changes if you’re using source control) and buttons to toggle various panels on or off.

Xcode toggle view buttons

Chapter 9

Test and fix bugs with the Debug Console

The debug area will show you console output and the state of various variables when you run your application.

Xcode debug area

You’ll be using this a lot while debugging your code and trying to figure out why things aren’t working out the way you expect them to!

If you’d like to learn how to debug your code using Xcode debugger tools, check out my video tutorial here:

Chapter 10

Run your app on the iOS Simulator
(or your own device)

Xcode 11 comes bundled with a wonderful iOS Simulator for you to test your application on.

In fact, you can use the iOS simulator for most of your development and then find a device to test on when you’re nearly done.

You’ll find simulators for all of the latest Apple Devices.

The iOS Simulator that comes with Xcode
The iOS Simulator that comes with Xcode

You can actually do a lot with the Xcode simulator including:

  • Device rotation
  • Simulating various GPS coordinates
  • Device shake
  • Simulating low memory scenarios

If you want to test various network or low bandwidth conditions, there’s a tool called Charles Proxy that works brilliantly. I’ve written a Charles Proxy Tutorial that you can read.

How do you install an app on an iOS device?

I have a detailed guide on how to deploy your app on an iOS device.

4 steps to install your app on a device:

  1. When you’re ready to test on a real device, you can simply plug it in via USB.
  2. You’ll see a prompt on your phone asking if you want to trust this computer. Tap on “Yes”.
  3. Xcode will ask if you want to use this device for development. Tap on “Yes”.
  4. Then you’ll see your device in the list of devices you can deploy your app on (it’ll sit above all the simulators)
Deploying your app on your device
Deploying your app on your device

Chapter 11

Learn to code with Xcode Playgrounds

An Xcode Playground is a light weight editor for you to try out some code. It’s not a full-fledged Xcode project and it isn’t intended to be used for building an app.

An Xcode playground
An Xcode playground

Playgrounds are great as a teaching tool, learning tool or for experimentation.

Note: There’s also an educational iPad app that Apple released called “Swift Playgrounds“. Don’t confuse that with what we’re talking about here.

To create a new Xcode Playground, go up to the menu File, New, then Playground.

Start a new Xcode playground
Start a new Xcode playground

For more information on how to use Xcode Playgrounds, check out this WWDC video.

Chapter 12

Submit your app with the Xcode Organizer

If you go up to the Window menu, you’ll find a menu item called “Organizer“.

Opening the Xcode Organizer
Opening the Xcode Organizer

This brings up a separate window where you can do various activities related to your app in the App Store. We’ll go through these various activities in this chapter.

Xcode Organizer
The Xcode Organizer

Archives

An archive is what Xcode calls a build of your app. When you’re ready to submit your app to the App Store, you create an archive which is all of your code and resource files into one neat little bundle.

All of your archives are listed in the Archives section of the Organizer.

Selecting one of your archives will give you an option to do various things with it, including sending it to the App Store. Check out my guide on how to submit your app using App Store Connect when you’re ready.

Crashes, Energy, Metrics

These three sections in the Organizer will show you various metrics collected from your app being used by real users.

This information is really valuable to use for improving your app in regards to making it more robust (less crashing) and more efficient (using less resources)

Conclusion

Where to go from here?

In this Xcode tutorial, you’ve learned about the various parts of the IDE and how to use Xcode for writing code and building user interfaces.

What’s Next?

Ready to get your hands dirty in Xcode and build something? Want to learn Swift programming too?

Here are some of my resources:

Were you able to learn how to use Xcode with this tutorial?

If this guide helped you, please let me know by leaving a quick comment below. I love hearing from my readers and I appreciate that you’re learning with me. Talk soon!

Table of contents

    Get started for free

    Join over 2,000+ students actively learning with CodeWithChris
    345 Shares
    Share
    Tweet
    Pin
    Share
    Buffer