iOS 阴影，圆角，避免离屏渲染

原理网上能搜到很多，本文只讲实践

测试环境：

1. Xcode 10.0
2. Swift 4.2
3. iPhone 7模拟器, iOS 12.0
4. 真机 iPhone 6, iOS 10.3.3
5. Demo

---

首先普及一下CALayer的层次结构

CALayer由背景色backgroundColor、内容contents、边缘borderWidth&borderColor构成。下面图片是从别人文章里拿过来的，很直观形象的说明了CALayer的组成部分

CALayer组成部分

离屏渲染的检测手段

1. 联机调试时

   
   
   image.png

2. 模拟器的 debug -> 选取 color Offscreen-Rendered

   
   
   模拟器-->debug
   
   

   以下离屏渲染的优化

---

1. shadow (阴影)

常用阴影方法：

let shadowView = UIView()
shadowView.frame = CGRect(x: 50, y: 100, width: 200, height: 200)
shadowView.layer.backgroundColor = UIColor.green.cgColor
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowOpacity = 0.5
shadowView.layer.shadowRadius = 10
shadowView.layer.shadowOffset = CGSize(width: 10, height: 10)
view.addSubview(shadowView)

效果图，黄色部分产生的离屏渲染：

阴影效果产生的离屏渲染

优化方法：设置阴影后，设置CALayer的 shadowPath

let shadowView = UIView()
shadowView.frame = CGRect(x: 50, y: 100, width: 200, height: 200)
shadowView.layer.backgroundColor = UIColor.green.cgColor
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowOpacity = 0.5
shadowView.layer.shadowRadius = 10
shadowView.layer.shadowOffset = CGSize(width: 10, height: 10)
shadowView.layer.shadowPath = UIBezierPath(rect: shadowView.bounds).cgPath
view.addSubview(shadowView)

优化后效果图：

优化后的阴影部分没有离屏渲染

2. 圆角

分别讲了UIView, UILable, UIImageView, UIButton设置圆角

2.1 UIView

UIView设置圆角不会产生离屏渲染

let cornerView = UIView()
cornerView.frame = CGRect(x: 50, y: 100, width: 200, height: 200)
cornerView.backgroundColor = .red
cornerView.layer.cornerRadius = 20
view.addSubview(cornerView)

2.2 UILabel

如下图，饿了么-次日达 用UILabel实现

饿了么

用以下实现则会产生离屏渲染：

let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let label = UILabel(frame: CGRect(x: 100, y: 100, width: 60, height: 22))
label.text = "准时达"
label.textColor = color
label.textAlignment = .center
label.layer.cornerRadius = 5
label.layer.borderColor = color.cgColor
label.layer.borderWidth = 1
label.layer.masksToBounds = true
view.addSubview(label)

圆角处有黄色说明产生的离屏渲染

image.png

网上很多文章都说到masksToBounds = true 产生了离屏渲染。
这个例子中去掉masksToBounds = true能达到同样的圆角效果，并且没有离屏渲染。但是如果label有背景色会是什么效果？

let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let label = UILabel(frame: CGRect(x: 100, y: 100, width: 60, height: 22))
label.text = "准时达"
label.textColor = color
label.textAlignment = .center
label.layer.cornerRadius = 5
label.layer.borderColor = color.cgColor
label.layer.borderWidth = 1
label.backgroundColor = UIColor.lightGray
//label.layer.masksToBounds = true
view.addSubview(label)

image.png

显示圆角对背景色没有作用。layer.cornerRadius只对layer有效果。可以做如下优化：

let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let label = UILabel(frame: CGRect(x: 100, y: 100, width: 60, height: 22))
label.text = "准时达"
label.textColor = color
label.textAlignment = .center
label.layer.cornerRadius = 5
label.layer.borderColor = color.cgColor
label.layer.borderWidth = 1
label.layer.backgroundColor = UIColor.lightGray.cgColor
//label.layer.masksToBounds = true
view.addSubview(label)

把label.backgroundColor = UIColor.lightGray换成label.layer.backgroundColor = UIColor.lightGray.cgColor

image.png

达到效果并且不会产生离屏渲染

2.3 UIImageView

iOS 9.0 之后UIImageView里png图片设置圆角不会触发离屏渲染了

let imageView = UIImageView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
imageView.image = UIImage(named: "photo")
imageView.layer.cornerRadius = 20
imageView.layer.masksToBounds = true
view.addSubview(imageView)

没有离屏渲染

但是给imageView添加背景色后再加圆角会有离屏渲染，应该很少有这么奇葩需求吧

let imageView = UIImageView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
imageView.image = UIImage(named: "photo")
imageView.layer.cornerRadius = 20
imageView.layer.masksToBounds = true
imageView.backgroundColor = .green
view.addSubview(imageView)

有离屏渲染

2.4 UIButton

依然以饿了么-准时达效果为例

2.4.1 UIButton文字 + 圆角

文字加圆角很简单，只要不设置button.clipsToBounds = true就不会有离屏渲染

let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let button = UIButton(type: .custom)
button.frame = CGRect(x: 100, y: 100, width: 60, height: 22)
button.setTitle("准时达", for: .normal)
button.setTitleColor(color, for: .normal)
button.layer.cornerRadius = 5
button.layer.borderColor = color.cgColor
button.layer.borderWidth = 1
// button.clipsToBounds = true
view.addSubview(button)

2.4.1 UIButton 设置图片

添加button.clipsToBounds = true时会有离屏渲染，不添加达不到圆角效果

let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let image = createImage(color: color, frame: CGRect(x: 0, y: 0, width: 60, height: 22))
let button = UIButton(type: .custom)
button.frame = CGRect(x: 100, y: 100, width: 60, height: 22)
button.setImage(image, for: .normal)
button.layer.cornerRadius = 5
button.layer.borderColor = color.cgColor
button.layer.borderWidth = 1
//button.clipsToBounds = true
view.addSubview(button)

不添加button.clipsToBounds = true

添加button.clipsToBounds = true

优化方法：对图片设置圆角，不要对button设置圆角。可以达到圆角效果并且不会有离屏渲染

let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let image = createImage(color: color, frame: CGRect(x: 0, y: 0, width: 60, height: 22))
let button = UIButton(type: .custom)
button.frame = CGRect(x: 100, y: 100, width: 60, height: 22)
button.setImage(image, for: .normal)
button.imageView?.layer.cornerRadius = 5
view.addSubview(button)

image.png

性能影响

Demo

性能测试结果发现阴影离屏渲染的影响明显大于圆角离屏渲染的影响

圆角-离屏渲染.png

圆角-非离屏渲染.png

阴影-离屏渲染.png

阴影-非离屏渲染.png

参考链接

iOS 离屏渲染优化(Offscreen Render)