7,664 reads

Introduction to Xcode 9

by Dejan AtanasovOctober 6th, 2017

Too Long; Didn't Read

Part of being a great software developer is mastering your <a href="https://en.wikipedia.org/wiki/Integrated_development_environment" target="_blank">IDE</a>. You will become more efficient in programming, just by knowing how your environment works. That's why I would like to dedicate some time around the new <a href="https://hackernoon.com/tagged/xcode" target="_blank">Xcode</a> 9. This is a perfect tutorial if you are a beginner in <a href="https://hackernoon.com/tagged/ios" target="_blank">iOS</a> Development. Let's start… 🚀

Companies Mentioned

featured image - Introduction to Xcode 9

Understand the basics of Xcode

Part of being a great software developer is mastering your IDE. You will become more efficient in programming, just by knowing how your environment works. That's why I would like to dedicate some time around the new Xcode 9. This is a perfect tutorial if you are a beginner in iOS Development. Let's start… 🚀

Left Sidebar

On the top left sidebar, we can see many tabs available. This is probably the most used area as it contains many key features that Xcode offers called navigators. I would start explaining them one by one (from left to right).

Project Navigator (⌘ + 1)- your file manager. Whatever you need to do with your files it's done here. This navigator enables you to add, remove, edit or group files. Always keep this tab in focus.
Source Control Navigator (⌘ + 2) - A super-useful navigator meant for source control. It has an integrated support for GitHub accounts, which enables you to manage your repositories directly from your sidebar, and push changes to the cloud without having to use other tools. This is only available from Xcode 9.
Symbol Navigator (⌘ + 3) - This navigator will enable you to quickly jump to a specific method or a property definition**.** Instead of going through your files to find the method you are looking for, just click on the file you need and then click the desired method or property definition. Useful for files that contain lots of lines of code. You can display the symbols in a hierarchical or flat list.
Find Navigator (⌘ + 4) - Something that I use quite often. This makes a global search for the given text and returns results that are matching. You can also include various filters in the search.
Issue Navigator (⌘ + 5) - It's a place that keeps all the errors and warnings that appeared as a result of your coding. Errors are shown with a red color, while warnings are yellow. It will provide you with a detailed log of what is going on. You can display Buildtime or Runtime issues.
Test Navigator (⌘ + 6) - Is used for running the written test cases. This navigator is a shortcut for your XCTest's.
**Debug Navigator (**⌘ + 7) - Whenever the app crashes, this tab gets automatically opened. It will provide you with exact lines where the app has stopped and provide you with a reason in the console. Also, you can find useful information about your app's Memory, CPU, Disk and Network consumption.
Breakpoint Navigator (⌘ + 8) - Another tab that I use a lot for debugging**.** From here, you can easily set breakpoints and monitor their activities. I really love how clean this feature is.
Report Navigator (⌘ + 9) - Control your continuous integration from here. You should create a bot, and it will provide you access to a detailed information about your bots and the integrations performed on the server.

Google Maps SDK for iOS using Swift 4 - The App Space_Many iOS apps use Google Maps. This is a very common feature, so I have decided to prepare an ultimate guide on Google…_theappspace.com

Right Sidebar

Moving on the other side of Xcode. On the right side, you can see another sidebar with various tabs. But, unlike the left sidebar, this one contains a different set of tabs (depending on your location). On this side, the tabs are called inspectors.

Swift/Objective-C File

If you click on a Swift/Objective-C file you will see the following tabs.

You will use these tabs to less than 10% of your projects, but let's cover them.

File Inspector - this inspector provides basic details and settings about the selected file. It's divided into three main sections.

Identity and Type - provides you with an information where the file is located in the directory and gives you a possibility to open it in Finder. Also, you can set the location of the file whether it should be an absolute or relative path.
Target Membership - if your file doesn't get recognized in the project, the first place you should search is here. This tells the project that the file belongs to its target. Make sure your target is always checked, otherwise the file won't be found.
Text Settings - Personally, I have never used this part. You can set up indentation and other text settings from here. These settings are only for the selected file.

2. Quick Help Inspector - provides you with a documentation for a selected class. For example, find a String class inside your file, and move the cursor to that word. A quick explanation about the class will appear.

Storyboard File

If you click on a .storyboard file, in the right corner you will see a new set of tabs.

File Inspector — this inspector contains the same details that I have explained above, just with a few new sections.

Interface Builder Document - enables the Auto Layout, Trait Variations, and Safe Area. Also, you can set the Global Tint color for the whole storyboard and decide if you want to use the selected UIViewController as a Launch Screen.
Localization - shows all your localization files. You can enable/disable languages that you want to appear in the storyboard.

2. Quick Help Inspector - same info as above.

3. Identity Inspector - controls the identity of the UIViewController. By identity we understand, assigning a custom class, providing a storyboard ID so you can access the view controller via code, and User Defined Runtime Attributes where you can add various styling properties, instead of adding them via code (example: layer.cornerRadius).

4. Attributes Inspector - this inspector is used for adjusting the properties of the selected object. Each object contains its own set of properties. For example, the UILabelcontains settings like adjusting text, text color, font, background color etc. You can also add your own properties, by using @IBInspectable.

5. Size Inspector - I think the name explains it all. Anything related to the sizing of the object can be found here. Despite the x, y, width and height values you can find the Auto Layout constraints, or Autoresizing if you aren't using Auto Layout.

6. Connections Inspector - used for communication between the code and the view controller using @IBOutlet and assigning actions via @IBAction.

I will go through the .xcassets file which can be found in any project. It's used for storing your assets.

Two of the three tabs are already familiar to you from the previous points above.

Attributes Inspector - from here, you can adjust the properties for the selected asset. Most common properties are image compression, rendering type, device support, scale (vector or individual) etc.

Header

Next on the list is the header. We are going a little bit above the left and right sidebar, at the very top of Xcode.

**Left Side**You can find actions like run and stop your project from building, managing your target's schemes, or picking and downloading a new simulator.

**Right Side**A place where you can apply different options to the editor. I would start explaining them from left to right.

Standard Editor - this control represents the default view of the editor.
Assistant Editor - By using the assistant editor, your coding area will split into two parts. The left side represents your file, and the right side represents only your method definitions. What it does is, it ignores the code written inside your methods, and just shows you the method definitions. Useful if your class contains lots of code.
Version Editor - Splits your coding area and adds a replica of your class which tells you what you have changed from the last commit. This is used for version control, providing you with a comparison of what was changed.

The next three icons that are located in the top right corner, represent the showing and hiding of the sidebars and the debug area. It is used if you lack space on your screen (i.e. working on a MacBook Pro 13" screen) and want to give more focus on the coding area. 🤓

Project Settings

We have finished exploring the coding area. Now let's proceed with something more complex. Something that doesn't involves code. We will go through the project settings. I am sure you have seen this screen before, so I will start explaining the tabs directly.👇 I will explain only the most used ones.

General

General - the name explains it all. Here, you can find settings that are general for the specific target.

Identity - controls the app name, bundle identifier, version number and build. number,
Signing - a section that handles the provisioning profiles. Basically, it signs the app for sending versions of the app for testing or production.
Deployment Info - from here, you can add minimal iOS version support, decide if the app is going to be Universal or only iPhone or only IPad, and add the default Storyboard file.
App Icons and Launch Images - assign app icon and splash screen assets.

Capabilities - contains switches with various services that you can use. By default, all the services are OFF and you need to activate what you need, by going to your App ID. So if you want to use Push Notifications, Background Services or In-App Purchases, make sure that the switch is set to ON.

Capabilities

3. Resource Tags - you can assign tags to resources, and they will all end up here. I have never used this feature, but if you want to find out more about it, you can check here.

4. Info - this tab shows the properties from your active .plist file. From here, you can add/edit/remove the property information.

5. Build Settings - the official Apple documentation explains this part well… "A build setting is a variable that contains information about how a particular aspect of a product’s build process should be performed. For example, the information in a build setting can specify which options Xcode passes to the compiler."This tab contains many settings that are related to the build process. From assigning provisioning profiles to adding directory paths for 3rd party libraries. Each target has its own Build Settings.

Build Settings

6. Build Phases - provides you a list of all your files that will be included in the compile. All your frameworks, assets, .swift files, storyboards will be shown here, with an option to add or remove. Also, there is a Run Script feature where you can add your own shell script.

7. Build Rules - Xcode gives you a possibility to write your own rules. If you got decent scripting skills you can write almost anything. For example, converting .css files into .c, or add formatting rules to the text inside the .rtf file.