1
00:00:07,120 --> 00:00:12,010
Hey everybody what's going on this is Caleb with Debb slopes dot com and in this video we're going to

2
00:00:12,010 --> 00:00:19,060
dive into the world of view and we're going to create a custom view that will show very special characteristics

3
00:00:19,060 --> 00:00:22,030
that we can set in code using our view layer.

4
00:00:22,030 --> 00:00:27,240
So go ahead and pull open your X code project and we last left off creating our model layer.

5
00:00:27,430 --> 00:00:34,510
But for now we're going to go ahead and dive into this view folder right click on view click new file

6
00:00:34,780 --> 00:00:39,220
and instead of clicking swift file what we're going to do is we're going to create what's called a cocoa

7
00:00:39,220 --> 00:00:40,080
touch class.

8
00:00:40,090 --> 00:00:49,150
So double click on it and you'll see right here subclass of k now subclassing is a core principle of

9
00:00:49,240 --> 00:00:54,490
object oriented programming and swift in general if you're using model view controller.

10
00:00:54,670 --> 00:00:58,860
And we will talk about that very quickly just to cover the principles there.

11
00:00:59,050 --> 00:01:05,320
But basically this class we can give it whatever name we want and it's conventional to use capital letters

12
00:01:05,320 --> 00:01:12,790
for every word and not have any spaces so I'm just going to call this custom pretty view loops with

13
00:01:12,940 --> 00:01:14,330
only two t's there.

14
00:01:14,500 --> 00:01:16,890
And you'll see it is subclassing you I view.

15
00:01:16,890 --> 00:01:18,360
We'll talk about that in a second.

16
00:01:18,370 --> 00:01:20,080
Make sure the language is swift.

17
00:01:20,080 --> 00:01:27,770
Click next then click Create K and you'll notice right here it creates a class for us automatically

18
00:01:27,770 --> 00:01:29,200
which is very cool.

19
00:01:29,210 --> 00:01:33,420
Delete this comment and then let's just talk about what's going on here.

20
00:01:33,470 --> 00:01:36,550
We have a class called Custom pretty view.

21
00:01:36,590 --> 00:01:37,660
Then there's a colon.

22
00:01:37,680 --> 00:01:44,800
And afterwards you view now you view is a very very big subclass.

23
00:01:44,810 --> 00:01:51,090
And most things in Interface Builder that we can use like labels and buttons segmented controls text

24
00:01:51,090 --> 00:01:57,020
fields all of it is going to inherit from you I view meaning there are some shared properties amongst

25
00:01:57,080 --> 00:01:57,970
all of them.

26
00:01:58,280 --> 00:02:06,700
Now if we were to go into main that storyboard and drag on a view like so you view drag it on like this.

27
00:02:06,830 --> 00:02:13,010
So go ahead and click the pin button and give it a fixed width of 250 and have it a fixed height of

28
00:02:13,020 --> 00:02:14,300
300.

29
00:02:14,900 --> 00:02:15,910
Add two constraints.

30
00:02:15,920 --> 00:02:20,090
And of course it's not going to show up because we haven't told where on the screen it should live.

31
00:02:20,090 --> 00:02:25,310
So let's do that by clicking the alignment button and pinning it horizontally and vertically in the

32
00:02:25,310 --> 00:02:26,230
container.

33
00:02:26,600 --> 00:02:32,360
So now it shows up the right size it's going to be perfectly centered and take a look that is an instance

34
00:02:32,360 --> 00:02:34,720
of you eye view you can see it right there.

35
00:02:34,730 --> 00:02:40,040
Now we have not given at a particular class to identify with but we're going to go ahead and set that

36
00:02:40,040 --> 00:02:42,490
up here in Kustom pretty view.

37
00:02:42,830 --> 00:02:48,530
Now in a view if you're going to create a subclass of a view there's a very important function you need

38
00:02:48,530 --> 00:02:51,150
to call that's called Awake from NIB.

39
00:02:51,320 --> 00:02:56,600
And actually we're overriding the function awake from NIB so that we can pass in our customization.

40
00:02:56,600 --> 00:03:00,660
Now I'm not sure if you saw that I was a little fast I'll type away from that again.

41
00:03:00,890 --> 00:03:07,430
And let's read it awake from NIB prepares the receiver for service after it's been loaded from an interface

42
00:03:07,430 --> 00:03:09,990
builder archive or nib file.

43
00:03:10,120 --> 00:03:10,760
OK.

44
00:03:10,940 --> 00:03:20,030
Now our app is using Interface Builder so it's basically saying hey after we load that view on the screen

45
00:03:20,450 --> 00:03:22,890
call all the code in Awake from NIB.

46
00:03:23,060 --> 00:03:23,570
OK.

47
00:03:23,750 --> 00:03:28,840
And that's how that's why we pass it in here because that's when it can be customized after it loads.

48
00:03:28,880 --> 00:03:31,970
We customize it if we tried to customize it before it was loaded.

49
00:03:31,970 --> 00:03:34,290
We'd get a crash because the view would be nil.

50
00:03:34,520 --> 00:03:37,930
But for now let's go ahead and let's set up some customizations.

51
00:03:38,000 --> 00:03:42,650
Now the way to do that is we need to access the layer property of this view.

52
00:03:42,860 --> 00:03:47,530
So if we think about custom pretty view we're going to access it's layer.

53
00:03:47,900 --> 00:03:53,300
And if you've ever done any work with like Photoshop or sketch or anything like that you probably understand

54
00:03:53,300 --> 00:03:58,550
the concept of working in layers you'll have way back layers and you have way up close layers and there

55
00:03:58,550 --> 00:04:03,830
can be you know hundreds of layers between all the way to the back of your project the interface builder

56
00:04:03,830 --> 00:04:04,820
is no different.

57
00:04:04,820 --> 00:04:08,540
This layer this view right here is on top of this back view.

58
00:04:08,540 --> 00:04:10,130
So it's a layer above it.

59
00:04:10,130 --> 00:04:13,550
Now if we think about that this is the layer that we're modifying.

60
00:04:13,550 --> 00:04:19,010
We want to modify what it looks like so we can call layer dot and we can access properties like the

61
00:04:19,190 --> 00:04:25,180
corner radius for instance and we can simply set that to be a number like 20.

62
00:04:25,180 --> 00:04:27,270
That will give us a nice rounded corner.

63
00:04:27,440 --> 00:04:30,700
We can set things like a laser dot shadows.

64
00:04:30,800 --> 00:04:37,250
So let's give it a shadow let's give it a shadow with a color of go ahead and press equals there and

65
00:04:37,250 --> 00:04:38,830
we'll use a color literal.

66
00:04:38,840 --> 00:04:41,760
This is another really cool thing and swift for an X cotinine.

67
00:04:41,900 --> 00:04:47,870
You can select this little dot here and choose a color like this dark gray and it'll set the shadow

68
00:04:47,870 --> 00:04:49,480
color to be that dark gray.

69
00:04:50,060 --> 00:04:52,490
But setting a color for a Shadow is not enough.

70
00:04:52,490 --> 00:04:59,800
We also need to set an opacity and we also need to set a radius so called Layer shadow radius.

71
00:05:00,140 --> 00:05:05,360
And this is like the amount of Blur that's on the shadow so I'm just going to say maybe I don't know

72
00:05:05,390 --> 00:05:14,490
10 k and then for the layer dot shadow opacity I'm going to set an opacity of 75 percent like so.

73
00:05:14,870 --> 00:05:21,010
So at this point our view our custom pretty view is going to have a rounded corner of 20.

74
00:05:21,230 --> 00:05:28,220
A dark gray shadow with a radius of 10 and an opacity of 75 the shadow not the view.

75
00:05:28,250 --> 00:05:29,450
Let's think what else could we do.

76
00:05:29,450 --> 00:05:31,750
Let's let's give it a nice background color.

77
00:05:31,880 --> 00:05:36,020
Called background color and use a color literal like so.

78
00:05:36,260 --> 00:05:37,710
And let's choose a fun color.

79
00:05:37,720 --> 00:05:41,150
How about this orange color.

80
00:05:41,150 --> 00:05:42,500
That looks fun.

81
00:05:42,620 --> 00:05:43,960
Very nice.

82
00:05:44,330 --> 00:05:45,020
So you know what.

83
00:05:45,020 --> 00:05:46,030
This looks pretty good.

84
00:05:46,030 --> 00:05:51,620
So we're going to have a rounded corner a nice shadow and the background color of orange.

85
00:05:51,620 --> 00:05:53,620
You know what else we can do we could give it a border.

86
00:05:53,660 --> 00:05:56,610
We could say layered border color.

87
00:05:56,750 --> 00:05:57,250
OK.

88
00:05:57,440 --> 00:06:00,440
By the way you have to give both a width and a color.

89
00:06:00,440 --> 00:06:03,150
How about a border color of dark gray.

90
00:06:03,620 --> 00:06:05,340
So we use a color literally again.

91
00:06:05,480 --> 00:06:07,870
Double click it and we'll choose that dark gray.

92
00:06:08,090 --> 00:06:13,430
Then we'll go ahead and say layer border width and we'll set it to be equal to about five.

93
00:06:13,670 --> 00:06:14,080
All right.

94
00:06:14,120 --> 00:06:20,960
So now we have a bunch of properties here that we have modified in code and now just like in the previous

95
00:06:20,960 --> 00:06:25,890
video when I changed the name of controller I had changed the identity of that controller right.

96
00:06:26,120 --> 00:06:31,240
What I can do now is go into main story board and I can select this view.

97
00:06:31,430 --> 00:06:40,100
I can go to the identity and look what I can set custom pretty view push enter and it's now an instance

98
00:06:40,130 --> 00:06:41,580
of custom pretty view.

99
00:06:41,600 --> 00:06:46,280
Now you're probably wondering wait why isn't the background orange Why isn't there a shadow the way

100
00:06:46,280 --> 00:06:52,190
that we've done this interface builder can't actually present the details because the app is not running

101
00:06:52,280 --> 00:06:56,720
the function is called when the app is actually built and loaded on a real device.

102
00:06:56,740 --> 00:07:01,790
There is an advanced topic called I.B. desirables and Iby inspectable is that will allow you not only

103
00:07:01,790 --> 00:07:07,670
to view those changes from your custom class in interface builder but it lets you modify them here with

104
00:07:07,670 --> 00:07:10,270
cool sliders and buttons and selections.

105
00:07:10,430 --> 00:07:15,530
So we can talk about that in another target topic but for now I want to build this and I want to see

106
00:07:15,530 --> 00:07:18,120
if our custom view subclass worked.

107
00:07:18,140 --> 00:07:23,240
So go ahead and click BuildOn run and it's going to go ahead and build and compile our app.

108
00:07:23,240 --> 00:07:27,380
It'll load the simulator which will be able to check out and see how we did.

109
00:07:27,380 --> 00:07:32,610
So I'm going to pull this over if it will let me it's not even letting me move it.

110
00:07:32,620 --> 00:07:33,390
That's weird.

111
00:07:34,250 --> 00:07:37,360
Come on iPhone that's being grumpy.

112
00:07:37,370 --> 00:07:39,600
Oh well so here we go it's loading.

113
00:07:39,920 --> 00:07:41,180
And look at that.

114
00:07:41,210 --> 00:07:41,930
That's our view.

115
00:07:41,930 --> 00:07:44,810
That's exactly how we wanted to configure it.

116
00:07:44,810 --> 00:07:49,840
We have an orange background a dark gray border a nice fluffy drop shadow.

117
00:07:50,240 --> 00:07:50,880
Wow.

118
00:07:50,930 --> 00:07:58,070
So we have the view controller here communicating with our view that has a special subclass that we

119
00:07:58,070 --> 00:07:59,040
just created.

120
00:07:59,120 --> 00:08:00,680
That's our view layer.

121
00:08:00,740 --> 00:08:02,510
Our controller is interfacing with it.

122
00:08:02,510 --> 00:08:07,290
By default that's something that Apple just gives you out of the box which is really really cool.

123
00:08:07,520 --> 00:08:13,160
In the next video we're going to go ahead and connect more things to The View Controller and show you

124
00:08:13,340 --> 00:08:16,220
how to actually interface with those in code.

125
00:08:16,220 --> 00:08:17,840
In our view controller subclass.

126
00:08:17,840 --> 00:08:19,880
So we're going to head over to the next video.

127
00:08:19,940 --> 00:08:22,120
Amazing job guys just take a look at this.

128
00:08:22,160 --> 00:08:24,260
It looks so good.

129
00:08:24,260 --> 00:08:28,970
All right let's head over to the next video and let's connect some things to our view controller and

130
00:08:29,030 --> 00:08:31,440
help it to communicate back and forth.