iOS开发之颜色渐变

CAGradientLayer

在其背景色上绘制颜色渐变的图层，填充该图层的形状(包括圆角)。

使用渐变层可以创建包含任意数量颜色的颜色渐变。默认情况下，颜色均匀地分布在整个图层中，但您可以通过渐变指定控制颜色位置的位置。

下例，显示了如何创建包含四种颜色的渐变层，这些颜色通过渐变均匀分布。将图层旋转90°(pi / 2弧度)得到水平梯度。

gradientLayer.colors = [UIColor.red.cgColor,
                        UIColor.yellow.cgColor,
                        UIColor.green.cgColor,
                        UIColor.blue.cgColor]
     
gradientLayer.transform = CATransform3DMakeRotation(CGFloat.pi / 2, 0, 0, 1)

默认方向是从上到下进行渐变

CAGradientLayer的属性

• colors

  CGColorRef对象数组，定义每个渐变停止的颜色。可以做成动画。

• locations
  一个可选的NSNumber对象数组，定义每个渐变停止的位置。可以做成动画。

• endPoint
  在图层的坐标空间中绘制渐变的终点。可以做成动画。

  终点对应梯度的最后一站。点在单位坐标空间中定义，然后在绘制时映射到层的边界矩形。默认值为(0.5,1.0)。

• startPoint

  在图层的坐标空间中绘制渐变的起始点。可以做成动画。

  起始点对应于梯度的第一个停止点。点在单位坐标空间中定义，然后在绘制时映射到层的边界矩形。默认值为(0.5,0.0)。

• type

  由图层绘制的渐变样式。 默认X轴

• transform
  相对于其边界矩形的锚点应用于层的变换。默认为单位变换。可以做成动画。

示例：

 // 设置一个渐变按钮
 let d = QMUIButton()
 d.setTitle(R.string.localizable.settingNavUserTxt(), for: .normal)
 d.setTitleColor(.white, for: .normal)
 d.titleLabel?.font = UIFont.systemFont(ofSize: FONT_MEDDLE)
 d.backgroundColor = .primaryColor
 d.cornerRadius = 8
 // 必须使用CGRect去设置大小
 d.frame = CGRect(x: 0, y: 0, width: 168, height: 40)
 // 设置渐变色
 let gradient = CAGradientLayer()
 gradient.colors = [UIColor(red: 1, green: 1, blue: 1, alpha: 0).cgColor,UIColor(red: 1, green: 1, blue: 1, alpha: 0.4).cgColor]
 gradient.transform = CATransform3DMakeRotation(0, 0, 0, 1)
 gradient.frame = d.bounds
 gradient.borderWidth = 2
 gradient.borderColor = UIColor.primaryColor.cgColor
 gradient.cornerRadius = 8
 gradient.startPoint = CGPoint(x: 0, y: 0)
 gradient.endPoint = CGPoint(x: 0, y: 1)
 // 将渐变添加到按钮layer上
 d.layer.addSublayer(gradient)
 d.clipsToBounds = true

效果如图：