swift给cell增加渐变图层

给view增加渐变图层，网上有很多例子，但是大部分都是使用CAGradientLayer直接给ViewController的View增加渐变图层，
但是，给cell的contentview增加渐变图层的比较少，
公司项目需求，需要给cell增加渐变图层，中间遇到了一些问题，这里记录下，有不对的地方欢迎各位指正，或者有更好的方法可以大家一起分享

一：首先是给ViewController的View增加渐变图层，网上有很多例子，这里简单的说下

class ViewController: UIViewController {
 
    override func viewDidLoad() {
        super.viewDidLoad()
         
        //定义渐变的颜色（从黄色渐变到橙色）
        let topColor = UIColor(red: 0xfe/255, green: 0xd3/255, blue: 0x2f/255, alpha: 1)
        let buttomColor = UIColor(red: 0xfc/255, green: 0x68/255, blue: 0x20/255, alpha: 1)
        let gradientColors = [topColor.cgColor, buttomColor.cgColor]
         
        //定义每种颜色所在的位置,这里的Locations是指颜色占用view的比例，数量最好跟gradientColors的数量相同
        let gradientLocations:[NSNumber] = [0.0, 1.0]
         
      /*
      创建CAGradientLayer对象并设置参数，
      需要在viewDidLayoutSubviews方法里面重绘坐标的，
     将gradientLayer设置为全局的变量
     */
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColors
        gradientLayer.locations = gradientLocations
         
        //设置其CAGradientLayer对象的frame，并插入view的layer
        gradientLayer.frame = self.view.frame
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }
 
  /*
如果上面代码完成之后，运行项目，颜色还是出不来，可以在viewDidLayoutSubviews方法里面，重绘下gradientLayer的坐标就可以了
*/
 override func viewDidLayoutSubviews() {
        gradientLayer.frame = self.view.frame
    }
}

运行效果如下图

2017082520444079435.png

二：给cell的contentview增加渐变图层，代码如下

（1）创建一个自定义cell
我创建自定义cell的时候，不是纯代码创建的，这个看个人爱好，这里只截取渐变图层部分的代码

//这里是加载xib时的方法，不用多说
 override func awakeFromNib() {
        super.awakeFromNib()
        
        imgView.layer.masksToBounds = true;
        imgView.layer.cornerRadius = 5;
        // Initialization code
        setSubviewWays(alView: alphaView)
    }
    
    //这个是增加渐变图层的方法
    func setSubviewWays(alView:UIView) {
        //将颜色和颜色的位置定义在数组内
        let gradientColors: [CGColor] = [CommonColor(red: 52, green: 52, blue: 52, alpha: 0.53).cgColor,  CommonColor(red: 255, green: 255, blue: 255, alpha: 0).cgColor]
        gradientLayer.colors = gradientColors
        //(这里的起始和终止位置就是按照坐标系,四个角分别是左上(0,0),左下(0,1),右上(1,0),右下(1,1))
        gradientLayer.cornerRadius = 5;
        
        //渲染的起始位置
        gradientLayer.startPoint = CGPoint(x:0,y:0)
        
        //渲染的终止位置
        gradientLayer.endPoint = CGPoint(x:0, y:1)
        //设置frame和插入view的layer，这个locations未设置，默认所有颜色平分
        //gradientLayer.locations = [0.0, 1.0];
        
        gradientLayer.frame = alphaView.bounds
        alView.layer.insertSublayer(gradientLayer, at: 0)
    }

代码写到这里，按说渐变图层已经可以正常显示了，
但是，运行结果是这样的

97AA5F3E-FC9B-4FDE-8202-220526CAC1FE.png

我们的需求是，只有这一部分是渐变图层，
所以我是在顶部增加的一个这么高的view特地来显示渐变图层的
重点在右边，我增加的渐变图层view，明明是距右侧20px，
但是，这里增加渐变图层之后，超出了view本身的宽度，就是这个问题，浪费的好一会儿的时间
后来，在网上看了cell的绘制过程，问题大概是这样的，因为cell绘制的时候layer的坐标不能准确的绘制，需要在layoutSubviews方法里面重新赋值渐变层的坐标，于是增加layoutSubviews方法

 override func layoutSubviews() {
        gradientLayer.frame = alphaView.bounds
        // Configure the view for the selected state

    }

结果是：刚运行完成是上面的情况，然后滑动一下cell，就正常了

QQ20180611-105919.gif

另外：在setSelected方法中增加gradientLayer.frame = alphaView.bounds，刚运行完成不正常，点击一次cell，就正常了，

这两种都不是我需要的，我需要，运行之后显示就正常，
最后，想着是不是在ViewController里面刷新一下tableview就可以了，于是在ViewController中增加

override func viewDidLayoutSubviews() {
        deviceTableView.reloadData()
    }

单独在ViewController中增加viewDidLayoutSubviews，也是不行的，跟第一个截图问题相同，
解决办法：
在ViewController中增加viewDidLayoutSubviews，刷新tableview的同时，也要在cell中增加layoutSubviews，重绘gradientLayer的坐标，就可以了，看下最后的效果

C8D688F1-4E39-45C1-A26C-595CCD2C020D.png

这是刚运行完的样子
问题完美解决（可能不是最好的办法，如果有更好办法的朋友，欢迎随时分享）