0
1
00:00:00,880 --> 00:00:01,180
All right.
1

2
00:00:01,210 --> 00:00:02,470
So to get started,
2

3
00:00:02,470 --> 00:00:09,970
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

4
00:00:10,000 --> 00:00:11,520
to dark mode.
4

5
00:00:11,620 --> 00:00:17,470
And we're also going to be looking at how to use vector assets like PDX which scale automatically inside
5

6
00:00:17,470 --> 00:00:19,190
our app.
6

7
00:00:19,370 --> 00:00:22,790
So here's the starting project that I've cloned.
7

8
00:00:22,970 --> 00:00:30,790
And the first thing you should do is go ahead and check out our Main.storyboard.
8

9
00:00:31,100 --> 00:00:38,420
So here we've only got one screen and it's linked up to our file code WeatherViewController.swift
9

10
00:00:39,030 --> 00:00:42,690
and that's the file that's going to be controlling the screen.
10

11
00:00:42,900 --> 00:00:46,890
Now, you'll notice that a lot of our IP outlets are already linked.
11

12
00:00:46,890 --> 00:00:52,770
So I've already linked the conditionImageView, the temperatureLabel, as well as the cityLabel for
12

13
00:00:52,770 --> 00:00:53,110
you.
13

14
00:00:53,910 --> 00:01:01,140
And one thing to point out here is that this image view, the image that we're using in it is from something
14

15
00:01:01,140 --> 00:01:03,600
called SF Symbols.
15

16
00:01:03,870 --> 00:01:08,720
Now, SF Symbols is something that we got new as of iOS 13.
16

17
00:01:08,730 --> 00:01:14,310
So if you're creating an app that's targeting users who have iOS 13 and later, then you'll be able to
17

18
00:01:14,310 --> 00:01:15,840
use it in your app.
18

19
00:01:16,080 --> 00:01:23,490
And it's got over 1,500 symbols and images that the Apple designers have created for you to be able to
19

20
00:01:23,490 --> 00:01:25,520
freely use within your apps.
20

21
00:01:25,650 --> 00:01:31,900
And if you download the SF Symbols app, then you'll be able to browse through all of the symbols in
21

22
00:01:31,900 --> 00:01:32,820
here.
22

23
00:01:32,830 --> 00:01:38,590
Now, inside this set of symbols, they've got a whole bunch of symbols that represent all sorts of different
23

24
00:01:38,680 --> 00:01:40,180
weather conditions.
24

25
00:01:40,180 --> 00:01:48,120
That's what we're going to be using to populate our conditionImageView. So for example, if inside the
25

26
00:01:48,120 --> 00:01:53,970
SF Symbol browser, we had our eye on the cloud.rain symbol,
26

27
00:01:53,970 --> 00:01:59,880
then we could go into our app, select our image view, and you can either click on the dropdown to scroll through
27

28
00:02:00,330 --> 00:02:03,210
all of the images that are in SF symbols,
28

29
00:02:03,210 --> 00:02:10,320
Alternatively, we can simply just provide the name that we found over here which was cloud.rain.
29

30
00:02:10,510 --> 00:02:16,270
So once I put that in there, you'll see that it's automatically scaled fully vectorized and it will
30

31
00:02:16,270 --> 00:02:21,410
look good on all sizes without you having to do anything yourself.
31

32
00:02:21,460 --> 00:02:26,830
And now that I've got the clouds and rain symbol, it looks a little bit more befitting of London weather.
32

33
00:02:27,550 --> 00:02:33,430
And the other really exciting thing that we get is if you take a look inside the Size Inspector, you'll
33

34
00:02:33,430 --> 00:02:37,220
notice that there's this part which we haven't really used much yet.
34

35
00:02:37,270 --> 00:02:43,600
We've used the Size Inspector for devices for different orientation to see how it would look in our
35

36
00:02:43,600 --> 00:02:44,580
Interface Builder.
36

37
00:02:44,980 --> 00:02:47,630
But we've never used the interface style.
37

38
00:02:47,650 --> 00:02:51,340
Now, let me show you what happens if I switch to the dark style.
38

39
00:02:51,340 --> 00:02:59,240
You can have certain components on the screen that adapt automatically when the user changes to dark mode.
39

40
00:02:59,290 --> 00:03:01,480
What do I mean by dark mode?
40

41
00:03:01,480 --> 00:03:05,440
Well, let me show you dark mode in Xcode itself.
41

42
00:03:05,440 --> 00:03:12,520
Notice how if you go into Xcode preferences, you can change the appearance to dark mode and everything
42

43
00:03:12,520 --> 00:03:17,860
becomes black and it's a lot nicer in your eyes when you're working at night.
43

44
00:03:17,890 --> 00:03:25,750
Now that can be set system-wide in your Mac by going to the System Preferences and General to change
44

45
00:03:25,810 --> 00:03:28,020
to dark mode,
45

46
00:03:28,210 --> 00:03:36,430
and as of iOS 13, users will also be able to set their iPhones to have the dark appearance system
46

47
00:03:36,430 --> 00:03:37,390
wide.
47

48
00:03:37,390 --> 00:03:44,430
So once they switch to dark mod, then we want to design for their experience in dark mode.
48

49
00:03:44,500 --> 00:03:46,800
So how do we do that?
49

50
00:03:47,130 --> 00:03:54,000
Well, when we're setting the colors for our labels or for the tint which sets the SF symbols colors,
50

51
00:03:54,480 --> 00:04:01,230
we can set it so that it uses one of the system colors, rather than just a custom color.
51

52
00:04:01,290 --> 00:04:07,880
So you can see that if I select a custom color here by, say, using one of these random crayons,
52

53
00:04:07,950 --> 00:04:14,820
well, that looks good for this screen. It actually looks terrible. But just beside the point. If we switch
53

54
00:04:14,820 --> 00:04:17,930
to dark mode, you'll see that it doesn't change at all.
54

55
00:04:18,780 --> 00:04:25,770
But instead if I've used one of the system colors, System Pink, System Orange, or the colors that are
55

56
00:04:25,770 --> 00:04:32,730
signed for different roles, say, for the label color is usually black in the normal mode, and then it
56

57
00:04:32,730 --> 00:04:37,320
becomes white when I switch to dark mode.
57

58
00:04:37,620 --> 00:04:45,960
So be sure to have a read on the documentation around dark mode and supporting dark mode in your apps.
58

59
00:04:45,960 --> 00:04:52,050
But I want to show you a couple of cool things that you can do. Firstly, we've already seen that with
59

60
00:04:52,050 --> 00:04:58,950
these colors, as long as we set them to a System Color that we find here, not things like dark gray or
60

61
00:04:58,950 --> 00:05:03,560
black color, these colors actually stay as what you've specified.
61

62
00:05:03,570 --> 00:05:06,120
If it says white color, then it's going to be white color.
62

63
00:05:06,300 --> 00:05:13,260
But instead, we want to change to label color for the labels, so that it adapts automatically.
63

64
00:05:13,260 --> 00:05:16,470
But what if we wanted a custom color?
64

65
00:05:16,710 --> 00:05:24,930
Let's say that if I select my cloud and I decide to change the tint of this image to a custom color
65

66
00:05:25,050 --> 00:05:29,790
and I'm going to base it off one which I select using the color dropper tool.
66

67
00:05:29,790 --> 00:05:34,860
So I want it to match my user interface, so I'm going to select that dark green which looks really nice
67

68
00:05:34,860 --> 00:05:35,100
here.
68

69
00:05:35,670 --> 00:05:42,330
But notice how because it's a custom color, it doesn't adapt anymore. Unless we go into our Assets.xcassets, 
69

70
00:05:42,330 --> 00:05:47,610
click on the plus button here, and add a new color set.
70

71
00:05:48,210 --> 00:05:55,530
So here's our new color set and we're going to change the appearances to include any light and dark.
71

72
00:05:55,800 --> 00:06:02,220
And now when we select each of these squares, we get to define a custom color.
72

73
00:06:02,370 --> 00:06:08,010
So let's go back to our Main.storyboard and this color that I selected here,
73

74
00:06:08,130 --> 00:06:09,320
this custom color,
74

75
00:06:09,750 --> 00:06:13,550
I want to be able to save it into my palette here.
75

76
00:06:13,560 --> 00:06:20,250
So once you use the color dropper tool to get a hold of the color, you can click and drag that color
76

77
00:06:20,280 --> 00:06:25,140
into your color palettes to save it to use elsewhere or for later.
77

78
00:06:25,140 --> 00:06:33,630
So now if I go back to my Assets.xcssets and I select on my any appearance and light appearance,
78

79
00:06:33,720 --> 00:06:38,430
I'm going to change that to that color that I selected earlier on.
79

80
00:06:38,430 --> 00:06:44,940
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

81
00:06:44,940 --> 00:06:46,620
keep it as white.
81

82
00:06:46,620 --> 00:06:53,670
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

83
00:06:54,420 --> 00:06:55,980
and then hit enter.
83

84
00:06:56,010 --> 00:07:03,030
Now, if I go back to my Main.storyboard and I select this image view, I'm going to change the tint
84

85
00:07:03,090 --> 00:07:09,740
from my custom color that I created just now to this brand-new named color that I've created called
85

86
00:07:09,750 --> 00:07:10,200
weatherColor.
86

87
00:07:10,830 --> 00:07:18,120
So now that I've selected that, when I switched to dark mode, you can see that it changes to white. But
87

88
00:07:18,300 --> 00:07:19,970
we don't have to stop there,
88

89
00:07:19,980 --> 00:07:22,490
we can do even more.
89

90
00:07:22,590 --> 00:07:25,530
So notice how we've included two images here.
90

91
00:07:25,560 --> 00:07:29,460
dark_background.pdf and light_background.pdf.
91

92
00:07:29,460 --> 00:07:35,750
Wouldn't it be nice to change the background image depending on which mode the user is in, light or dark?
92

93
00:07:35,790 --> 00:07:38,160
Well, we can do that quite easily.
93

94
00:07:38,160 --> 00:07:44,370
Now, the reason why we haven't added these into the assets folder is because I wanted to use it to show
94

95
00:07:44,370 --> 00:07:52,530
you that you can also use these vector images or PDF images because up till now, we've only been using
95

96
00:07:52,530 --> 00:07:55,950
scalar images like PNGs or JPEGs.
96

97
00:07:55,950 --> 00:08:02,700
And the problem with these images is if I go ahead and show you this background image, which is background.png,
97

98
00:08:02,700 --> 00:08:11,010
if I go ahead and zoom into it, you can see that very soon it becomes pixilated, right?
98

99
00:08:11,010 --> 00:08:13,990
Especially, when it's displayed in a large screen.
99

100
00:08:14,070 --> 00:08:16,080
So how can we fix that?
100

101
00:08:16,080 --> 00:08:22,350
Well, that's the reason why we have these 3x. 2x, add 1x, and 1x image sizes, so that we can create the
101

102
00:08:22,350 --> 00:08:26,310
images in all the different sizes that are needed by the app.
102

103
00:08:26,310 --> 00:08:28,930
But there's another way of doing this.
103

104
00:08:28,980 --> 00:08:32,960
We could also simply use vector images. With vector images,
104

105
00:08:32,970 --> 00:08:39,570
when you zoom in on them, they don't actually pixelate, because it uses math to work out where each
105

106
00:08:39,570 --> 00:08:43,260
of these lines need to go, and how they should appear.
106

107
00:08:43,260 --> 00:08:47,760
So they always stay sharp no matter how much you zoom into it.
107

108
00:08:47,950 --> 00:08:54,470
So in order to use these images, we're going to replace our background image which currently is a PNG
108

109
00:08:54,610 --> 00:08:55,550
image file.
109

110
00:08:55,630 --> 00:09:01,600
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

111
00:09:01,690 --> 00:09:06,380
So I'm simply going to click and drag it into place.
111

112
00:09:06,580 --> 00:09:13,720
And now because I'm using a vector image, I have to check this checkbox to say that it should be resized
112

113
00:09:13,810 --> 00:09:22,030
to preserve my vector data. And then I'm going to change the scales from individual scales to a single
113

114
00:09:22,030 --> 00:09:30,220
scale. Because now that I have a vector image, I don't need one 1x, 2x, and 3x. It can be resized using
114

115
00:09:30,220 --> 00:09:33,640
this vector image for all the different sizes.
115

116
00:09:33,640 --> 00:09:39,280
Now, in addition, I want to have a different background image depending on whether if it's in light mode
116

117
00:09:39,340 --> 00:09:40,630
or dark mode.
117

118
00:09:40,630 --> 00:09:45,910
So if you go to the appearances dropdown here, change to any light and dark.
118

119
00:09:46,000 --> 00:09:48,360
We can now specify a different image.
119

120
00:09:48,430 --> 00:09:54,430
So for the light appearance, I'm going to have this one. So I can just copy and paste it into the box.
120

121
00:09:55,030 --> 00:10:01,980
And then for the dark appearance, I'm going to drag on this dark_background.pdf. And now, you can go
121

122
00:10:01,980 --> 00:10:06,660
ahead and delete these two PDFs from here.
122

123
00:10:06,690 --> 00:10:12,000
The only reason why we included that, too, was just to be able to show you that you can simply drag it
123

124
00:10:12,000 --> 00:10:19,020
to these slots. If you had it in your finder or your downloads or another folder, it would work exactly
124

125
00:10:19,020 --> 00:10:20,710
the same way.
125

126
00:10:21,050 --> 00:10:25,580
Now that we've got our background for light and dark, let's go and check it out.
126

127
00:10:25,640 --> 00:10:31,310
So in our Main.storyboard, when we're in the light interface style, you can see that it's the trees
127

128
00:10:31,310 --> 00:10:35,460
and mountain, and shen I change to the dark interface style,
128

129
00:10:35,600 --> 00:10:40,220
It becomes mountains and moon and stars and clouds.
129

130
00:10:40,220 --> 00:10:43,410
So you can see that it looks completely different now.
130

131
00:10:43,580 --> 00:10:45,140
And that's kind of neat.
131

132
00:10:45,200 --> 00:10:52,340
So if you zoom in on the view controller in Main.storyboard, you'll wonder to yourself, "Hey, didn't
132

133
00:10:52,400 --> 00:10:56,360
Angela say that this was meant to be a vector and it was not meant to look blurry?"
133

134
00:10:56,870 --> 00:11:02,020
Well, inside the Main.storyboard, they have a fixed-size image that they've chosen.
134

135
00:11:02,150 --> 00:11:08,990
But as soon as you run this on your simulator or on a physical device, no matter what size phone you
135

136
00:11:08,990 --> 00:11:12,820
have or iPad, the background is going to remain sharp.
136

137
00:11:13,070 --> 00:11:18,320
So if you compare this image that I've got running in my simulator versus the one that's at about the same
137

138
00:11:18,320 --> 00:11:20,320
size in my Main.storyboard,
138

139
00:11:20,420 --> 00:11:23,940
you can see the difference in sharpness.
139

140
00:11:24,050 --> 00:11:30,230
So now that we've seen how to create dark-mode enabled apps and use vector assets inside our app, as
140

141
00:11:30,230 --> 00:11:35,590
well as learning about the SF Symbols that we can use, well, ready to move on to the next lesson where
141

142
00:11:35,590 --> 00:11:40,370
we're going to learn about the UITextField and be able to start giving our app some inputs.