So well come back again.
S.a.a labels are essentially the visual part of your outlets.
So everything that you have done up to this point such as when we made a label or a view or a text you
built into them they have a CIA layer which essentially shows off the content and we can also customize
those layers as well and get more visual mothers out of them.
So let's go ahead and see how we do all of these.
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
because they're built into the outlets are actually quite easy to use.
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
say three hundred and 300 on my label by default has a background color say this kind of pinkish and
it has a larger text size.
And this is the outlet for my iPad.
So back in my coding area here's what I'm going to.
I'm going to say my view for the moment.
My view is essentially visible.
Go ahead and say my lieben dot lawyer.
So it has a built in part of every every outlet that corner radius.
Let's make it 25.
And as you can imagine this is simply is going to show us a rounded corners for all the corners of my
label.
Now it's not going to work on its own simply because we have to make sure that nothing from the label
view leads outside the layer.
And to make sure if done I'm going to say my Lavan clips to is.
So every boundary that is being defined by the layer will be clipping.
My my my labor or my view of my labor.
And as a result we end up seeing the rounded corners.
If I run this application now we should be able to see that happening right away.
So now obviously we have our label with rounded corners with an amount of radius of 25.
This is obviously one of the easier things we could do with the layers.
I could go ahead and say my labor data layer that was there.
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
perhaps noticed that there is a border color before I hit enter on it pay attention to the fact that
the code is expecting a CGI color to come on the other side of it.
So I'm going to say what the color becomes a white color dot let's say black dot C.G. color.
So we get the C-g color out of the black white color.
Let's run this application now on.
If all goes well we should be able to see a label with rounded corners and a border around it.
So that's that's the basics of how to use a C Aley.
Now you see a layer that we use.
Up until this point was the built in one in the label and other thing we could do is we could actually
add a Sabliere to our objects.
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
it Sockdolager to be a C Aley here and this is just like any other layer that we have on an outlet.
The only difference is that when you have my label that layer by default layer is interfering it's frame
from my label.
Well here a brand new layer doesn't know where it has to be drawn.
So we have to essentially introduce a frame to eat so I'm going to say suddenly your door frame is going
to be my label dot bounce dot insets bye.
And let's go ahead and get like 30 pixels down from both sides.
So now our frame for our Sabliere is inside my label minus 30 pixels from the horizontal and vertical
height essentially.
Now I'm going to go ahead and say Sabliere dark background color becomes a color that may be green dot
C-g color and then I'm going to say Sabliere.
Let's see some new stuff such as Shadow sunglasses shadow offset.
So we have to set it to somewhere against it's own frame.
So I'm going to say the offset effect is going to be C.G. size
with a bit of maybe an on a 10 and a height of 10 as well.
And then I'm going to say sub layer dark shadow radius.
That's kind of the how Bleriot is going to become.
So I'm going to say make it let's say two point zero.
And of course you have to give with a shadow color so softly that shadow color again a C-g color so
I'm going to make it you like color dot black maybe dot C.G. color because the color of the shadow.
I'm also going to say Sabliere Dadds shadow opacity that's making its point six.
And finally I'm going to choose a corner radius for my suppliers I'm going to say something else.
That corner radius.
Let's make it 20 because the corner radius of my actual year was 25 this one and make it 20.
And finally we have to add the Sabliere to our objects so I'm going to say my level data layer that
Sutlej are under severe is called Sabliere and doubts about that.
All we have to do.
So now we should be able to see our neighbor with a corner radius as well as some borders and then we
should be able to see the shadow inside it.
The only thing is I think a border color is black and also my shadow color is like.
So maybe change just one too perhaps a blue one so we can perhaps see them more more distinctively squarehead
into the simulator.
Now that is loaded in the simulator.
You can see that this is the Sabliere the green one and the Sabliere has a shadow.
And then the layer itself has a border as well as a corner radius and everything is working the way
we were hoping.
So this was a quick introduction of some of the basic stuff that we could do with layers from different
outlets.
We use them heavily when we are designing advanced interfaces.
And we want to have borders on one corner of the other view or shadows inside.
Then we want to change the colors.
Something to keep in mind is that for most outlets including labels when you add the sub layers they
essentially hide the content.
So that's something that there's no way to address it at least not to the best of my knowledge and as
much as I have looked for it online.
So if you want to do something like the one I just did and you want to be able to see the content of
your label you're better off subclassing AUI view and add these to a UI view and add your own label
on top of the UI.
So let's keep it up to here and we'll move on to our next lesson.