美文网首页iOS初中级开发iOS学习
swift CAGradientLayer颜色渐变器

swift CAGradientLayer颜色渐变器

作者: darrenW | 来源:发表于2018-06-28 18:01 被阅读28次

    我们想设置一个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

    相关文章

      网友评论

        本文标题:swift CAGradientLayer颜色渐变器

        本文链接:https://www.haomeiwen.com/subject/quhnyftx.html