iOS开发-如何正确地给View设圆角和阴影效果

1.通过layer操作

iOS开发中，给 UIView 添加圆角通常是通过 layer.cornerRadius 来实现的。

myView.layer.cornerRadius = 10
myView.layer.masksToBounds = true

缺点：这种方式会触发离屏渲染，影响性能。

因为 masksToBounds 是导致离屏渲染的一个重要原因，为避免，最好不要设置 masksToBounds 为 true。但是注意，只使用 cornerRadius ，只在不需要裁剪视图内容时有效。

2.通过 UIBezierPath 绘制圆角

let r = 10  // 圆角半径
let maskPath = UIBezierPath(roundedRect: myView.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: r, height: r))
let maskLayer = CAShapeLayer()
maskLayer.frame = myView.bounds
maskLayer.path = maskPath.cgPath
myView.layer.mask = maskLayer

这种方式不会产生离屏渲染，但是，需要传入View.bounds，如果你使用SnapKit进行布局，bounds无法直接获取到，只有在视图布局完成后才能正确获取。所以，需要 重写 layoutSubviews() 方法，确保在布局完成后设置圆角。

class MyCustomView: UIView {
    override func layoutSubviews() {
        super.layoutSubviews()
        
        
        
    }
}

如果在 ViewController 中操作视图，则在viewDidLayoutSubviews()中完成。

设置View的阴影效果

myView.layer.shadowColor = UIColor.black.cgColor
myView.layer.shadowOpacity = 0.5
myView.layer.shadowRadius = 4
myView.layer.shadowOffset = CGSize(width: 0, height: 2)

添加阴影效果，会触发离屏渲染，因为阴影需要计算视图的形状，GPU 会进行复杂的计算。但是， 我们可以尽量设置 shadowPath，告诉系统阴影的形状，这样可以减少计算。添加代码：

myView.layer.shadowPath = UIBezierPath(rect: myView.bounds).cgPath

在同时使用圆角和阴影时，通常会产生离屏渲染。为了避免这个问题，可以将阴影效果和圆角分开处理，通常通过添加一个单独的 UIView 作为阴影层。

let shadowView = UIView(frame: myView.frame)
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowOpacity = 0.5
shadowView.layer.shadowOffset = CGSize(width: 0, height: 2)
shadowView.layer.shadowRadius = 10

shadowView.layer.cornerRadius = 10

shadowView.addSubview(myView)

补充：图片设置圆角

func createRoundedImage(image: UIImage, cornerRadius: CGFloat) -> UIImage? {
    let rect = CGRect(origin: .zero, size: image.size)
    UIGraphicsBeginImageContextWithOptions(image.size, false, image.scale)
    UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius).addClip()
    image.draw(in: rect)
    let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    return roundedImage
}