The Xcode interface can be intimidating, but with a proper introduction, it can be quite intuitive. This video aims to explain the Xcode interface organization, and how the different areas of the interface change based on your settings.
- [Instructor] So, let's take a tour of the Xcode interface. The first thing I'm going to do is make the interface take up the full screen on my computer by clicking the Full Screen button. The first part I wanna talk about is the toolbar at the top of the screen. Toolbar allows you to run your application, stop a running application, select which simulator or device you want to run on, so you can use this dropdown for that, I'll click away and see information about the current running project.
If it's running, if it's stopped running, if it has errors or warnings et cetera. And then on the right side, you have this button to show code snippets, so you may need to reuse blocks of code, you could save them here and then search for them and drag them into your code. And then you have ways for organizing the interface to the right of that button. The first block of three buttons enables you to modify the editor which refers to the main working area in Xcode in the middle of the screen.
On the left you have the standard editor. The assistant editor splits the standard editor into two different editors. We're going to be using that a little bit in this course. We'll talk about that more later. Let's go back to the standard editor and finally here you have the version editor which we're not going to be using in this course and is used for source control. All the way on the right those three buttons deal with showing and hiding various parts of the screen. The button on the left shows and hides the navigator, so if it's blue, the navigator is showing, if it's not, the navigator is hidden.
The middle button hides the debug area and the right button hides the inspector's on the right side of the screen. So, let's go to the navigator now which is at the left edge of the screen. In the navigator you can view different navigators for your project by clicking these buttons in the toolbar at the top. For the most part, we're going to be sticking with the project navigator which is the button all the way on the left that looks like a folder. Using the project navigator, you control what's displayed in the editor.
You can see right now that My First Project is highlighted in the project navigator and in the editor I see Settings for My First Project. If you want to see a code file, then you can single click on a file and that file will appear in the editor, so we can look at ViewController.swift, Main.storyboard is a user interface file, so when you click on that, the editor updates to show the user interface for your application. And right now you can see that that's simply a blank white screen.
Finally, let's talk about the inspector area. That's on the right edge of the screen. This actually updates depending on what type of file you have selected in the project navigator. Since I'm looking at a storyboard file which is a user interface file, I can see settings for modifying user interface elements. If you look at the top in the inspector bar, you can click on the various buttons and depending on what you have selected, like if I select the screen right here, I'll see options for that.
So, I could change the background color, tint, et cetera. For now, I'm not going to do any of that though. I just wanna point out that this area on the right adjusts depending on which type of file you have selected and what's selected in the editor. Watch when I go back to a code file that the inspector only has two buttons. You can view information about the file or you can get quick help by selecting an object in your code and seeing how that code object works.
So, to review, Xcode is broken up into several different components. At the top you have the toolbar, the left you have the navigator, the right you have the inspector area and the center working area is called the editor.
- Installing and using Xcode
- Working with storyboards
- Working with UI objects and events
- Resizing objects and layouts dynamically
- Coding UI objects such as buttons
- Loading and displaying data in table views
- Testing your iOS app