1
00:00:00,390 --> 00:00:01,590
So well come back again.

2
00:00:01,590 --> 00:00:06,360
S.a.a labels are essentially the visual part of your outlets.

3
00:00:06,640 --> 00:00:12,780
So everything that you have done up to this point such as when we made a label or a view or a text you

4
00:00:13,200 --> 00:00:20,640
built into them they have a CIA layer which essentially shows off the content and we can also customize

5
00:00:20,640 --> 00:00:25,110
those layers as well and get more visual mothers out of them.

6
00:00:25,110 --> 00:00:27,590
So let's go ahead and see how we do all of these.

7
00:00:27,610 --> 00:00:34,940
I'm going to jump into exco and in here I'm going to go ahead and say I have a see a failure up and

8
00:00:34,950 --> 00:00:38,750
because they're built into the outlets are actually quite easy to use.

9
00:00:38,820 --> 00:00:47,830
So if I go in here and I make a u i label for instance and when I place it somewhere in the middle and

10
00:00:47,850 --> 00:00:59,700
say three hundred and 300 on my label by default has a background color say this kind of pinkish and

11
00:00:59,790 --> 00:01:04,490
it has a larger text size.

12
00:01:04,660 --> 00:01:07,740
And this is the outlet for my iPad.

13
00:01:11,450 --> 00:01:14,550
So back in my coding area here's what I'm going to.

14
00:01:14,830 --> 00:01:17,280
I'm going to say my view for the moment.

15
00:01:17,300 --> 00:01:20,130
My view is essentially visible.

16
00:01:20,240 --> 00:01:24,480
Go ahead and say my lieben dot lawyer.

17
00:01:24,740 --> 00:01:30,020
So it has a built in part of every every outlet that corner radius.

18
00:01:30,140 --> 00:01:32,360
Let's make it 25.

19
00:01:32,360 --> 00:01:39,620
And as you can imagine this is simply is going to show us a rounded corners for all the corners of my

20
00:01:39,620 --> 00:01:40,440
label.

21
00:01:40,450 --> 00:01:46,940
Now it's not going to work on its own simply because we have to make sure that nothing from the label

22
00:01:46,970 --> 00:01:50,400
view leads outside the layer.

23
00:01:50,620 --> 00:01:55,750
And to make sure if done I'm going to say my Lavan clips to is.

24
00:01:56,000 --> 00:02:00,920
So every boundary that is being defined by the layer will be clipping.

25
00:02:00,920 --> 00:02:04,280
My my my labor or my view of my labor.

26
00:02:04,460 --> 00:02:08,090
And as a result we end up seeing the rounded corners.

27
00:02:08,090 --> 00:02:12,760
If I run this application now we should be able to see that happening right away.

28
00:02:14,260 --> 00:02:21,610
So now obviously we have our label with rounded corners with an amount of radius of 25.

29
00:02:21,630 --> 00:02:24,940
This is obviously one of the easier things we could do with the layers.

30
00:02:25,000 --> 00:02:29,950
I could go ahead and say my labor data layer that was there.

31
00:02:29,950 --> 00:02:39,800
It is going to be let's say five points and then I'm going to say my label dot layer on some of you

32
00:02:39,830 --> 00:02:46,390
perhaps noticed that there is a border color before I hit enter on it pay attention to the fact that

33
00:02:46,650 --> 00:02:51,280
the code is expecting a CGI color to come on the other side of it.

34
00:02:51,310 --> 00:02:59,460
So I'm going to say what the color becomes a white color dot let's say black dot C.G. color.

35
00:02:59,590 --> 00:03:03,680
So we get the C-g color out of the black white color.

36
00:03:03,840 --> 00:03:05,680
Let's run this application now on.

37
00:03:05,710 --> 00:03:13,020
If all goes well we should be able to see a label with rounded corners and a border around it.

38
00:03:13,060 --> 00:03:18,440
So that's that's the basics of how to use a C Aley.

39
00:03:18,670 --> 00:03:21,000
Now you see a layer that we use.

40
00:03:21,010 --> 00:03:27,640
Up until this point was the built in one in the label and other thing we could do is we could actually

41
00:03:27,730 --> 00:03:30,420
add a Sabliere to our objects.

42
00:03:30,580 --> 00:03:36,940
So let's go ahead and see how we're going to do that and get going here and saying let's let's call

43
00:03:36,940 --> 00:03:46,410
it Sockdolager to be a C Aley here and this is just like any other layer that we have on an outlet.

44
00:03:46,420 --> 00:03:54,610
The only difference is that when you have my label that layer by default layer is interfering it's frame

45
00:03:54,610 --> 00:03:55,890
from my label.

46
00:03:56,020 --> 00:04:00,170
Well here a brand new layer doesn't know where it has to be drawn.

47
00:04:00,280 --> 00:04:07,960
So we have to essentially introduce a frame to eat so I'm going to say suddenly your door frame is going

48
00:04:07,960 --> 00:04:16,150
to be my label dot bounce dot insets bye.

49
00:04:16,270 --> 00:04:21,590
And let's go ahead and get like 30 pixels down from both sides.

50
00:04:21,700 --> 00:04:31,750
So now our frame for our Sabliere is inside my label minus 30 pixels from the horizontal and vertical

51
00:04:31,900 --> 00:04:33,370
height essentially.

52
00:04:33,400 --> 00:04:43,330
Now I'm going to go ahead and say Sabliere dark background color becomes a color that may be green dot

53
00:04:43,330 --> 00:04:47,360
C-g color and then I'm going to say Sabliere.

54
00:04:47,540 --> 00:04:53,300
Let's see some new stuff such as Shadow sunglasses shadow offset.

55
00:04:53,410 --> 00:04:57,500
So we have to set it to somewhere against it's own frame.

56
00:04:57,640 --> 00:05:01,030
So I'm going to say the offset effect is going to be C.G. size

57
00:05:04,200 --> 00:05:08,760
with a bit of maybe an on a 10 and a height of 10 as well.

58
00:05:08,760 --> 00:05:14,090
And then I'm going to say sub layer dark shadow radius.

59
00:05:14,220 --> 00:05:17,400
That's kind of the how Bleriot is going to become.

60
00:05:17,520 --> 00:05:20,400
So I'm going to say make it let's say two point zero.

61
00:05:20,580 --> 00:05:28,680
And of course you have to give with a shadow color so softly that shadow color again a C-g color so

62
00:05:28,680 --> 00:05:37,270
I'm going to make it you like color dot black maybe dot C.G. color because the color of the shadow.

63
00:05:37,380 --> 00:05:44,590
I'm also going to say Sabliere Dadds shadow opacity that's making its point six.

64
00:05:44,700 --> 00:05:49,680
And finally I'm going to choose a corner radius for my suppliers I'm going to say something else.

65
00:05:49,770 --> 00:05:51,240
That corner radius.

66
00:05:51,270 --> 00:05:59,640
Let's make it 20 because the corner radius of my actual year was 25 this one and make it 20.

67
00:05:59,850 --> 00:06:08,660
And finally we have to add the Sabliere to our objects so I'm going to say my level data layer that

68
00:06:08,790 --> 00:06:14,800
Sutlej are under severe is called Sabliere and doubts about that.

69
00:06:14,820 --> 00:06:16,060
All we have to do.

70
00:06:16,170 --> 00:06:22,440
So now we should be able to see our neighbor with a corner radius as well as some borders and then we

71
00:06:22,440 --> 00:06:25,660
should be able to see the shadow inside it.

72
00:06:25,680 --> 00:06:30,770
The only thing is I think a border color is black and also my shadow color is like.

73
00:06:30,860 --> 00:06:39,540
So maybe change just one too perhaps a blue one so we can perhaps see them more more distinctively squarehead

74
00:06:39,540 --> 00:06:41,030
into the simulator.

75
00:06:41,070 --> 00:06:42,680
Now that is loaded in the simulator.

76
00:06:42,710 --> 00:06:48,860
You can see that this is the Sabliere the green one and the Sabliere has a shadow.

77
00:06:49,110 --> 00:06:56,400
And then the layer itself has a border as well as a corner radius and everything is working the way

78
00:06:56,400 --> 00:06:57,460
we were hoping.

79
00:06:57,660 --> 00:07:03,210
So this was a quick introduction of some of the basic stuff that we could do with layers from different

80
00:07:03,210 --> 00:07:04,180
outlets.

81
00:07:04,200 --> 00:07:08,420
We use them heavily when we are designing advanced interfaces.

82
00:07:08,610 --> 00:07:14,150
And we want to have borders on one corner of the other view or shadows inside.

83
00:07:14,310 --> 00:07:16,160
Then we want to change the colors.

84
00:07:16,290 --> 00:07:23,100
Something to keep in mind is that for most outlets including labels when you add the sub layers they

85
00:07:23,100 --> 00:07:25,590
essentially hide the content.

86
00:07:25,590 --> 00:07:30,270
So that's something that there's no way to address it at least not to the best of my knowledge and as

87
00:07:30,270 --> 00:07:32,910
much as I have looked for it online.

88
00:07:32,910 --> 00:07:38,220
So if you want to do something like the one I just did and you want to be able to see the content of

89
00:07:38,220 --> 00:07:45,990
your label you're better off subclassing AUI view and add these to a UI view and add your own label

90
00:07:46,080 --> 00:07:47,930
on top of the UI.

91
00:07:48,300 --> 00:07:51,460
So let's keep it up to here and we'll move on to our next lesson.