美文网首页iOS学习笔记iOS第三方插件&库iOS开发学习
给切过圆角的View,加阴影(既切圆角又加阴影)

给切过圆角的View,加阴影(既切圆角又加阴影)

作者: 香橙柚子 | 来源:发表于2017-10-13 11:54 被阅读65次

    给切过圆角的View,加阴影(既切圆角又加阴影)
    先附上效果图:

    效果图

    iOS项目上常常需要给一个View设置圆角的同时再加阴影。最近做一个项目,需要切圆角加阴影,并且还要做动画。大家都知道View处理视图布局,layer来处理动画。
    这样一来做法有两种,第一就是公司UI设计人员给切图,我们直接对切图进行操作,很简单,这里不赘述。
    但是,如果要求的地方比较少还好,如果多了,就不适合用切图了。而且不是什么时候用图片都可以的。
    所以,我们这里介绍一个用代码实现的方法。

    首先大家要明白两句代码:

    clipsToBoundsmasksToBounds。具体意思稍后给大家介绍。

    先附上一个代码,平时我们都是这么写的:

    _imgView.layer.cornerRadius = 50;   //设置imageView的圆角
    
    _imgView.layer.masksToBounds = YES;
    
    _imgView.layer.shadowColor = [UIColor blackColor].CGColor;//设置阴影的颜色
    
    _imgView.layer.shadowOpacity = 0.8;//设置阴影的透明度
    
    _imgView.layer.shadowOffset = CGSizeMake(1, 1);//设置阴影的偏移量
    
    _imgView.layer.shadowRadius = 3;//设置阴影的圆角
    
    

    但是结果会发现没有效果。
    其实原因很简单。我们已经设置出了阴影,但是masksToBounds这句代码,会把,超出View视图的部分切掉.如果masksToBounds设置为NO,阴影会在,但是圆角就会没了.

    高潮,正解来了

    现在我们先创建一个父视图,给父视图加阴影,在再给原先的视图切圆角.

      UIView *shadowView = [[UIView alloc]initWithFrame:CGRectMake(143 , 200, 100, 100)];
        
        [self.view addSubview:shadowView];
        
        shadowView.layer.shadowColor = [UIColor blackColor].CGColor;
        
        shadowView.layer.shadowOffset = CGSizeMake(5, 5);
        
        shadowView.layer.shadowOpacity = 1;
        
        shadowView.layer.shadowRadius = 9.0;
        
        shadowView.layer.cornerRadius = 9.0;
        
        shadowView.clipsToBounds = NO;
        
        [shadowView addSubview:_imgView];
     
    

    这样之后就可以了,这是为什么呢?
    我们回过头解释一下上面提到的两句代码:
    clipsToBounds
    :指的是 某视图上的子视图(注意是子视图);如果超出父视图,超出父视图的部分就会截掉;
    masksToBounds
    :指的是 某视图的图层上的子图层(还是这个视图),如果超出这个视图,就截掉.

    好了,很简单,大家理解一下.

    相关文章

      网友评论

      • 一粒咸瓜子:划重点! 性能问题怎么办?这些最好都采用绘制去做啊

      本文标题:给切过圆角的View,加阴影(既切圆角又加阴影)

      本文链接:https://www.haomeiwen.com/subject/tfpyextx.html