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