1
00:00:01,100 --> 00:00:02,350
So welcome back.

2
00:00:02,360 --> 00:00:10,080
We use IAB design on IB inspectable to essentially be able to change just stuff in the Interface Builder.

3
00:00:10,250 --> 00:00:15,870
Imagine you're designing something and you want to be able to on the fly in the Interface Builder C

4
00:00:16,130 --> 00:00:22,910
for instance the vote of the board there of a view or do you want to see the shadowing the things that

5
00:00:23,210 --> 00:00:29,230
are there in the CIA layer but you cannot see them by default inside sitings Interface Builder.

6
00:00:29,390 --> 00:00:34,880
So if we use IB design around I've been a spectacle to manage that kind of attributes and even though

7
00:00:34,880 --> 00:00:38,600
the names are quite mouthfull they're very very simple to use.

8
00:00:38,600 --> 00:00:42,200
So let me show you views then I'm when I go to Mexico.

9
00:00:42,610 --> 00:00:46,520
I'm going to make a new app called in.

10
00:00:46,680 --> 00:00:51,430
I'd be design if I spelt it right.

11
00:00:51,440 --> 00:00:53,560
If not forgive me for that.

12
00:00:53,720 --> 00:00:57,660
So you're in the view controller.

13
00:00:57,770 --> 00:01:05,780
I want to go ahead and say I have a class on but I call this one custom view just like I've done several

14
00:01:05,780 --> 00:01:13,520
times already and this is a view that we can essentially make any object you know restorable to be a

15
00:01:13,520 --> 00:01:14,630
member of that.

16
00:01:14,750 --> 00:01:16,500
So I could go to my main storyboard

17
00:01:19,090 --> 00:01:24,550
say I have a eye view and this you might view my cyborg.

18
00:01:24,580 --> 00:01:30,580
I'm going to go ahead and say it's actually placed in here are the placement of it cannot be controlled

19
00:01:30,580 --> 00:01:31,840
by an inspector.

20
00:01:31,870 --> 00:01:33,980
So I'm going to put it there myself.

21
00:01:34,100 --> 00:01:36,640
I'm going to say it is of a type of custom.

22
00:01:37,030 --> 00:01:44,860
Now what we want to happen is this we want to be able to change some attributes of a layer which is

23
00:01:44,860 --> 00:01:50,030
not by default accessible in the interface when they're in the Interface Builder.

24
00:01:50,110 --> 00:01:57,120
So in this story with somebody going here say my class is actually of the type I'd design.

25
00:01:57,490 --> 00:02:04,150
Which means it can accept things that are in the layer and the moment you make the design of that you

26
00:02:04,150 --> 00:02:09,040
can actually override the function called prepare for Interface Builder.

27
00:02:09,370 --> 00:02:14,340
Which means now we can have or Leja stuff in here so you could say.

28
00:02:14,450 --> 00:02:24,730
So if DOD background color lets make it you I color dot the light GUI for instance.

29
00:02:24,760 --> 00:02:29,750
So just go ahead and see if this one single attribute is viewable there.

30
00:02:29,890 --> 00:02:35,530
The moment they go to this story is going to show me up there that he is calculating something is building

31
00:02:35,530 --> 00:02:42,140
the interface in there find the storyboard find I it shows me that change that I have made in the IB

32
00:02:42,140 --> 00:02:44,410
design event that I'm going to go by here.

33
00:02:44,450 --> 00:02:52,740
I'm going to do something a little bit more complex and when I a self that layer dot corner radius make

34
00:02:52,740 --> 00:02:56,310
it on a ten point zero.

35
00:02:56,380 --> 00:03:02,170
So you go back to a story about and again is going to Shoney's up there that is calculating it.

36
00:03:02,170 --> 00:03:08,590
So now we can see a little corner radius happening around the corners of my view.

37
00:03:09,010 --> 00:03:10,400
It's a view controller.

38
00:03:10,530 --> 00:03:18,440
And I'm going to say Give me a self dot layer dot border color.

39
00:03:18,620 --> 00:03:24,150
Say it is your eye color red color dot C.G. color of course.

40
00:03:24,160 --> 00:03:32,360
And then I'm going to go ahead and say Give me a border Vitt so layer dot for the vet and I'm going

41
00:03:32,360 --> 00:03:34,270
to play that Tanni.

42
00:03:34,510 --> 00:03:37,640
And if you go back to sleep mode we should be able to see a red.

43
00:03:37,640 --> 00:03:40,610
The border with a bit of tan on here.

44
00:03:40,990 --> 00:03:42,860
Now this is all good and.

45
00:03:42,880 --> 00:03:50,720
But wouldn't it be nice if we had a way of actually changing these values here in Interface Builder

46
00:03:51,310 --> 00:03:57,310
and that is something that we can do and to do that on when they go in here and say within the body

47
00:03:57,310 --> 00:03:58,400
of this class.

48
00:03:58,600 --> 00:04:03,670
And remember we haven't done anything in our view control that we're not going to do anything.

49
00:04:03,850 --> 00:04:07,560
So everything here is happening in a in a custom class.

50
00:04:07,570 --> 00:04:14,240
So within the body of this custom we cannot say I'm going to say I have a variable let's call it was

51
00:04:14,260 --> 00:04:20,330
there a vet and that's going to be a CGI float because it has to be.

52
00:04:20,460 --> 00:04:23,790
And I'm going to say the value was 10 so 10.

53
00:04:24,010 --> 00:04:25,850
I don't need that one anymore.

54
00:04:26,140 --> 00:04:33,760
Somewhat elite that and the border with a meeting here is not going to be accessible in Interface Builder

55
00:04:33,850 --> 00:04:38,090
unless I make it something that we call IAB inspectable.

56
00:04:38,260 --> 00:04:52,270
So let's go in here and say that I'd be in this pic about if I properly spell it I be in this text but

57
00:04:52,300 --> 00:05:01,560
yes I'm going I say at IAB inspectable and then get going here and say within the closure of this this

58
00:05:01,990 --> 00:05:10,510
property I'm going to go ahead and say did this said if we change the value here is what we want to

59
00:05:10,510 --> 00:05:11,350
happen.

60
00:05:11,440 --> 00:05:21,430
We want to say self that layer that border it become bored of it or maybe I should change this name

61
00:05:21,520 --> 00:05:28,460
or we could keep it because I don't like to use exactly the same names for my properties and my tribute

62
00:05:28,470 --> 00:05:30,480
spot and my variables.

63
00:05:30,610 --> 00:05:32,370
But in this case it's OK.

64
00:05:32,620 --> 00:05:38,530
So what happens is this you have a valuable that is being inspected but it means it can be inspected

65
00:05:38,650 --> 00:05:40,700
inside the interface builder.

66
00:05:40,720 --> 00:05:42,640
That's what IBM stands for.

67
00:05:42,850 --> 00:05:46,490
And every time it gets set it has to do something.

68
00:05:46,540 --> 00:05:47,420
What does it do.

69
00:05:47,440 --> 00:05:49,120
It sets the border right.

70
00:05:49,180 --> 00:05:50,910
So let's see that in action.

71
00:05:51,130 --> 00:05:52,120
If you go to sort.

72
00:05:52,180 --> 00:05:55,870
Now I have a board they have it in there.

73
00:05:56,140 --> 00:05:59,770
I'm going to go ahead and say Make it 10 and makes it 10.

74
00:05:59,770 --> 00:06:03,370
And when I say make it 30 and makes it 30.

75
00:06:03,680 --> 00:06:12,600
So that's a quick introduction to how to use I mean respectable values as well as IB is involved as

76
00:06:12,610 --> 00:06:19,540
you can obviously apply any of these routine and even the spectacle and change them up based on you

77
00:06:19,540 --> 00:06:25,240
know based on the value that you produce in the storyboard for instance they could copy this whole thing.

78
00:06:25,370 --> 00:06:33,880
Place it in here and say this is actually corner radius all our radius and the value of it is 10 by

79
00:06:33,880 --> 00:06:34,630
default.

80
00:06:34,630 --> 00:06:41,760
And every time we change it we get to see the corner radius to become the new corner.

81
00:06:42,160 --> 00:06:48,470
And in this storyboard I could actually work with data and immediately change it say.

82
00:06:48,630 --> 00:06:53,720
This one becomes 50 and immediately we see a corner radius of 50.

83
00:06:53,830 --> 00:06:58,870
So this is a very good way for you if you want to design your own custom outlets if you want to have

84
00:06:58,870 --> 00:07:06,280
an office that they have more than the normal settings on properties you could simply apply them by

85
00:07:06,320 --> 00:07:10,570
either redesign or even be a little bit careful in how many of them you use.

86
00:07:10,570 --> 00:07:16,780
In my experience at the moment it becomes a little bit heavy as it starts crashing quite often.

87
00:07:16,900 --> 00:07:23,300
But a lot of times it actually helps us have a better visual feedback of what we're doing.

88
00:07:23,620 --> 00:07:27,140
So with that in mind let's move on to our next lesson.