UIView圆角阴影

August 14, 2020

1). CALayer负责内容的显示。drawRect会将内容绘制到layer。绘制完成后系统将图层拷贝到屏幕上。

2). 关于maskToBounds:

1.设置圆角 a.layer.cornerRadius = 10, 正常情况下a会添加上圆角。如果a上添加一个label或者button等控件，子视图添加圆角，子视图的圆角不可见。这时需要设置子视图.layer.masksToBounds = YES才能添加上圆角。但是如果设置了masksToBounds阴影会被截断不显示。

3). 复杂页面中，例如collectionView的decorationView等，设置方法可参考如下代码:

// 必须设置
self.backgroundView.layer.masksToBounds = false
self.backgroundView.clipsToBounds = false

// backgroundColor
self.backgroundView.backgroundColor = model.backgroundColor

// border
self.backgroundView.layer.borderColor = model.borderColor.cgColor
self.backgroundView.layer.borderWidth = model.borderWidth

// corner radius
self.backgroundView.layer.cornerRadius = model.cornerRadius

// shadow
self.backgroundView.layer.shadowColor = model.shadowColor
self.backgroundView.layer.shadowOffset = model.shadowOffset
self.backgroundView.layer.shadowOpacity = Float(model.shadowOpacity)
self.backgroundView.layer.shadowRadius = model.shadowRadius

4). 离屏渲染问题。处理圆角常见的做法是使用core graphic生成圆角图片，用图片替代设置layer的代码。或者参考下texture的处理方式。

5). collecitonViewCell的圆角阴影设置方法如下所示

   override func awakeFromNib() {
        super.awakeFromNib()
        self.backgroundColor = UIColor.white
        shadowDecorate()
    }

    func shadowDecorate() {
        let radius: CGFloat = 10
        contentView.layer.cornerRadius = radius
        contentView.layer.borderWidth = 1
        contentView.layer.borderColor = UIColor.clear.cgColor
        contentView.layer.masksToBounds = true

        layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.06).cgColor
        layer.shadowOffset = CGSize(width: 0, height: 1.0)
        layer.shadowRadius = 16.5
        layer.shadowOpacity = 1
        layer.masksToBounds = false
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
        layer.cornerRadius = radius
    }