Now that we've seen how to create and set up a brand new iOS project and we've landed inside Xcode, 1
it's time to get an overview of this piece of software that we'll be using to do all of the work of building 2
our iOS apps, including designing the app user interface, as well as programming the code for the 3
functionality of the app. 4
So the first thing you want to do if you haven't already is to expand your Xcode to take up as much 5
space as you have on your computer. 6
Now, I don't recommend going full screen because then it's harder to get access to the menu items and 7
it makes it difficult 8
drag and dropping files into our Xcode project as well. 9
So without having to go to full screen, make sure the Xcode window is as large as possible, and then 10
we're going to go on a guided tour of the Xcode software. 11
So the first place we're going to look at is the page that we land on when we first create an app, 12
which is the general tab here. 13
So you can always come back to the screen if you select your project, go to the target, 14
so this is your app, and then go to the general section. 15
And here we have bits of data that we've already entered, such as the display name and the bundle identifier 16
and you can change things such as the version. Now scrolling a little bit further down, 17
we've got information for how our app is going to be deployed. 18
So when it's run, where is it going to be running on? 19
So, for example, we can change the iOS version that we target and keeping in mind that this is going 20
to be the minimum version that we want to target. 21
So if we select iOS 13, then it means that anybody who has an iOS version that's above 13 will be able 22
to use our app and download it. 23
But if it's lower than that, then they won't be able to access it. 24
So depending on how far back you want to support, you would select a minimum target here. 25
And then we get to select whether our app should be able to run on iPad and iPhone or just the iPhone. 26
Now, later on, we'll take a look at Project Catalyst, which will allow us to run our app on Mac as 27
well. 28
But for now, let's just keep everything as the default. 29
And then let's take a look at where we get to select the device orientation. If you want your app to 30
be able to display in all four dimensions, 31
so when you turn the phone it should turn with you to show the app upside-down, landscape, 32
left, right, 33
then you have all these check boxes checked. 34
But if you want to limit it to only portrait or one particular landscape orientation, which you'll 35
see in a lot of games, then you can select the ones that you need. 36
But again, I'm going to leave it as the default. 37
Now, finally, you get to choose your status bar style, so whether if you want a white status bar or 38
a dark status bar and whether if you just simply want to hide the status bar. You can set those things 39
right there. 40
That's pretty much all for the settings page and some of these other tabs we'll explore as we build more 41
and more complex apps that might actually need us to go into some of these settings and tweak them around. 42
But in most cases, you'll be keeping these settings as the defaults and we'll be doing most of our important 43
work inside the swift files. 44
So these are your code files and the storyboard files, which are your design files. 45
So notice how they have different icons, depending on which type of file they are. 46
So if you see the little swift bird, that's a Swift programming file, and the design files have a yellow 47
icon like this. 48
So this is a good time to point out that usually the default layout of Xcode is split into four areas. 49
First, we've got the top status bar here, which kind of reminds me at least a little bit of things 50
like iTunes and other music players, because you have the play and stop button, you have the status 51
of your app and you have the selection for where you want to run your app. 52
Now, if you hit the play button, it's going to run your app onto whatever device you selected here. 53
And if you press stop, then obviously it just stops running the app. 54
Now, over here on the left hand side, we've got the navigator pane. 55
And inside each of these panes, there's further subdirectories because there are lots of little tab 56
bars. 57
Now, for most of these, I'm going to mention as they come up as we have a need for them. 58
But the most important one you'll always pretty much want selected is the project navigator here, the 59
one on the left most. 60
And this simply displays your project. 61
So if I open my project 62
inside the finder and I expand my project, my I am Rich, then you'll see that each of these files correspond 63
to what we see in Xcode, in our Project Navigator. Now, because it usually takes multiple files to 64
actually create a single app, 65
it's really handy when we can see all of them at a glance right here where we need them. 66
So when we need to go into our code, we can simply click onto the ViewController.swift, 67
if we need to go into our design, then we click on our main.storyboard. 68
Now the main.storyboard is where you'll be designing most of your app. 69
And here you get to access various components, things such as labels, buttons, all of the default 70
iOS components and you can simply drag and drop them onto the screen like so. 71
And once you have something on screen, then the right-hand pane becomes really handy. 72
The right hand pane are a bunch of inspectors. 73
So when you click on something in your design or in your code, you might be able to inspect certain 74
things about them. 75
Now, by default, you will usually see the attribute inspector selected, especially when you're designing 76
your app. 77
And this allows you to change various things about the components that you've selected. 78
For example, we can change the color, we can change the alignments, we can change whether if there's 79
text shadows and it's pretty much similar to any sort of other design program you might have come across 80
like Photoshop or Illustrator. 81
Now there's a couple of other tabs here. 82
One that's really useful is the size inspector, and this one simply tells you the positioning of our 83
component that's selected. 84
So in this case, it's 144 pixels from the left and 228 pixels from the top. 85
Next, we've got the width and height which is pretty self-explanatory, and we've got lots of other 86
inspectors as well, which we're pretty much going to leave as it is 87
but at the point where we need to use them, then I'll explain them in detail. 88
So now that you see we have a label on screen, you can see that this little pane becomes quite handy. 89
And this is what we call the document outline. 90
So it shows an outline of all the components that are in your design file. 91
So if you ever use any sort of design software, you'll probably understand this best if you think of 92
this as where the layers exist. 93
So if I had two labels, one on top of each other, then we'll be able to see them both as separate layers 94
inside our document outline. 95
Now, if you don't know what a layer is or if you never used Photoshop or Illustrator, it doesn't matter. 96
This is just where your components are listed. 97
And as you drag on different things, such as a button and a label or a slider, then you see them show 98
up. 99
And sometimes when your design has a lot of these components which are very close to each other, then 100
it's actually quite hard to select the right one that you need. 101
So it's much easier doing it inside here. 102
But if you don't like this taking up the extra space, then you can just pop it away using this little 103
button 104
here. And all of these panes can be toggled. 105
So the main toggles are for the three major panes; 106
so the right side pane is here, the left side pane and the bottom pane. 107
Now the bottom pane is called the debug area, 108
and this is where you get messages if your app crashes. 109
So this is the area that is pretty much just for the developer. 110
So while you're developing the app and you need to see what's going on with your app, then this is 111
where we'll be looking to and we'll be exploring that a lot within the course. 112
So if you want to get rid of these screens, then you can always use these toggles. 113
But if you prefer using shortcuts, so for example, to pop this bottom screen down, you can hold down 114
the command, the shift, and press the 'Y' key on your keyboard and you can toggle that. 115
And if you look inside the resources for this lesson, there you will find a list of shortcuts which 116
are commonly used with Xcode to speed up your workflow. 117
Now, a word of warning. 118
It does take a little bit of memorization if you want to go down this route and everything that you 119
can do with the keyboard shortcut, you can always do with the mouse. 120
So depending on what sort of person you are, you might want to choose what kind of path where you 121
want to go down; shortcuts or clicking with mouse. 122
So now I'm going to go ahead and delete everything that I have on screen, 123
I don't need it anymore, and I'm going to pop the bottom area away to give myself as much space as I 124
can. 125
And I'm going to go over to the ViewController.swift file 126
to take a look at it. Now, this is where most of your code will live. 127
So when you want to change the behavior of your app, then you're going to be writing some code right 128
here. 129
And notice, when we head over to the code file, then the inspector tabs, they actually change because 130
when you're in a code file, then you can't change, say, the color of your code or the size of your 131
code. 132
So it doesn't make sense to have a size inspector or to have the color menu dropdown. 133
But it does have other things that are related to the code files, such as if you want to change the 134
name of the code file or what type of file it is, then you might be doing it inside the inspector over 135
here as well. 136
So the right-hand pane is for changing certain properties of what's showing in the middle, 137
the left-hand pane is mostly used for navigating between different files. 138
Now, the last thing I want to show you is something to do with settings. 139
So if you head over to Xcode and go to preferences and you'll notice that in the general section you 140
can change the appearance of your Xcode version. So you can change it to the light mode which is what 141
I currently have, or the dark mode which you might prefer because it's easier on the eyes. 142
Now, you can also change the way that your code is being colored by going to the fonts and colors, 143
and there's a whole bunch of different themes that you can choose from. 144
So you can click through each of these and see what you prefer and land on whichever one you like. 145
But I'm going to be choosing the default light version. 146
And if you're a beginner to programming, then I recommend you choose the same theme as I have because 147
it means that all the keywords in your version of Xcode will be highlighted in the same color as mine 148
that you'll see in the videos 149
and it just makes it a little bit easier to keep up with what's going on in the lessons. 150
But if you're already a programmer and you have strong preferences as to what you like to see in your 151
color scheme, then feel free to change that here. 152
Now, more important than colors are actually the font sizes. 153
Now, I know from teaching a lot of students in class, they like to have really small fonts and I don't 154
know if it's because I'm going blind, but I find it really hard to read font sizes that are very small. 155
So if you have a font size that's this big, then it's really going to hurt your eyes after a few hours 156
of coding. 157
So make life easy for yourself. 158
Increase the font size so that you can actually see what's going on. 159
And the shortcut to do that is holding down command and hitting the minus key on the keyboard or the 160
plus key on the keyboard and adjust it to a point where you're happy and you can see quite easily. 161
For me, I'm going to keep that fun a little bit bigger than usual, just so that you can see it easily 162
if you're watching this on a phone or an iPad, but feel free to adjust yours as you see fit. 163
So that's pretty much the grand tour of Xcode. 164
Now, if you enjoyed the tour, then feel free to leave me a review. 165
But in the coming lessons, as we come across different parts of Xcode that we'll need to use, then 166
I'll introduce them to you individually as well. 167
And don't worry if all of this is a little bit overwhelming. 168
You can't remember which part was the navigator pane or the identity 169
inspector. 170
I'll always be showing you exactly where you need to go and what you need to do anyways. 171
Plus, if you head over to the resources for this lesson, you'll also find a map of Xcode. 172
So you'll be able to see the areas highlighted, say, the status area at the top, the inspector's area 173
on the right, and the navigator pane over here. 174
And it might just be worth getting used to some of those words that might be used quite frequently and 175
as well as for you to get used to the different areas of Xcode and their purpose. 176
But now that we've toured Xcode, it's time to actually do some work and build the design and the layout 177
of our app. 178
So that's what we're going to be doing in the lesson. 179
So I'll see you there.