【iOS】实现UIView任意圆角+绘制阴影

示例效果图

要求：

• Platform: iOS8.0+
• Language: Swift3.1
• Editor: Xcode8.3+

2018-06-27补充

要想实现任意圆角+阴影，则只能通过两个view（也可以是一个view的多个layer）实现了，其中一个view只负责投影（注意背景色为nil），另外一个负责圆角显示（显示内容主要在这个view上）。

• view方式

// 阴影
self.shadowView.backgroundColor = nil;
    self.shadowView.layer.masksToBounds = NO;
    self.shadowView.layer.shadowOpacity = 1;
    self.shadowView.layer.shadowOffset = CGSizeZero;
    self.shadowView.layer.shadowRadius = 10;

// 任意圆角
    CGPathRef path = [UIBezierPath bezierPathWithRoundedRect:self.cornerView.bounds 
byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(40, 40)].CGPath;
    CAShapeLayer *lay = [CAShapeLayer layer];
    lay.path = path;
    self.cornerView.layer.mask = lay;

• layer方式

// 阴影
    self.shadowView.backgroundColor = nil;
    self.shadowView.layer.masksToBounds = NO;
    self.shadowView.layer.shadowOpacity = 1;
    self.shadowView.layer.shadowOffset = CGSizeZero;
    self.shadowView.layer.shadowRadius = 10;

    CALayer *cornerLayer = [CALayer layer];
    cornerLayer.frame = self.shadowView.bounds;
    cornerLayer.backgroundColor = self.cornerView.backgroundColor.CGColor;
    
// 任意圆角
    CGPathRef path = [UIBezierPath bezierPathWithRoundedRect:self.cornerView.bounds 
byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(40, 40)].CGPath;
    CAShapeLayer *lay = [CAShapeLayer layer];
    lay.path = path;
    cornerLayer.mask = lay;
    
    [self.shadowView.layer addSublayer:cornerLayer];

效果

2018-04-28补充

后来尝试发现：view的圆角、阴影、边框其实是可以共存的（注意不要设置maskToBounds为YES、并且最为关键的是borderWidth不要设置为0，这样就可以达到圆角-borderWidth导致的圆角，和阴影共存了）

        _backView.layer.shadowColor = UIColor.greenColor.CGColor;
    _backView.layer.borderColor = _backView.layer.shadowColor; // 边框颜色建议和阴影颜色一致
    _backView.layer.borderWidth = 0.000001; // 只要不为0就行
    _backView.layer.cornerRadius = 40;
    _backView.layer.shadowOpacity = 1;
    _backView.layer.shadowRadius = 20;
    _backView.layer.shadowOffset = CGSizeZero;

最终效果

1. 圆角

给一个UIView设置圆角主要通过：

view.layer.cornerRadius = 10

也可以设置一些属性，增加绘制效率

// 设置缓存
view.layer.shouldRasterize = true
// 设置抗锯齿边缘
view.layer.rasterizationScale = UIScreen.main.scale
// 内容缩放比
view.layer.contentsScale =  UIScreen.main.scale

radius=20, 但这种情况下无法和阴影属性共存

2. 阴影

给一个UIView设置阴影主要通过：

view.shadowColor = color.cgColor
view.shadowOffset = CGSize(width: offsetX, height: offsetY)
view.shadowRadius = radius
view.shadowOpacity = opacity //默认为0
// view.shadowPath = UIBezierPath(rect: view.bounds).CGPath

(10,10) 10 1

3. 任意圆角

如果要给一个view设置任意的一个/多个圆角，那么上面的方法就不适用了，得设置view.layer.mask达到任意圆角/形状的目的：

let corners: UIRectCorner = [UIRectCorner.topLeft, UIRectCorner.topRight]
// 或者设置所有圆角.allCorners
let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
maskLayer.frame = bounds
view.layer.mask = maskLayer

(20,20)，这种情况下同样无法和阴影共存

4. 绘制阴影

这种情况下，就无法通过属性实现了，而是绘制矩形，并绘制和其绑定的阴影图形：

override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        let path = UIBezierPath(rect: bounds.insetBy(dx: 20, dy: 20))
        UIColor.white.setFill() //路径填充颜色
        let conext = UIGraphicsGetCurrentContext()
        conext?.setShadow(offset: CGSize(width: 10, height: 10), blur: 10, color: UIColor.black.cgColor) //阴影绘制，直接附加到path上了
        path.fill()
}

(10,10) 10

5. 任意圆角+阴影

如果同时要实现任意圆角+阴影，只能通过4+3的方式在draw(_ rect: CGRect)方法中：

• 绘制阴影

let corners: UIRectCorner = [UIRectCorner.topLeft, UIRectCorner.topRight]
let shadowPath = UIBezierPath(roundedRect: rect.insetBy(dx: shadowRadius, dy: shadowRadius), byRoundingCorners: corners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
let context = UIGraphicsGetCurrentContext()
context?.setShadow(offset: shadowOffset, blur: shadowRadius, color: shadowColor.cgColor)
fillColor.setFill()
shadowPath.fill()

• 绘制圆角

let corners: UIRectCorner = [UIRectCorner.topLeft, UIRectCorner.topRight]
let maskPath = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.cgPath
maskLayer.frame = rect
layer.mask = maskLayer

但这种情况下要注意设置layoutMargins，避免子view被裁剪

6. 源码

• 支持xib & stroyboard

//  CornerShadowView.swift

import UIKit

@IBDesignable
class CornerShadowView: UIView {

// MARK: - IBOutlet
    
// MARK: - properties
    @IBInspectable
    public var topLeft: Bool = false{
        didSet{
            redraw()
        }
    }
    
    @IBInspectable
    public var bottomLeft: Bool = false{
        didSet{
            redraw()
        }
    }
    
    @IBInspectable
    public var topRight: Bool = false{
        didSet{
            redraw()
        }
    }
    
    @IBInspectable
    public var bottomRight: Bool = false{
        didSet{
            redraw()
        }
    }
    
    @IBInspectable
    public var cornerRadius: CGFloat = 10{
        didSet{
            redraw()
        }
    }
    @IBInspectable
    public var shadowOffset: CGSize = .zero{
        didSet{
            redraw()
        }
    }
    @IBInspectable
    public var shadowRadius: CGFloat = 0{
        didSet{
            redraw()
        }
    }
    @IBInspectable
    public var shadowColor: UIColor = .black{
        didSet{
            redraw()
        }
    }
    @IBInspectable
    public var fillColor: UIColor = .white{
        didSet{
            redraw()
        }
    }
    public var margins: UIEdgeInsets = .zero{
        didSet{
            redraw()
        }
    }
    
// MARK: - initial method
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        var corners: UIRectCorner = []
        if topLeft {
            corners.insert(.topLeft)
        }
        if bottomLeft {
            corners.insert(.bottomLeft)
        }
        if topRight {
            corners.insert(.topRight)
        }
        if bottomRight {
            corners.insert(.bottomRight)
        }
        
        if shadRadius > 0 {
            //绘制阴影
            let shadowPath = UIBezierPath(roundedRect: rect.insetsWithMargins(margins), byRoundingCorners: corners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
            
            let context = UIGraphicsGetCurrentContext()
            context?.setShadow(offset: shadOffset, blur: shadowRadius, color: shadowColor.cgColor)
            fillColor.setFill()
            shadowPath.fill()
        }
        
        //绘制mask
        let maskPath = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))

        let maskLayer = CAShapeLayer()
        maskLayer.path = maskPath.cgPath
        maskLayer.frame = rect
        layer.mask = maskLayer
    }
    
// MARK: - lifecycle
    override func awakeFromNib() {
        super.awakeFromNib()
        
    }
    
// MARK: - private method
    fileprivate func redraw(){
        setNeedsDisplay()
        if shadowRadius > 0 {
            backgroundColor = UIColor.clear
        }
    }
}