Xcode Windows, Files and Buttons

In this video, I’m going to familiarize you with how Xcode looks and what different panes and times are available in Xcode. So in the previous video, we talked about creating a new project. So let me just quickly create another one.

Project, uncheck notification, seen, and hit next. We have a newly created project. So in the left-hand side over here you have your file browser if this tab is selected. Let me just increase the size over here. In your file browser, it shows what files are available to use in your project. Where it doesn’t have the WatchKit app and WatchKit extension ahead of this text is where all the iOS application files lie.

So you can see that the app delegate– you can see the view controller. You can see all of the assets. This is where the pictures and icons lie. You can see your storyboard, where you can create your UI views, and the info p-list, which is for some capabilities and settings. So that is the iOS part.

If you click down, you’ll see the– again– a parallel storyboard, but for the Watch app. You can see, again, it’s similar to how iOS apps are structured. But it’s also available on the WatchKit side as well.

So you’ll see the assets of the p-list. And then when you click on the WatchKit extension folder, you’ll see, again, the similar files as you would see in iOS. But they are the Watch versions, the interface controller, the extension delegate, and, again, the assets file.

And then when you expand this, you’ll see products. So when you actually run and build your app, this is where all your products are outputted to. So this is for the iOS application. And then this is for the WatchKit application.

So on the left-hand side you’ll see your file browser. When you click here, that’s for version control. This is– it shows your hierarchy for all your classes. So this is for the iOS app delegate. This is for WatchKit.

Right here is a really handy tool. If you click on this magnifying glass icon, this lets you search anywhere in the project for any piece of code or any file that you want. This is really helpful when you’re working on a large project, and you want to find something quickly.

So let me just type in viewDidLoad. And it will find all occurrences of viewDidLoad in the entire file system for the project. And there are different options, too. You can choose case options.

Right here is the warnings and errors tab. So these– if you have any errors in your code during build time or runtime, they will pop up here. And if there are a lot of errors, this is really useful. Because you can just click something, and it will take you to the piece of code that’s actually causing the error. So this is helpful for finding errors in your project and debugging.

Right here this diamond shape is the test navigator. So if you are writing unit tests or any tests for your application, you can run the tests here and then view which ones failed and which ones passed.

Right here is for your debug session. So if you’re actually debugging your app– which we will talk about in a future video– you can see how much memory the application is using, how much storage is using, what network requests are going on. So a lot of useful statistics in this pane.

Over here it shows breakpoints that you set. So you can set breakpoints in your code. Again, a debugging video that I’m going to have in the future is going to talk about how you can use breakpoints. And you can view all your breakpoints. It’s really helpful for larger programs when you want to see exactly where you’ve left a breakpoint or disabled one.

And right here is– again, it shows your project groups and different types of report that you’ll get out of your projects for logs and which target we’re aiming for. So that’s what’s happening in the left-hand side pane.

So in the middle pane, as you saw from when I was clicking around, you could see that different things were popping up. This middle pane is where your code is going to lie. Yeah, this is where you will be typing all of your code, where you will be putting in breakpoints, viewing all your files. And a handy thing is, on top of this code pane, you can see exactly where the file and the method we are using is being called. So it shows you how deep in it navigates.

On the right-hand side, there are a few handy tools. So this tells you what’s happening with the file. This is called the file inspector. And then this is for help.

So if you want information on a method in Swift, the documentation for that method pops up. And this is really helpful when you want to know how a particular API works or anything that’s going on in these swift programming language or framework that you’re using. And again, you can toggle between these two using the question mark in the file icon.

Above this right-hand side pane is the assistant editor toggle. Now this is going to be essential when we’re actually developing views for our app. So if I click on the storyboard, we’ll see the view for the app.

But if we want to see the storyboard and the code associated with the view, we just click this icon right here. And it shows us our UI– our view– what the user sees, and then the code running behind it. And that works automatically if the automatic selection is selected.

And then again, we can go back to our normal view by clicking this icon over here. And then this is for version control. But we’re not using version control in this case.

And you can toggle. So if you have a smaller screen, you can hide or show any of these navigators and files. If you click on the bottom, you can see that on the right hand side is the log output and on the left hand side is the debugger. And we’ll be talking about the debugger in a future video.

So again, it’s just a simple toggle. And then down here you can enable or disable any of these. Yeah. And one more thing I wanted to go over was the objects pane.

So when you click on this icon right here, you can see all the available objects that you have to drag on to the view. So it’s right here. Just click that, and it enables or disables. And you can just drag an object, and it shows up right here. Yeah, that’s pretty much it.