在很多的app中,会看到很多头像都是圆形带边框的。

先看看一张原始的图片,设置了一个UIView的layer图层的contents属性,让一个view也可以像UIImageView一样可以显示图片。

ios阴影规范 iphone阴影图标壁纸_阴影

ios阴影规范 iphone阴影图标壁纸_阴影_02

先定义两个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的时候,阴影就和视图一样有一个非常确定的边界线。当值越来越大的时候,边界线看上去就会越来越模糊和自然。

ios阴影规范 iphone阴影图标壁纸_阴影_02


但是我们可以看到,虽然阴影的各种条件都设置好了,但是并没有显示出阴影。这是因为在设置圆角的时候我们设置了layer的masksToBounds属性,超出父视图的部分不显示。

所以需要设置self.view1.layer.masksToBounds = false;(系统默认masksToBounds = false);再运行一下程序可以看见这样的效果

ios阴影规范 iphone阴影图标壁纸_ios_04

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;

最后我们可以看到圆形图片也能有阴影了。

ios阴影规范 iphone阴影图标壁纸_ios_05

4- 阴影优化

阴影比较消耗性能,所以如果知道了阴影长成什么样子,可以弄出一个假的阴影。shadowPath是一个CGPathRef类型(一个指向CGPath的指针)。CGPath是一个Core Graphics对象,用来指定任意的一个矢量图形。我们可以通过这个属性单独于图层形状之外指定阴影的形状。

如果是一个举行或是圆,用CGPath会相当简单明了。但是如果是更加复杂一点的图形,UIBezierPath类会更合适,它是一个由UIKit提供的在CGPath基础上的Objective-C包装类。

要能显示图层外的东西。就是masksToBounds = false;通过自定义阴影你可以显示任意形状的阴影

ios阴影规范 iphone阴影图标壁纸_阴影_06

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;

最后附上这个代码的链接地址 本文代码下载链接