iOS 视图实现渐变色背景
需求目标是要实现视图的自定义的渐变背景色，实现一个可以或许随时使用的工具。
实现讨论
在 iOS 中，如果设置视图单一的背景色，是很简单的。可是，如果要设置渐变的背景色，该怎么实现呢？其实也没有很是麻烦，其中使用到了 CAGradientLayer 类，只要设置好 CAGradientLayer 对象的属性，然后添加到指定视图即可。
CAGradientLayer 类
[*]locations: 指定每一个渐变段的结束
[*]startPoint：对应的是第一个渐变结束的点（指的是指定的颜色中，第一个颜色渐变制止的位置）
[*]endPoint：对应的是最后一个渐变结束的点（指的是指定的颜色中，最后一个颜色中渐变制止的位置）
[*]colors: 指定每个渐变区间的颜色
关于 locations 代码解释文档如下：
/* An optional array of NSNumber objects defining the location of each
* gradient stop as a value in the range . The values must be
* monotonically increasing. If a nil array is given, the stops are
* assumed to spread uniformly across the range. When rendered,
* the colors are mapped to the output colorspace before being
* interpolated. Defaults to nil. Animatable. */
open var locations: ? locations 中的每一个值，指定的是在渐变方向上每一个渐变制止的位置。默认为空，如果为空，则为匀称渐变。数组的大小不必和渐变区间的数量相同。
渐变的方向就是两个点毗连后指向的方向。
留意这里的坐标： 代表的是图层的左上角， 代表的算是右下角。苹果的代码文档中说的是错误的，解释中的是 macOS 的坐标系统，stackoverflow 上的相关问题 https://stackoverflow.com/questions/20387803/how-to-change-cagradientlayer-color-points
/* The start and end points of the gradient when drawn into the layer's
* coordinate space. The start point corresponds to the first gradient
* stop, the end point to the last gradient stop. Both points are
* defined in a unit coordinate space that is then mapped to the
* layer's bounds rectangle when drawn. (I.e. is the bottom-left
* corner of the layer, is the top-right corner.) The default values
* are [.5,0] and [.5,1] respectively. Both are animatable. */
open var startPoint: CGPoint
open var endPoint: CGPoint 示例
1 右下方向渐变
startPoint = CGPoint(x: 0, y: 0)
endPoint = CGPoint(x: 0.5, y: 0.5)
colors = 绿色是从左上角 (0, 0) 开始渐变，红色是截止到 (0.5, 0.5) 不再渐变，右下部分的红色都是纯红色的
https://i-blog.csdnimg.cn/blog_migrate/67cfde853188659f343bb3c4b8ac16fa.png
2. 整个视图从左上角到右下角渐变
startPoint = CGPoint(x: 0, y: 0)
endPoint = CGPoint(x: 1, y: 1)
colors = https://i-blog.csdnimg.cn/blog_migrate/35ec52be506deb089bda950c6b65f1f4.png
3. 调换颜色渐变方向
startPoint = CGPoint(x: 1, y: 1)
endPoint = CGPoint(x: 0, y: 0)
colors = https://i-blog.csdnimg.cn/blog_migrate/b87501fd744acdee0f929ed0e4179a13.png
4. 垂直渐变
startPoint = CGPoint(x: 0, y: 0)
endPoint = CGPoint(x: 0, y: 1)
colors = https://i-blog.csdnimg.cn/blog_migrate/abedacd6fee64f524407c4482aad2672.png
代码
/*
* 设置视图渐变背景色
*
* @param view 要设置的视图
* @param frame 区域大小
* @param colors 渐变颜色数组
* @param horizontal 渐变方向
* @param cornerRadius 圆角大小
*
*/
public static func setGradientBackgroundColor(view: UIView, frame: CGRect, colors: , horizontal: Bool, cornerRadius: CGFloat = 0.0) -> CAGradientLayer {
let startPoint = CGPoint.init(x: 0.0, y: 0.0)
var endPoint = CGPoint.init(x: 1.0, y: 0.0)
if horizontal == false {
endPoint = CGPoint.init(x: 0.0, y: 1.0)
}
// 根据颜色的个数生成 locatios
var locations: = ()
let interval = 1.0 / (Double(colors.count) - 1)
for (index, _) in colors.enumerated() {
locations.append(interval * Double(index) as NSNumber)
}
let gradientLayer: CAGradientLayer = getGradientLayer(frame: frame, startPoint: startPoint, endPoint: endPoint, locations: locations, colors: colors)
gradientLayer.zPosition = -10000
gradientLayer.cornerRadius = cornerRadius
view.layer.addSublayer(gradientLayer)
return gradientLayer
}
/**
*
* 获取一个颜色渐变层
*
* @param frame 大小
* @param startPoint 颜色渐变起点
* @param endPoint 颜色渐变终点
* @param locations 颜色数组对应的点
* @param colors 渐变颜色数组
*
* @return 颜色渐变层
*
*/
public static func getGradientLayer(frame: CGRect, startPoint: CGPoint, endPoint: CGPoint, locations: , colors: ) -> CAGradientLayer {
let gradientLayer = CAGradientLayer.init()
gradientLayer.frame = frame
gradientLayer.startPoint = startPoint
gradientLayer.endPoint = endPoint
gradientLayer.locations = locations
gradientLayer.colors = colors
return gradientLayer
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]