Xcode – The IDE to build Apple Apps – XSTutorials

Xcode – The IDE to build Apple Apps

Overview

Xcode is the software issued by Apple for free on the Mac App Store to build applications for iOS, WatchOS, and macOS. Read this article to learn the basics of Xcode, its User Interface, commands, and features.

PLEASE NOTE: This tutorial has been written using XCode 10 and Swift 5

The User Interface

When you open Xcode and create a Single View Application, the window you get looks like this:

The Xcode window after new App creation

On the left side, there is the Navigator panel, where you can browse the files included in the project and do even more. Next to it, the Document outline panel which shows all Views and Controllers of your project. The middle area is the Editor one, and it shows the Storyboard, the interface where you’ll build your app’s design. On the right side, you can find the Inspectors panel, with all the necessary tools to adjust Views properties.

On the top-left corner, there is the Top Toolbar with Run and top app buttons, along with Scheme and Devices list dropdown menus. On the top-right corner, you can see the Objects Library button, the Editor buttons and the 3 buttons to show/hide the left, bottom, and right panels.

On the bottom, there is the button that shows/hides the list of available devices.

Let’s take a closer look at all the tools and options offered by Xcode, starting from this window.

The Navigator panel

The buttons of the Navigator toolbar show the following panels:

  1. The Project navigator
  2. The Source Control navigator
  3. The Symbol navigator
  4. The Find navigator
  5. The Issue navigator
  6. The Test navigator
  7. The Debug navigator
  8. The Breakpoint navigator
  9. The Report navigator
The Navigator toolbar

For the sake of tutorial, I’ll get deeper only on some of those tools, the most used ones. Let’s start from the Project navigator area. This panel shows all the files included in the Xcode project, so Swift files, folders, the Assets.xcassets folder, the Info.plist file and the Framework files that you may add – like third-party frameworks.

The Project navigator

When you need to navigate between files and folders, just select them and the central area will show their content.

The second panel I want to talk about is the Find navigator. Click on it to show a text field where you can search for any code or View inside your project.

The Find navigator

You can also replace text and code by clicking on “Find” and selecting Replace.

The Find/Replace function

The Issue navigator panel shows all the warnings and errors in your project, Xcode prints them while typing code, but also when your Run or Build your app, and it looks like this:

The Issue navigator

If you click on one of the rows in the issues list, the middle Editor area will show you the file where the selected error occurs, highlighting the wrong line of code.

All the remaining tools of the Navigator panel won’t be analyzed in this article, but if you want to get info about them you can always read the Official Xcode Documentation

The Editor area

This is the middle window where you’ll edit the code, the Storyboard or XIB design, the Info.plist and Assets images.

The Editor area (code)
Editor area (Assets folder)
Editor area (Storyboard)

The Editor area cannot be hidden, while the Navigator and Inspectors panels, and the Console can.

The Inspectors panel

The buttons of the Inspectors toolbar show the following panels:

  1. The File inspector
  2. The Quick Help inspector
  3. The Identity inspector
  4. The Attributes inspector
  5. The Size inspector
  6. The Connections inspector
The Inspectors toolbar

These tools get enabled when you select a View in the Storyboard. In this case, I’ve placed a UILabel in it so let’s explore all panels with it.

The File inspector shows the Identity and Type of your Xcode project and the list of Localizations for the Storyboard (in case you’ve added Localizable.string files to translate your app into other languages than English).

The File inspector

The Quick Help panel calls the official Documentation for the selected View and shows the basic info about it. It also includes the link to open the Developer Documentation in your browser.

The Quick Help inspector

The Identity inspector is the panel where you can assign a specific Swift file name to a View or ViewController. For instance, if you select a ViewController in the Storyboard and open the Identity inspector, you can see the Class and Module names. You can set a Storyboard ID as well in its relative field – that happens in case of Modal or Push calls between ViewControllers.

The Identity inspector

Going back to our selected UILabel, let’s open the Attributes inspector. Here’s where you can adjust many options about the selected View – like Text, Color, Font size, Background and Tint colors, etc. Each View has its own properties so the screenshot below shows UILabel‘s attributes, but UIImageView or UIButton views have other options.

The Attributes inspector

In the Size inspector, you can adjust width, height, X and Y positions and margins of your selected View. You can also use the Arrange dropdown button to center or fill a View’s bounds horizontally or vertically in a Container.

The Size inspector

If you open the Connections panel you’ll see all the Views that have been connected to your ViewController’s .swift file, as well as Segue, IBOutlet and IBAction connections. Select the Controller in the Storyboard to see all of its connections.

The Connections inspector

The Devices List panel

You can expand this panel by clicking on the View as: iPhone Xr button on the bottom of the screen. Then select a device to get its preview in the Storyboard. This feature may help while building a Universal app or to just rotate the Controller into Portrait or Landscape orientation.

The Devices List panel

The Document Outline panel

This area shows the hierarchy of the Views and ViewControllers present in the Storyboard. You can select them from this list, besides selecting Views directly in the Storyboard’s area, and delete them too. The Document Outline panel becomes helpful in case of many Controllers and Views placed in the Storyboard, for you to find them quickly. You can hide/show this panel with its button on the bottom-left corner of its area.

The Document Outline panel

The Top Toolbar

On the left side of the Top Toolbar there are the Run and Stop buttons – for you to test your application on the Simulator or a real device – the Scheme button – its dropdown menu allows you to manage the app’s scheme – and the Devices List button, where you can select what device you will use for tests.

The left side of the Top Toolbar

On the right side of the Top Toolbar, you can find the Object Library button – use it to find and drag a View into your Controller – the 3 buttons to show/hide the Standard, Assistance and Version editors, and the 3 buttons to show/hide the Navigator, Debug and Inspectors panels.

The right side of the Top Toolbar

The middle area displays the progress of your application – for instance while Cleaning of Building your project, or in case of issues or warnings.

The middle Toolbar’s area

Declare IBOutlets and IBActions

You always need to declare IBOutles or IBActions from your ViewControllers in the Storyboards to their relative Swift files. You can do that by clicking the Assistance editor button from the Top Toolbar when the Storyboard is open in the Editor area. This will split the Editor into 2 areas, showing the Storyboard on the left side and the code on the right side.

Split the Editor area

In case the Swift file on the right side won’t be the one you need for the selected ViewController, you can click the file navigation button on the top and select Automatic, then click on the right .switf file.

The files navigation bar

In order for you to connect (declare) an IBOutlet or an IBAction to your Swift file, hold the ctrl key, click and hold the left mouse button over the View or Button you want to connect and drag the mouse pointer in the Swift file on the right side. A blue line will show up and follow your mouse to the point where you’ll release your finger.

Connect a View or Action to a Swift file

When you release the mouse button and the ctrl key on your keyboard, a popup will appear. Type the name of your IBOutlet or IBAction and hit Enter (or click the small Connect button).

NOTE: If you’re connecting an IBOutlet to your Swift file, you must drag the blue line between the viewDidLoad() function and the Class name (for inatance, class ViewController: UIViewController {).
Instead, if you need to declare an IBAction from a Button, a Slider or any other View that can perform an Action, you must connect it inside the Class and outside any function – that’s because an IBAction is a function itself.

Connecting an IBOutlet to a Swift file
Connecting an IBAction to a Swift file

The Code’s Autocompletion

One of the best features of Xcode is the autocompletion, which occurs when you type some code in a Swift file. Xcode will popup a dropdown list when you start typing the name of a connected View, an existing function’s name, or a Delegate function’s name. You can then click on the desired option of the list and Xcode will complete the line of code for you based on your choice.

Autocompletion dropdown list while typing a View’s name
Autocompletion while typing a delegate function’s name

Embed a ViewController into a NavigationController

Many apps are based on Navigation Controllers, they allow you to push Controllers from left to right when you perform a Segue or an Action in the code. So in order for you to embed a ViewController into a NavigationController, select the Controller in the Storyboard, click Editor -> Embed in -> Navigation Controller.

Embedding a ViewController into a NavigationController

The result of this operation will look like this:

ViewController embedded into a NavigationController

Zooming the Storyboard

This function is very useful in case you have may Controllers in the Storyboard, or you’re working on a laptop with a 13″ or 15″ display. Click on the 100% button on the bottom of the Xcode window and select your desired zoom percentage.

You can also zoom the Storyboard by clicking the () or (+) buttons, or by holding the alt key and scrolling the mouse wheel.

Use the Zoom function in Xcode

How to Archive a project for App Store upload

When your project is done and you’ve carefully tested your application, making sure that everything works fine and it’s ready to be submitted to the App Store for review, you must Archive your project to open the Organizer. Select your real device from the Top Toolbar (or select the Generic iOS Device option), click Product ->Archive and wait for Xcode to archive your project and open the Organizer.

Archiving an Xcode project

When the archive process gets done, the Organizer will open up. You’ll use that to submit your app’s binary to the App Store Connect page of your app (read this tutorial to learn how to submit your app to the App Store).

The Organizer

Conclusion

That’s all for this tutorial, you have learned many aspects and common features of Xcode.

If you want to get deeper into Xcode’s functionalities and UI, check out the Official Documentation.

Hope you enjoyed this article, feel free to post comments about it. 

Buy me a coffee - XScoder - thanks for your support
Your support will be highly appreciated 😉