All right. 1
So to get started, 2
we're, first, going to look at this new feature that we get in iOS 13 which is to enable our app to adapt 3
to dark mode. 4
And we're also going to be looking at how to use vector assets like PDX which scale automatically inside 5
our app. 6
So here's the starting project that I've cloned. 7
And the first thing you should do is go ahead and check out our Main.storyboard. 8
So here we've only got one screen and it's linked up to our file code WeatherViewController.swift 9
and that's the file that's going to be controlling the screen. 10
Now, you'll notice that a lot of our IP outlets are already linked. 11
So I've already linked the conditionImageView, the temperatureLabel, as well as the cityLabel for 12
you. 13
And one thing to point out here is that this image view, the image that we're using in it is from something 14
called SF Symbols. 15
Now, SF Symbols is something that we got new as of iOS 13. 16
So if you're creating an app that's targeting users who have iOS 13 and later, then you'll be able to 17
use it in your app. 18
And it's got over 1,500 symbols and images that the Apple designers have created for you to be able to 19
freely use within your apps. 20
And if you download the SF Symbols app, then you'll be able to browse through all of the symbols in 21
here. 22
Now, inside this set of symbols, they've got a whole bunch of symbols that represent all sorts of different 23
weather conditions. 24
That's what we're going to be using to populate our conditionImageView. So for example, if inside the 25
SF Symbol browser, we had our eye on the cloud.rain symbol, 26
then we could go into our app, select our image view, and you can either click on the dropdown to scroll through 27
all of the images that are in SF symbols, 28
Alternatively, we can simply just provide the name that we found over here which was cloud.rain. 29
So once I put that in there, you'll see that it's automatically scaled fully vectorized and it will 30
look good on all sizes without you having to do anything yourself. 31
And now that I've got the clouds and rain symbol, it looks a little bit more befitting of London weather. 32
And the other really exciting thing that we get is if you take a look inside the Size Inspector, you'll 33
notice that there's this part which we haven't really used much yet. 34
We've used the Size Inspector for devices for different orientation to see how it would look in our 35
Interface Builder. 36
But we've never used the interface style. 37
Now, let me show you what happens if I switch to the dark style. 38
You can have certain components on the screen that adapt automatically when the user changes to dark mode. 39
What do I mean by dark mode? 40
Well, let me show you dark mode in Xcode itself. 41
Notice how if you go into Xcode preferences, you can change the appearance to dark mode and everything 42
becomes black and it's a lot nicer in your eyes when you're working at night. 43
Now that can be set system-wide in your Mac by going to the System Preferences and General to change 44
to dark mode, 45
and as of iOS 13, users will also be able to set their iPhones to have the dark appearance system 46
wide. 47
So once they switch to dark mod, then we want to design for their experience in dark mode. 48
So how do we do that? 49
Well, when we're setting the colors for our labels or for the tint which sets the SF symbols colors, 50
we can set it so that it uses one of the system colors, rather than just a custom color. 51
So you can see that if I select a custom color here by, say, using one of these random crayons, 52
well, that looks good for this screen. It actually looks terrible. But just beside the point. If we switch 53
to dark mode, you'll see that it doesn't change at all. 54
But instead if I've used one of the system colors, System Pink, System Orange, or the colors that are 55
signed for different roles, say, for the label color is usually black in the normal mode, and then it 56
becomes white when I switch to dark mode. 57
So be sure to have a read on the documentation around dark mode and supporting dark mode in your apps. 58
But I want to show you a couple of cool things that you can do. Firstly, we've already seen that with 59
these colors, as long as we set them to a System Color that we find here, not things like dark gray or 60
black color, these colors actually stay as what you've specified. 61
If it says white color, then it's going to be white color. 62
But instead, we want to change to label color for the labels, so that it adapts automatically. 63
But what if we wanted a custom color? 64
Let's say that if I select my cloud and I decide to change the tint of this image to a custom color 65
and I'm going to base it off one which I select using the color dropper tool. 66
So I want it to match my user interface, so I'm going to select that dark green which looks really nice 67
here. 68
But notice how because it's a custom color, it doesn't adapt anymore. Unless we go into our Assets.xcassets, 69
click on the plus button here, and add a new color set. 70
So here's our new color set and we're going to change the appearances to include any light and dark. 71
And now when we select each of these squares, we get to define a custom color. 72
So let's go back to our Main.storyboard and this color that I selected here, 73
this custom color, 74
I want to be able to save it into my palette here. 75
So once you use the color dropper tool to get a hold of the color, you can click and drag that color 76
into your color palettes to save it to use elsewhere or for later. 77
So now if I go back to my Assets.xcssets and I select on my any appearance and light appearance, 78
I'm going to change that to that color that I selected earlier on. 79
So when I'm in light mode, I'm going to choose the dark green. And when I'm in dark mode, I'm going to 80
keep it as white. 81
So now all I have to do is just to give this color set a name and I'm going to call it my weatherColor., 82
and then hit enter. 83
Now, if I go back to my Main.storyboard and I select this image view, I'm going to change the tint 84
from my custom color that I created just now to this brand-new named color that I've created called 85
weatherColor. 86
So now that I've selected that, when I switched to dark mode, you can see that it changes to white. But 87
we don't have to stop there, 88
we can do even more. 89
So notice how we've included two images here. 90
dark_background.pdf and light_background.pdf. 91
Wouldn't it be nice to change the background image depending on which mode the user is in, light or dark? 92
Well, we can do that quite easily. 93
Now, the reason why we haven't added these into the assets folder is because I wanted to use it to show 94
you that you can also use these vector images or PDF images because up till now, we've only been using 95
scalar images like PNGs or JPEGs. 96
And the problem with these images is if I go ahead and show you this background image, which is background.png, 97
if I go ahead and zoom into it, you can see that very soon it becomes pixilated, right? 98
Especially, when it's displayed in a large screen. 99
So how can we fix that? 100
Well, that's the reason why we have these 3x. 2x, add 1x, and 1x image sizes, so that we can create the 101
images in all the different sizes that are needed by the app. 102
But there's another way of doing this. 103
We could also simply use vector images. With vector images, 104
when you zoom in on them, they don't actually pixelate, because it uses math to work out where each 105
of these lines need to go, and how they should appear. 106
So they always stay sharp no matter how much you zoom into it. 107
So in order to use these images, we're going to replace our background image which currently is a PNG 108
image file. 109
So I'm going to go ahead and click on this and delete it. And instead, I want to use my light_background.pdf. 110
So I'm simply going to click and drag it into place. 111
And now because I'm using a vector image, I have to check this checkbox to say that it should be resized 112
to preserve my vector data. And then I'm going to change the scales from individual scales to a single 113
scale. Because now that I have a vector image, I don't need one 1x, 2x, and 3x. It can be resized using 114
this vector image for all the different sizes. 115
Now, in addition, I want to have a different background image depending on whether if it's in light mode 116
or dark mode. 117
So if you go to the appearances dropdown here, change to any light and dark. 118
We can now specify a different image. 119
So for the light appearance, I'm going to have this one. So I can just copy and paste it into the box. 120
And then for the dark appearance, I'm going to drag on this dark_background.pdf. And now, you can go 121
ahead and delete these two PDFs from here. 122
The only reason why we included that, too, was just to be able to show you that you can simply drag it 123
to these slots. If you had it in your finder or your downloads or another folder, it would work exactly 124
the same way. 125
Now that we've got our background for light and dark, let's go and check it out. 126
So in our Main.storyboard, when we're in the light interface style, you can see that it's the trees 127
and mountain, and shen I change to the dark interface style, 128
It becomes mountains and moon and stars and clouds. 129
So you can see that it looks completely different now. 130
And that's kind of neat. 131
So if you zoom in on the view controller in Main.storyboard, you'll wonder to yourself, "Hey, didn't 132
Angela say that this was meant to be a vector and it was not meant to look blurry?" 133
Well, inside the Main.storyboard, they have a fixed-size image that they've chosen. 134
But as soon as you run this on your simulator or on a physical device, no matter what size phone you 135
have or iPad, the background is going to remain sharp. 136
So if you compare this image that I've got running in my simulator versus the one that's at about the same 137
size in my Main.storyboard, 138
you can see the difference in sharpness. 139
So now that we've seen how to create dark-mode enabled apps and use vector assets inside our app, as 140
well as learning about the SF Symbols that we can use, well, ready to move on to the next lesson where 141
we're going to learn about the UITextField and be able to start giving our app some inputs.