在很多的app中,会看到很多头像都是圆形带边框的。
先看看一张原始的图片,设置了一个UIView的layer图层的contents属性,让一个view也可以像UIImageView一样可以显示图片。
先定义两个View :
var view1:UIView!;
var view2:UIView!;
1- 圆角和边框
// 超出父视图不显示,类似UIView的clipsToBounds
self.view1.layer.masksToBounds = true;
// 设置圆角
self.view1.layer.cornerRadius = self.view1.frame.size.width/2;
// 边框的宽度和颜色
self.view1.layer.borderWidth = 2;
self.view1.layer.borderColor = UIColor.blackColor().CGColor;
必须设置masksToBounds = true;不然本应该被切掉的边角还是会显示在方形的图片上。
2 - 阴影
// 设置阴影的透明度 0~1.0
self.view1.layer.shadowOpacity = 0.5;
// 阴影的颜色
view1.layer.shadowColor = UIColor.redColor().CGColor;
// 阴影的位移
view1.layer.shadowOffset = CGSizeMake(0, 3);
// 阴影的模糊程度
self.view1.layer.shadowRadius = 10;
shadowOffset: CGSize :宽度控制这阴影横向的位移,高度控制着纵向的位移。shadowOffset的默认值是 {0, -3},意即阴影相对于Y轴有3个点的向上位移
shadowRadius: 控制着阴影的模糊度,当它的值是0的时候,阴影就和视图一样有一个非常确定的边界线。当值越来越大的时候,边界线看上去就会越来越模糊和自然。
但是我们可以看到,虽然阴影的各种条件都设置好了,但是并没有显示出阴影。这是因为在设置圆角的时候我们设置了layer的masksToBounds属性,超出父视图的部分不显示。
所以需要设置self.view1.layer.masksToBounds = false;(系统默认masksToBounds = false);再运行一下程序可以看见这样的效果
3.- 圆形图片的阴影
要是能把上面两个效果结合一下就好了,下面来说说怎么做,其实很简单,给圆形图片添加一个父View。用到我们前面定义的view2,和view1一样大小,然后把让view2成为view1的父视图(注意吧view1的x,y坐标都变成0);
self.view1 = UIView(frame: CGRectMake(0, 0, 200, 200));
self.view1.layer.contents = UIImage(named: "1.jpg")?.CGImage;
view2 = UIView(frame: CGRectMake(80, 150, 200, 200));
self.view.addSubview(view2);
self.view2.addSubview(view1);
然后按照1的方法把view1变成圆形。对父视图view2进行阴影的设置。
self.view2.layer.shadowOpacity = 0.9;
view2.layer.shadowOffset = CGSizeMake(0, 5);
self.view2.layer.shadowRadius = 10;
最后我们可以看到圆形图片也能有阴影了。
4- 阴影优化
阴影比较消耗性能,所以如果知道了阴影长成什么样子,可以弄出一个假的阴影。shadowPath是一个CGPathRef类型(一个指向CGPath的指针)。CGPath是一个Core Graphics对象,用来指定任意的一个矢量图形。我们可以通过这个属性单独于图层形状之外指定阴影的形状。
如果是一个举行或是圆,用CGPath会相当简单明了。但是如果是更加复杂一点的图形,UIBezierPath类会更合适,它是一个由UIKit提供的在CGPath基础上的Objective-C包装类。
要能显示图层外的东西。就是masksToBounds = false;通过自定义阴影你可以显示任意形状的阴影
self.view2.layer.shadowOpacity = 0.8;
let path = CGPathCreateMutable();
//画一个圆形的阴影
CGPathAddArc(path, nil, 200, 200, 20, 0, CGFloat(M_PI*2), true);
self.view2.layer.shadowPath = path;
最后附上这个代码的链接地址 本文代码下载链接