对iOS控件进行圆角、阴影、背景色渐变

通常在我们的UI当中都会遇到个性化的设计，也是为了满足当下用户的喜好，提高产品的视觉效果！
本文以"UIButton"为例。

UIButton

let button = UIButton.init()
button.frame = CGRect.init(x: 100, y: 100, width: 100, height: 50)
self.view.addSubview(button)

圆角

设置clipsToBounds 和圆角半径即可实现

cornerRadius 圆角半径

 button.clipsToBounds = true    
 button.layer.cornerRadius = 15.0

阴影

阴影的设置是在fram之外进行绘制因此需要将 clipsToBounds 设置为 false

shadowColor 阴影颜色

shadowOffset 阴影偏移值 (10,20) 10:表示向下偏移 20:表示向左偏移

shadowRadius 渲染阴影的半径

shadowOpacity 阴影透明度

button.layer.shadowColor = UIColor.red.cgColor
button.layer.shadowOffset = CGSize.init(width: 0, height: 0)
button.layer.shadowRadius = 10.0;
button.layer.shadowOpacity = 1.0

渐变背景色

设置渐变背景色采用的是添加 CAGradientLayer 实现，注意添加layer层次问题

colors 设置渐变颜色

locations 渐变颜色的位置数量和颜色数组大小等同值为视图比例[0,1]

startPoint 渐变的起点按比例同比 anchorPoint

endPoint 渐变的终点按比例

将layer加载到UIButton的layer上注意添加在最底层否则会覆盖在button的content之上造成content不可见

let gradient = CAGradientLayer.init()
gradient.frame = button.bounds;
gradient.colors = [UIColor.red.cgColor, UIColor.green.cgColor]
gradient.locations = [0.2, 0.7];
gradient.startPoint = CGPoint.init(x: 0, y: 0)
gradient.endPoint = CGPoint.init(x: 1, y: 0)
button.layer.insertSublayer(gradient, at: 0)

圆角和阴影同存

根据上面的圆角、阴影我们注意到 clipsToBounds 的值是相互冲突的，因此我们需要另辟蹊径进行同时设置。
我们采用的是再添加一个layer到button的父视图layer层来做阴影展示, 设置圆角如上

let shadowLayer = CALayer.init()
shadowLayer.frame = button.frame;
shadowLayer.shadowColor = UIColor.red.cgColor
shadowLayer.shadowOffset = CGSize.init(width: 0, height: 0)
shadowLayer.shadowRadius = 12.0
shadowLayer.shadowOpacity = 0.5
shadowLayer.shouldRasterize = true
shadowLayer.rasterizationScale = UIScreen.main.scale
let path = UIBezierPath.init(roundedRect: button.frame, cornerRadius: button.layer.cornerRadius)
shadowLayer.shadowPath = path.cgPath
button.superview?.layer.insertSublayer(shadowLayer, below: sureButton.layer)

最后编辑于：2018.01.25 18:26:58