iOS初中级开发iOS学习

swift CAGradientLayer颜色渐变器

2018-06-28  本文已影响28人  darrenW

我们想设置一个view的颜色,通常可以用backgroundColor方法,但是这只能设置纯色背景。如果想实现渐变色背景,一种方法是使用Core Graphics,还有一种方法就是本文要提的CAGradientLayer。
CAGradientLayer是用来生成两种或者多种颜色平滑渐变的,其好处是CAGradientLayer在于绘制使用了硬件加速。

1、属性基本介绍:

//颜色数组,定义渐变层的各个颜色
open var colors: [Any]?
//决定每个渐变颜色的终止位置,这些值必须是递增的,数组的长度和 colors 的长度最好一致
open var locations: [NSNumber]?
//渲染的起始位置,默认值是:[.5,0](具体坐标系参考下图)
open var startPoint: CGPoint
//渲染的终止位置,默认值是:[.5,1](具体坐标系参考下图)
open var endPoint: CGPoint
//默认值是axial,表示按像素均匀变化。除了默认值也无其它选项
open var type: String
坐标系参考.png

2、渐变色背景

let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.view.bounds
self.view.layer.addSublayer(gradientLayer)
gradientLayer.colors = [UIColor.red.cgColor,
                                UIColor.yellow.cgColor,
                                UIColor.orange.cgColor]
let gradientLocations:[NSNumber] = [0.0,0.8,1.0]
gradientLayer.locations = gradientLocations
gradientLayer.startPoint = CGPoint.init(x: 0, y: 0)
gradientLayer.endPoint = CGPoint.init(x: 1, y: 1)

效果图如下:


渐变色背景.png

3、文字添加渐变色

//首先分别创建渐变层和文本标签,然后将渐变层的mask设置为文本标签即可。
let containerView = UIView.init(frame: CGRect.init(x: 20, y: 100, width: 200, height: 60))
self.view.addSubview(containerView)
        
let label = UILabel.init(frame: CGRect.init(x: 0, y: 0, width: 200, height: 60))
label.text = "Darren wang"
label.font = UIFont.boldSystemFont(ofSize: 26)
containerView.addSubview(label)
        
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.orange.cgColor, UIColor.yellow.cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.frame = label.frame
containerView.layer.insertSublayer(gradientLayer, at: 0)
gradientLayer.mask = label.layer

效果图如下:


文字渐变色.png

4、边界渐隐效果

//原理同文字渐变色,但是使用的是透明度渐变。依然为容器view设置遮罩,主要代码如下
let containerView = UIView.init(frame: CGRect.init(x: 0, y: 150, width: view.frame.size.width, height: view.frame.size.height-150))
view.addSubview(containerView)
        
let tableView = UITableView()
tableView.frame = containerView.bounds
tableView.backgroundColor = .clear
tableView.separatorStyle = .none
tableView.rowHeight = 30
tableView.register(TableViewCell.self, forCellReuseIdentifier: "cell")
tableView.dataSource = self
containerView.addSubview(tableView)
        
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.black.withAlphaComponent(0.0).cgColor,
        UIColor.black.cgColor]
gradientLayer.frame = containerView.frame
gradientLayer.locations = [0,0.15,1]
containerView.layer.mask = gradientLayer

效果图如下:


边界渐隐效果.png

以上代码扔到了github:https://github.com/darren1192/WHSwiftDemo

上一篇下一篇

猜你喜欢

热点阅读