1
00:00:06,200 --> 00:00:09,810
Hey everyone this is Caleb with devah slopes dot com.

2
00:00:09,830 --> 00:00:15,740
And in this video we're going to build out the interface of our app that will use our animal classifier

3
00:00:15,740 --> 00:00:19,190
model that we built in the previous videos.

4
00:00:19,220 --> 00:00:25,930
So let's go ahead and pull open X code here and we're going to begin by creating a new X code project

5
00:00:25,940 --> 00:00:31,760
so click on that button there and we're going to just go ahead and create a single view application.

6
00:00:31,910 --> 00:00:36,380
Double click it and let's just name it animal classifier app.

7
00:00:36,380 --> 00:00:37,460
That's kind of boring.

8
00:00:37,460 --> 00:00:44,000
You can name it whatever you want but that's what I'm going with so click next and save it wherever.

9
00:00:44,030 --> 00:00:45,620
I'm just going to use my desktop.

10
00:00:45,620 --> 00:00:50,930
So save it and let's pull this up in full screen.

11
00:00:50,990 --> 00:00:51,840
There we go.

12
00:00:52,290 --> 00:00:59,270
And looks like it's given me some issues so let's switch it to that personal profile for a local device

13
00:00:59,270 --> 00:01:02,340
building and let's build out our UI.

14
00:01:02,660 --> 00:01:06,310
So we're going to go ahead and head right into our story board here.

15
00:01:06,320 --> 00:01:12,280
And if you don't already know the object library is way up here at the top now in X code 10.

16
00:01:12,380 --> 00:01:18,600
You can also pull it up by doing shift command L and it pulls it up a little shortcut there.

17
00:01:18,860 --> 00:01:21,700
But we're going to need ourselves an image view.

18
00:01:22,010 --> 00:01:27,560
And so I'm going to go ahead and hold option and drag an image view onto the screen there and what that's

19
00:01:27,560 --> 00:01:34,310
going to do is it's going to keep the object library up in place which is kind of nice and I'm going

20
00:01:34,310 --> 00:01:38,090
to just stretch this image view here to keep it in place.

21
00:01:38,090 --> 00:01:43,070
We're also going to need a toolbar that's what it's called.

22
00:01:43,070 --> 00:01:47,220
And I'm going to drag that down to the bottom of my app.

23
00:01:47,240 --> 00:01:53,770
Beyond that we're going to need a UI visual effect view with blar.

24
00:01:53,890 --> 00:01:58,850
We're going to use that to put our label on so it looks kind of cool and pretty with the image behind

25
00:01:58,850 --> 00:02:04,710
it so that we can read the text legibly the blurred view will make it a little easier to read the text

26
00:02:05,150 --> 00:02:09,090
and that text is going to be found in AUI label.

27
00:02:09,470 --> 00:02:12,620
So I'm going to go ahead and just kind of drag this in here.

28
00:02:12,620 --> 00:02:18,820
Scale it up the way I want which is like that and get rid of the object library.

29
00:02:18,830 --> 00:02:22,570
Now we're going to go ahead and pin this using some constraints.

30
00:02:22,610 --> 00:02:26,750
So go ahead and click that image view and then click the pin button down at the bottom of the screen

31
00:02:26,750 --> 00:02:34,130
here and we're going to pin zero from the top left right and bottom and I'm going to also go ahead and

32
00:02:34,130 --> 00:02:40,030
pin this toolbar zero from the left zero from the bottom and zero from the right.

33
00:02:40,070 --> 00:02:43,550
And let's just leave it as it is will pin it right there.

34
00:02:43,550 --> 00:02:45,100
Very cool.

35
00:02:45,140 --> 00:02:47,930
The label we can go ahead and also pin.

36
00:02:48,000 --> 00:02:52,400
Well looks like it's going to penetrate from all sides so we can do that by just clicking these little

37
00:02:52,400 --> 00:02:53,800
red lines.

38
00:02:54,020 --> 00:02:59,900
We can add that the way we want it there and it's not going to look pretty until we actually select

39
00:02:59,990 --> 00:03:02,530
this visual effect view and pin it.

40
00:03:02,660 --> 00:03:04,040
Let's do maybe 20.

41
00:03:04,040 --> 00:03:07,930
From the left 20 from the right and 20 from the bottom.

42
00:03:08,270 --> 00:03:10,820
And we're going to go ahead and give it a fixed height.

43
00:03:10,940 --> 00:03:13,050
How about 80.

44
00:03:13,250 --> 00:03:18,560
When we add that you'll see our label will adjust to match the constraints and we're going to actually

45
00:03:18,560 --> 00:03:24,710
do some editing on the text now so click on the label then go to the assistant editor and we're going

46
00:03:24,710 --> 00:03:27,900
to go ahead and change the font here to custom.

47
00:03:28,160 --> 00:03:33,040
And let's go ahead and change it to Avenir next.

48
00:03:33,080 --> 00:03:37,410
Let's make it medium and size 18 should be good.

49
00:03:37,700 --> 00:03:43,010
Then we're going to go ahead and change this to minimum font size because there will be a little bit

50
00:03:43,010 --> 00:03:50,570
more text that appears and we want to make sure that it can scale properly so it all fits on the label.

51
00:03:50,570 --> 00:03:57,050
Now currently we have one line meaning one line of text can fit in here but I'm going to want up to

52
00:03:57,050 --> 00:04:02,990
three lines because we're going to not only you know say classification at the top but below that we're

53
00:04:02,990 --> 00:04:08,750
going to print out the most likely classification and then beneath that the second most likely So let's

54
00:04:08,780 --> 00:04:14,710
up the lines to 3 and let's update this to have centered text.

55
00:04:14,720 --> 00:04:22,800
And we're going to actually change the words here to say press the camera button to choose an image

56
00:04:24,880 --> 00:04:29,470
and there will of course need to be a camera button in this place.

57
00:04:29,590 --> 00:04:34,000
So let's select that bar button item and we're going to choose Custom.

58
00:04:34,240 --> 00:04:35,650
And scroll down to camera.

59
00:04:35,650 --> 00:04:39,010
And as you can see we get a neat little camera button.

60
00:04:39,010 --> 00:04:44,750
But I really would like this to have kind of a dark theme to it instead of this white and this gray.

61
00:04:44,830 --> 00:04:49,920
And so I'm going to select the bar here and I'm going to change the tint to B.

62
00:04:50,140 --> 00:04:51,620
Let's do.

63
00:04:51,670 --> 00:04:53,020
Well let's see how black looks.

64
00:04:53,020 --> 00:04:53,280
Yeah.

65
00:04:53,410 --> 00:04:54,240
That looks pretty cool.

66
00:04:54,250 --> 00:04:59,650
And it is translucent so there will be a bit of see through next to it.

67
00:04:59,650 --> 00:05:02,470
And this blue button though is a little intense.

68
00:05:02,470 --> 00:05:06,700
I'm going to change the color to be white so it stands out a little better.

69
00:05:07,120 --> 00:05:15,400
And then the this image view I think I also Well you know I really should put some kind of image in

70
00:05:15,400 --> 00:05:20,680
here maybe a default image or you know instructions but instead I'm just going to go ahead and change

71
00:05:20,680 --> 00:05:22,950
the background to be black.

72
00:05:23,110 --> 00:05:26,970
And now any image that is added will replace that of course but.

73
00:05:27,600 --> 00:05:27,890
Yeah.

74
00:05:27,910 --> 00:05:29,590
So that's a pretty good start.

75
00:05:29,590 --> 00:05:35,920
I believe we have the UI built now we need to actually link it up to our controller here but I don't

76
00:05:35,920 --> 00:05:42,110
like that this is just called View Controller so let's just change this to classifier controller.

77
00:05:42,340 --> 00:05:46,540
And then of course we're going to want to change it everywhere that that is relevant including the file

78
00:05:46,540 --> 00:05:47,720
name.

79
00:05:47,950 --> 00:05:53,170
And then in the storyboard you'll see it's still referencing the old view controller file here so we'll

80
00:05:53,170 --> 00:05:57,760
just paste the name in there and push enter and it will update.

81
00:05:57,760 --> 00:06:02,160
And now we can successfully link these to that view controller file.

82
00:06:02,470 --> 00:06:07,780
So to do that go ahead and click the assistant editor button and now we're going to create some outlets

83
00:06:07,810 --> 00:06:11,580
and actions for our buttons and labels and everything else.

84
00:06:11,620 --> 00:06:16,600
So to do that go ahead and right click and drag from the I am a Jew and we're going to put an outlet

85
00:06:16,600 --> 00:06:19,010
right above the view did load override.

86
00:06:19,240 --> 00:06:24,070
And I'm going to name this image view like so that's perfect.

87
00:06:24,070 --> 00:06:31,030
And now we're going to go ahead and drag from here with a right click and we'll just call this classification

88
00:06:31,870 --> 00:06:34,720
label just like that.

89
00:06:34,840 --> 00:06:35,770
What else are we going to need.

90
00:06:35,770 --> 00:06:37,120
We need to change that data.

91
00:06:37,120 --> 00:06:38,330
We need to.

92
00:06:38,530 --> 00:06:40,720
We need an action for our button here.

93
00:06:40,720 --> 00:06:46,720
So if we right click and drag from the camera button and drop it like so it's automatically going to

94
00:06:46,720 --> 00:06:50,030
identify that button as needing an action.

95
00:06:50,050 --> 00:06:57,220
And so we can just go ahead and say camera button was pressed and connect that and within there we get

96
00:06:57,220 --> 00:07:01,690
a nice little function where we can tell what we want to happen when we push the button.

97
00:07:01,720 --> 00:07:07,780
So that should do it for connecting all of the things that we need to actually modify.

98
00:07:07,780 --> 00:07:12,320
But there's something that I want to do and it's not necessary but it's more just for fun.

99
00:07:12,580 --> 00:07:17,740
And we're going to create a custom subclass of UI visual effect view and we're going to give it some

100
00:07:17,740 --> 00:07:20,770
custom corner rounding with a new feature and iOS 12.

101
00:07:20,770 --> 00:07:28,050
So to do that right click on our folder here click new file and it's going to be a cocoa touch class.

102
00:07:28,150 --> 00:07:31,610
It will subclass from UI visual effect.

103
00:07:31,840 --> 00:07:34,200
And then that's view at the very end.

104
00:07:34,270 --> 00:07:42,890
We're going to call this the rounded visual effect view and we'll save that into our project like so.

105
00:07:43,360 --> 00:07:48,190
And now we're going to get rid of this boilerplate stuff and we're going to call a function called Awake

106
00:07:48,190 --> 00:07:51,550
from NIB and it's it's actually an override of that function.

107
00:07:51,550 --> 00:07:57,790
But essentially we can put view set up code here for how we want this subclass to look and it will update

108
00:07:57,790 --> 00:07:58,060
that.

109
00:07:58,060 --> 00:08:04,540
So in order to actually do that we're going to need to first tell it how much we want to round the corners

110
00:08:04,810 --> 00:08:10,690
and to find that we type self Lehre Dom corner radius and I'm going to set it to be 10.

111
00:08:10,690 --> 00:08:13,880
That's a nice round corner but not too round.

112
00:08:14,080 --> 00:08:16,390
Then we're going to call self.

113
00:08:16,420 --> 00:08:17,560
Clip's to bounds.

114
00:08:17,590 --> 00:08:21,850
And we're going to set that to be true and that's actually going to make the cut around the corners

115
00:08:21,910 --> 00:08:23,590
on the outside edge.

116
00:08:23,740 --> 00:08:30,190
But there is a cool new feature called masked corners and what it's going to do is it's going to allow

117
00:08:30,190 --> 00:08:35,740
me to pick which corners I round so maybe I want one corner to be rounded maybe I want three of them

118
00:08:35,740 --> 00:08:43,840
to be rounded and in order to actually change this I type self layer mask corners and it needs to be

119
00:08:43,840 --> 00:08:47,790
given an array and inside of that array there are several options.

120
00:08:47,800 --> 00:08:56,290
I can use I can type dot layer min x min y corner and it'll round the corner on the smallest x value

121
00:08:56,290 --> 00:09:02,380
in the smallest y value for a given shape and the rest will do the same thing but for the various max

122
00:09:02,380 --> 00:09:03,670
and min values.

123
00:09:03,670 --> 00:09:08,660
So what I'm going to do is I'm going to do Max x and Max y comma.

124
00:09:08,930 --> 00:09:14,800
Then I'm going to do min x and min y so will have opposite corners rounded and then the other two will

125
00:09:14,800 --> 00:09:16,320
not be rounded.

126
00:09:16,360 --> 00:09:22,030
So we're now done with this sub class and we need to go set its value in the storyboard.

127
00:09:22,040 --> 00:09:26,230
So click on the storyboard click on the visual effect view.

128
00:09:26,380 --> 00:09:28,570
And when you do that.

129
00:09:28,600 --> 00:09:33,660
Make sure you don't click the label when you click on the visual effect view you'll see that its class

130
00:09:33,660 --> 00:09:36,030
is just the default UI visual effect view.

131
00:09:36,040 --> 00:09:38,200
But I want it to be rounded.

132
00:09:38,200 --> 00:09:39,540
Visual effect view.

133
00:09:39,750 --> 00:09:40,790
So push enter.

134
00:09:40,990 --> 00:09:45,970
And at this point we can now build our application to the simulator and check it out.

135
00:09:45,970 --> 00:09:52,570
So let's click run and it's going to go ahead and build our app compile our code and launch the simulator

136
00:09:52,690 --> 00:09:55,570
which should pop up any second.

137
00:09:55,600 --> 00:09:56,510
There it is.

138
00:09:56,770 --> 00:09:59,880
And we should be able to test this out and see how we did.

139
00:10:00,890 --> 00:10:03,350
We'll see how our UI looks and if we need to change anything

140
00:10:07,060 --> 00:10:09,480
so here we go it's pop and open here.

141
00:10:09,790 --> 00:10:16,540
And let's take a look at our user interface see how we did OK.

142
00:10:16,560 --> 00:10:17,250
Perfect.

143
00:10:17,250 --> 00:10:17,790
Check this out.

144
00:10:17,790 --> 00:10:19,390
We have an image view in the back.

145
00:10:19,530 --> 00:10:23,130
We have our bar down here that we can't really see because it's super dark.

146
00:10:23,130 --> 00:10:24,100
We have our image.

147
00:10:24,210 --> 00:10:26,100
We have our label and look at this.

148
00:10:26,100 --> 00:10:27,700
We have one corner around it.

149
00:10:27,720 --> 00:10:32,280
And the other corner around it and these two are not just kind of a cool effect.

150
00:10:32,280 --> 00:10:36,720
You can customize corner rounding using the masked corners feature.

151
00:10:36,780 --> 00:10:42,360
I don't know about you guys but I want to move on to the next video and begin using our cool core M-L

152
00:10:42,360 --> 00:10:43,050
features.

153
00:10:43,050 --> 00:10:44,870
Let's head over there now and let's do it.