iOS效果 :(1) CALayer 图层阴影,边框,圆角,圆型图片的阴影

在很多的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;

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值