iOS 给一个视图添加圆角的同时设置阴影

最新推荐文章于 2022-02-23 17:18:57 发布

刘小哈哈哈

最新推荐文章于 2022-02-23 17:18:57 发布

阅读量982

点赞数

分类专栏： UI

本文链接：https://blog.csdn.net/LIUXIAOXIAOBO/article/details/117597332

版权

UI 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

首先看效果图

需求：一个视图有圆角，又要有阴影，之前做过类似需求，这次又遇到了，便记录下来

供参考

一，我们做圆角的时候，需要设置layer的maskToBounds 属性置为YES，这时候，如果我们

再设置该视图的阴影是没有效果的，因为maskToBounds 的时候，超出视图范围的内容都会

切掉（展示不出来）

所以我们换种思路，就想到，我们能不能添加一个CAShapeLayer, 使用贝塞尔曲线绘制一个带圆角的Layer,然后给layer添加阴影，后来也确实是使用这种方案来实现的

下面我们来看实现的源代码

创建 CAShapeLayer.

- (CAShapeLayer *)titleShadowLayer
{
    if (!_titleShadowLayer) {
        _titleShadowLayer = [[CAShapeLayer alloc] init];
        _titleShadowLayer.backgroundColor = CardBackGroundColor.CGColor;
        _titleShadowLayer.fillColor = CardBackGroundColor.CGColor;
        _titleShadowLayer.shadowColor = [UIColor colorWithRed:222/255.0 green:228/255.0 blue:230/255.0 alpha:1.0].CGColor;
        _titleShadowLayer.shadowOffset = CGSizeMake(0,2);
        _titleShadowLayer.shadowOpacity = 1;
        _titleShadowLayer.shadowRadius = 4;
    }
    return _titleShadowLayer;
}

添加自视图和子layer，注意该layer要放在展示阴影视图的下面，避免遮盖住需要展示的视图

    [self.layer addSublayer:self.titleShadowLayer];
    [self addSubview:self.titleLabel];

设置Layer 的贝塞尔曲线路径

    [self layoutIfNeeded];
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.titleLabel.frame byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(13.5 * rectScale(), 13.5 * rectScale())];
    self.titleShadowLayer.path = path.CGPath;

这里有一点需要注意： _titleShadowLayer.fillColor = CardBackGroundColor.CGColor; 这句代码不能省略，否则我们的Layer 会展示

成全黑的背景色

那么为什么我们自己有创建了一个Layer，而不是用原来视图的Layer 使用贝塞尔曲线圆角呢，以为视图的layer是CALayer类型的，没有path属性

而我们创建的是CAShapeLayer类型的，可以绘制贝塞尔曲线，

通过以上代码，我们就实现了设计稿里面需要的给一个视图添加圆角，并展示阴影