ioslabel阴影_iphone ios uiview uilabel 边框,圆角,阴影实现

In this post, I’ll explain how to add a border, rounded corners, and drop shadow to any UIViewusing some simple CALayerproperties. I’m not a CALayer guru, but these few tricks from the layer world are particularly nice to know about.

These properties are present for every UIView, since every view is actually drawn using an underlying CALayer object owned by the UIView. You can do a lot without even knowing aboutCALayers because UIViews encapsulate a lot of their functionality. These properties, however, are useful pieces that are not available directly through the UIView interface.

To use these properties, you need to include the QuartzCore header:

#import

Borders

To get a border, just set the borderColor and borderWidth properties of the layer, for example:

label.layer.borderColor

=

[UIColor blueColor

].CGColor;

label.layer.borderWidth

=

1;

The borderColor is a CGColorRef, which you can easily extract from any UIColor as in the above example, which generates a border like this:

0818b9ca8b590ca3270a3433284dd417.png

The border is just inside the frame of the view. Fractional values are allowed for the borderWidthas well.

Corners

You can create rounded corners with code like this:

label.layer.cornerRadius

=

20;

label.layer.borderColor

=

[UIColor grayColor

].CGColor;

label.layer.borderWidth

=

3;

just the cornerRadius property is needed; I’ve also set the border to show how these properties work together:

0818b9ca8b590ca3270a3433284dd417.png

As you can see in the example screenshot, the backgroundColor of the UIView is also restricted by the corner radius. You need to have clipsToBounds set to YES on your UIView for rounded corners to work.

Shadows

You can also create a drop shadow that will be based on the alpha component of whatever is drawn in your view. Often this will result in a shadow just around the edges of the view. This example code on a UILabel:

label.layer.shadowColor

=

[UIColor blackColor

].CGColor;

label.layer.shadowOpacity

=

1.0;

label.layer.shadowRadius

=

5.0;

label.layer.shadowOffset

= CGSizeMake

(

0,

3

);

label.clipsToBounds

=

NO;

results in this appearance:

0818b9ca8b590ca3270a3433284dd417.png

In this case, you need clipsToBounds to be NO in order for a shadow outside the frame of your view to show up. Next I’ll show you how you can actually combine rounded corners and drop shadows, since I’m sure that’s what you really want to do now.

All together

Let’s say you want to present an image with a border, rounded corners, and a drop shadow. The obvious problem from the above explanations is that clipsToBounds needs to be YES for the rounded corners to work and NO for the drop shadows. What’s a coder to do?

We can get around this apparent paradox by using the fact that the CALayer treats its own background color (which may be image-based) differently than the UIView‘s background color. Specifically, we can set clipsToBounds to NO and still achieve rounded corners by using direct properties of the layer instead of the UIView. This code:

UIView

*imgView

=

[

[

[UIView alloc

] initWithFrame

:imgFrame

] autorelease

];

imgView.backgroundColor

=

[UIColor clearColor

];

UIImage

*image

=

[UIImage imageNamed

:

@

"mandel.png"

];

imgView.layer.backgroundColor

=

[UIColor colorWithPatternImage

:image

].CGColor;

// Rounded corners.

imgView.layer.cornerRadius

=

10;

// A thin border.

imgView.layer.borderColor

=

[UIColor blackColor

].CGColor;

imgView.layer.borderWidth

=

0.3;

// Drop shadow.

imgView.layer.shadowColor

=

[UIColor blackColor

].CGColor;

imgView.layer.shadowOpacity

=

1.0;

imgView.layer.shadowRadius

=

7.0;

imgView.layer.shadowOffset

= CGSizeMake

(

0,

4

);

Generates the image on the right, using the left image as the source (mandel.png):

0818b9ca8b590ca3270a3433284dd417.png

Reference

I originally learned about this stuff from this blog post.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值