0
1
00:00:00,240 --> 00:00:03,690
Must get better at Flappy Birds.
1

2
00:00:04,050 --> 00:00:10,030
Okay, I'm still not any good at this game. But what I do know about is how to create apps.
2

3
00:00:10,140 --> 00:00:15,770
So now that we've cloned our starting project, we're ready to continue building it out.
3

4
00:00:15,810 --> 00:00:21,620
So if we head into our Main.storyboard, we can get started building out the user interface.
4

5
00:00:21,750 --> 00:00:27,900
So I'm going to zoom out a little bit, so I can see my entire view controller. And the first thing we're
5

6
00:00:27,900 --> 00:00:35,520
gonna do is we're going to grab an Image view to cover the entire area of the app, so that we give our
6

7
00:00:35,520 --> 00:00:42,120
app a background image. As previously, we're gonna go to the object library up here and we're going to
7

8
00:00:42,120 --> 00:00:44,210
search for an Image View.
8

9
00:00:44,220 --> 00:00:50,850
Now, again, you can scroll through if you want or you can simply just search for it. But we're going to
9

10
00:00:50,850 --> 00:00:57,520
place it on the top right corner and we're going to drag the toggles so that it fills the entire screen.
10

11
00:00:58,080 --> 00:01:05,740
So, now we have an Image View which is going to act as the background. And in order to add an image into
11

12
00:01:05,760 --> 00:01:08,960
it, we, of course, have to change one of its properties.
12

13
00:01:09,120 --> 00:01:15,750
If you navigate into the Assets.xcassets folder, you can see we've already got this green background
13

14
00:01:15,810 --> 00:01:20,520
setup for you with the 1x, 2x, and 3x images.
14

15
00:01:20,520 --> 00:01:26,070
So we want to place this as our background for our app. In order to do that,
15

16
00:01:26,100 --> 00:01:31,020
we, of course, have to select our Image View, head over to our Attribute Inspector
16

17
00:01:31,020 --> 00:01:34,740
on the right and we're going to change one of its properties.
17

18
00:01:34,800 --> 00:01:39,870
We're not going to change its background color or anything else, but we want to change the image that's
18

19
00:01:39,870 --> 00:01:41,690
displayed in there.
19

20
00:01:41,910 --> 00:01:48,300
Given that we know our image is called green background, I can start typing for it, and it filters through
20

21
00:01:48,330 --> 00:01:52,200
all the possibilities until it lands on the one I want.
21

22
00:01:52,200 --> 00:01:57,570
Alternatively, in our case, given that we don't have all that many to choose from, you can simply click
22

23
00:01:57,570 --> 00:02:01,660
the dropdown button and find the one that we want.
23

24
00:02:01,740 --> 00:02:09,300
Now, when I first put that image in, you can see that it's not taking up the entire space that's available.
24

25
00:02:09,840 --> 00:02:14,550
In fact, because the original image that we have is a square,
25

26
00:02:14,640 --> 00:02:17,920
so it's a one to one aspect ratio image.
26

27
00:02:18,150 --> 00:02:25,200
Well, it's going to display itself like this because we have the content mode set to aspect fit.
27

28
00:02:25,650 --> 00:02:29,650
So, again, this is a property of the Image View.
28

29
00:02:29,910 --> 00:02:37,830
And if we want to get the image to cover the entire area, well, then we're either gonna have to stretch
29

30
00:02:37,830 --> 00:02:45,540
it in the vertical axis or we're going to have to increase the size of this so much so that it becomes
30

31
00:02:45,570 --> 00:02:46,500
a square
31

32
00:02:46,560 --> 00:02:51,180
that's about this large so that it covers the entire screen.
32

33
00:02:51,180 --> 00:02:53,880
Now, what's the difference between those two approaches?
33

34
00:02:53,880 --> 00:02:55,400
Well, let's see.
34

35
00:02:55,440 --> 00:03:03,090
So, firstly, if we choose Scale to Fill, it will stretch the image up and down until it fills the entire
35

36
00:03:03,090 --> 00:03:06,420
area which doesn't look so bad actually.
36

37
00:03:06,510 --> 00:03:12,160
But notice that if you zoom in, you can see that it looks a little bit stretched.
37

38
00:03:12,180 --> 00:03:19,740
Now, this background was sort of meant to evoke a sort of felt-ish kind of material like the material
38

39
00:03:19,740 --> 00:03:27,270
that you get in sort of casino tables because we have a dice rolling up. But it's now being stretched.
39

40
00:03:27,270 --> 00:03:30,200
And in this case, it's actually not so obvious.
40

41
00:03:30,210 --> 00:03:32,520
But let's have something that has a little bit of text.
41

42
00:03:32,520 --> 00:03:39,430
Say, this one, you can see clearly when these images scale to fill, it looks really weird and awful.
42

43
00:03:39,480 --> 00:03:43,800
So the other option that we have is the aspect fill.
43

44
00:03:43,920 --> 00:03:51,460
Now, this keeps the aspect ratio of the image while scaling it to fit the entire Image View.
44

45
00:03:51,930 --> 00:03:58,560
If we go back to our green background image, then you can see in this case, the felt stays as it is without
45

46
00:03:58,650 --> 00:04:00,510
changing its proportions.
46

47
00:04:00,540 --> 00:04:07,140
Essentially, these are the top three choices that we'll be choosing from in pretty much all cases. Aspect
47

48
00:04:07,150 --> 00:04:14,790
Fit where we keep the aspect ratio and make sure the entire image is visible, Scale to Fill which scales
48

49
00:04:14,790 --> 00:04:22,050
the image so that it fills the entire Image View, and Aspect Fill where it fills the entire Image View
49

50
00:04:22,290 --> 00:04:25,700
but keeps the aspect ratio of the image intact.
50

51
00:04:25,830 --> 00:04:30,590
So depending on the effect that you're going for, you might want to choose one of those.
51

52
00:04:30,930 --> 00:04:36,480
And in this case, it really doesn't matter whether if you choose Scale to Fill or Aspect to Fill as long
52

53
00:04:36,480 --> 00:04:39,910
as the entire background is covered, then it's good enough.
53

54
00:04:40,020 --> 00:04:40,280
All right.
54

55
00:04:40,310 --> 00:04:47,340
So the next thing we want to do is we want to be able to place that image, the Dicee logo somewhere near
55

56
00:04:47,340 --> 00:04:48,750
the top of the app.
56

57
00:04:48,870 --> 00:04:56,070
So as a challenge, I want you to head into the object library and use an Image View to put that logo
57

58
00:04:56,460 --> 00:04:59,110
into the upper third of the app.
58

59
00:04:59,120 --> 00:05:04,640
So pause the video and try that now. Okay, so this is gonna be pretty easy.
59

60
00:05:04,660 --> 00:05:11,530
We're gonna press the plus button and either search or scroll to find an Image View and drag it onto
60

61
00:05:11,560 --> 00:05:19,480
the screen, and then in the image property setting for this Image View, I'm gonna change it to that Dicee
61

62
00:05:19,480 --> 00:05:20,950
logo image.
62

63
00:05:20,950 --> 00:05:21,280
Brilliant.
63

64
00:05:21,280 --> 00:05:30,000
So now we have our logo inside an Image View near the upper third of our app. The next challenge is to
64

65
00:05:30,030 --> 00:05:31,620
put the first dice,
65

66
00:05:31,620 --> 00:05:39,210
DiceOne to show up somewhere near the middle of the app on the left. And I want you to change its size
66

67
00:05:39,300 --> 00:05:43,200
so that it's 120 x 120 points.
67

68
00:05:43,230 --> 00:05:46,000
So it should be a square roughly about this size.
68

69
00:05:46,080 --> 00:05:47,700
Pause the video and give that a go.
69

70
00:05:48,780 --> 00:05:49,130
Okay.
70

71
00:05:49,140 --> 00:05:53,520
So, again, as before, we need an Image View to display an image
71

72
00:05:53,700 --> 00:05:58,260
and we're going to choose the image that is the DiceOne image.
72

73
00:05:58,260 --> 00:06:03,120
So that's going in there. But our Image View at the moment is a rectangle.
73

74
00:06:03,120 --> 00:06:05,800
So I want to be able to change the size of it,
74

75
00:06:05,940 --> 00:06:12,930
and we did this in the last module by going to these size Inspector. Whenever you need to change anything
75

76
00:06:13,080 --> 00:06:18,300
about a User Interface Element, it's going to be somewhere in the right-hand pane, and you might just have
76

77
00:06:18,300 --> 00:06:24,180
to click through some of the different tabs to see what they each do before you get familiar with where
77

78
00:06:24,180 --> 00:06:26,940
to find the exact thing to change.
78

79
00:06:26,940 --> 00:06:36,060
Here, we're going to change the width to 120 x 120, so that we have pit perfectly square Image View, and
79

80
00:06:36,060 --> 00:06:39,790
we're gonna place it somewhere in the middle of our app.
80

81
00:06:39,810 --> 00:06:47,310
Now, the next thing I want to do is because I want to have a two dice app, I want a copy of pretty much
81

82
00:06:47,310 --> 00:06:53,900
exactly the same thing as this. I want an Image View with the dice in it with 120 x 120
82

83
00:06:54,060 --> 00:06:59,330
in terms of its size. Now, I don't want to go through the entire process of replicating that.
83

84
00:06:59,340 --> 00:07:00,620
So what can I do?
84

85
00:07:00,630 --> 00:07:07,800
Well, a really simple trick, an X code, is if you hold down the option or the alt key and then you click
85

86
00:07:07,890 --> 00:07:15,390
on this element and drag, and then be sure to let go of your mouse before you let go of the option key,
86

87
00:07:15,390 --> 00:07:23,190
then you end up with a perfect copy of the previous element. And you can do this lots of times.
87

88
00:07:23,220 --> 00:07:29,190
So, for example, if I select both of these that I've just created and I do the same trick again, then I
88

89
00:07:29,190 --> 00:07:36,090
end up with four and then I can end up with eight, and you can quickly create lots and lots of copies of
89

90
00:07:36,090 --> 00:07:38,990
the same thing if that's what you need.
90

91
00:07:39,000 --> 00:07:45,360
The last thing we're going to do for our design is we're going to add a button to our screen. Similar
91

92
00:07:45,360 --> 00:07:51,980
to before, we go to our object library and we try and search for a Button.
92

93
00:07:52,350 --> 00:07:59,490
And then we simply drag and drop it onto the screen somewhere near the middle and we're going to change
93

94
00:07:59,610 --> 00:08:01,940
a number of properties for that button.
94

95
00:08:02,070 --> 00:08:09,630
For example, I might want to change the title of the button, which is under the title property, and I'm
95

96
00:08:09,630 --> 00:08:16,110
going to call it roll, because this is going to be the button that the user is going to click on when
96

97
00:08:16,110 --> 00:08:18,100
they want to roll the dice.
97

98
00:08:18,120 --> 00:08:21,600
I'm just gonna make it a little bit bigger so it's easier to see for you.
98

99
00:08:21,750 --> 00:08:24,780
And, of course, that also means changing the font size.
99

100
00:08:24,780 --> 00:08:30,660
So we're going to click on that T button and change the font size to, let's say, maybe a 30 point font.
100

101
00:08:30,900 --> 00:08:32,750
That should be large enough to see.
101

102
00:08:33,030 --> 00:08:36,800
Now, I'm going to change the text color to white.
102

103
00:08:36,900 --> 00:08:40,460
And finally, maybe change the button's background color.
103

104
00:08:40,530 --> 00:08:47,070
Now, feel free to choose whatever color you like. But here's a cool trick, now often with design, it's good
104

105
00:08:47,070 --> 00:08:49,290
to have a consistent color theme.
105

106
00:08:49,680 --> 00:08:55,020
So if we wanted the background for our button to be exactly the same color as the background of our
106

107
00:08:55,230 --> 00:09:02,190
dice faces, then we can go to custom, and then use the color dropper tool to simply select that color.
107

108
00:09:02,490 --> 00:09:05,640
And then that becomes the background of our button.
108

109
00:09:06,000 --> 00:09:10,700
So it all looks very, very coherent and very well put together.
109

110
00:09:10,860 --> 00:09:17,370
And we're now ready to move on to the next step to actually use code to change the properties of our
110

111
00:09:17,370 --> 00:09:23,760
User Interface Elements. Instead of using the Attribute Inspector and changing it manually by clicking
111

112
00:09:23,760 --> 00:09:24,450
around,
112

113
00:09:24,480 --> 00:09:31,230
we're going to use our ViewController.swift to automatically do that for us by running some code.
113

114
00:09:31,320 --> 00:09:32,650
For all of that and more,
114

115
00:09:32,700 --> 00:09:33,840
I'll see you on the next lesson.