Join Todd Perkins for an in-depth discussion in this video Understanding the Xcode interface, part of Programming for Non-Programmers: iOS 9 and Swift.
- View Offline
- Xcode is a complex application and the interface can be overwhelming, but if you think about how it's organized and you understand the layout, it's a lot easier to work with and it actually becomes pretty intuitive. So let's talk about how Xcode is laid out for you. At the top of the screen in Xcode, we have the toolbar, the toolbar has buttons for running your application, for stopping an application when it's running, for choosing which device you want to run on, whether you want to run on a simulator or a simulator for a different device, or your own device, information about your app status and build status, and then different views that you can work in.
So we have the Standard editor where we'd work on one file at a time, we have the Assistant editor where we can work on multiple files at a time, and then you have the Version editor, which we're not going to use in this course, but it's used for when you're working with a repository and you have different versions of files and you want to compare them. And then finally at the right side, we have the Navigator buttons. Navigator buttons show and hide various parts of the Xcode interface. If the icon is blue, that means it's showing, so if I click this one on the left you'll see that the Navigator disappears and then comes back, and if I click the one in the center, the debug area appears.
I click it again and it goes back, and the right shows or hides the utilities area. On the left side of the screen we have the Navigator. The Navigator has its own set of buttons that go to different navigators, whether you want to navigate through errors, navigate by searching through your code, navigate by looking at breakpoints, look at warnings, etc. The one we're going to be using for almost all the time in this course is the Project navigator. That's the folder icon which is the first one, all the way on the left in the Navigator.
The Project navigator, as you might guess by just looking at it, shows your project hierarchy based in what look like folders but are actually called groups. In Xcode, these yellow folder icons allow you to group your files together independent of how they're organized in your file system. When you create an Xcode project, Xcode creates a project file and a group of files and folders. If I tab over to Finder, you'll see my project folder right here.
So I have the first app folder and you can see First App right here, and then I have these five files and folders inside of there, but I see six files and folders inside of the First App group. So again, this is not a mirror of your file system, this is how Xcode organizes your files and you can actually group your files in Xcode however you'd like, again, independent of how they're organized in the file system. If you ever want to do that, you can click and then Shift click multiple files or Command click them if you want, right-click and then choose New Group from Selection, or you could just choose New Group and then just drag and drop files into the appropriate groups.
You can also expand and collapse groups by clicking the triangle icons next to the group name. Sometime you might open Xcode and see that your project is collapsed like this. That doesn't mean your files are missing, that just means you need to click the little arrow and then Xcode will show you your files that you're working with. The center of the screen is called the Editor. The Editor shows what you have currently selected in the project's navigator. When we open this, we are looking at the project settings, so when we single-click on the top line which is the name of our project, we're going to see settings for the project in the navigator, but if you click on a code file, again, you want to single-click because double-clicking will open up a new window, when we single-click we see the code file.
You can also click on the storyboard file which is a user interface file, and then we have asset files which organize our icons. And finally, info.plist which is a property list file, which contains properties for your application like the application's name and some general application settings like what features are enabled and so forth. The right side of the screen is called the Utilities area. Right now it doesn't look like much but this area has Quick Help, so if, for example, I select the code file ViewController.swift and then I click where it says UIViewController then I can see information about that class in the Quick Help area, including links that take me to the definitions of those parts of the code.
At the bottom of the Utilities area is the Library, and the Library has user interface elements that I can use when I'm developing my user interfaces. It also contains code snippets, media files in the Media Library, and File Templates, if we want to create a new file based on a certain template. So I'm going to click the Object Library button which is the circle with the square inside of it. The debug area, we'll get to later on when we start actually running code.
But for now, understand that Xcode has a toolbar at the top, the Navigator on the left which shows your project's hierarchy, the Editor in the middle which enables you to edit code and to work on the currently selected file, and the Utilities area on the right side which give you information and enables you to work with user interfaces.
If you find you'd like to learn more, see iOS App Development Essential Training, Foundations of Programming: Fundamentals, or any of the other programming courses in our library.
- Installing Xcode
- Creating an Xcode project
- Configuring the iOS Simulator
- Understanding variables
- Connecting visual objects to variables
- Understanding functions, methods, and selectors
- Connecting a button to a method
- Using conditional statements
- Setting up the user interface
- Connecting code elements to build an app