美文网首页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颜色渐变器

    我们想设置一个view的颜色,通常可以用backgroundColor方法,但是这只能设置纯色背景。如果想实现渐变...

  • iOS 绘制渐变·实例篇

    级别: ★★☆☆☆标签:「iOS颜色渐变」「CAGradientLayer渐变」「CAGradientLayer」...

  • iOS 绘制渐变·基础篇

    级别: ★★☆☆☆标签:「iOS颜色渐变」「CAGradientLayer渐变」「CAGradientLayer」...

  • CALayer

    CAGradientLayer 渐变色遮罩 CAGradientLayer用来绘制渐变色,指定几个颜色值、渐变结束...

  • iOS渐变的文字

    CAGradientLayer CAGradientLayer可以方便的处理颜色渐变。@property(null...

  • swift4.0 颜色渐变

    //颜色渐变 functurquoiseColor() ->CAGradientLayer{ lett...

  • CAGradientLayer颜色渐变

    CAGradientLayer制作颜色渐变效果,常于CAShapeLayer结合使用。CAShapeLayer...

  • CAGradientLayer颜色渐变

    CAGradientLayer可以方便的处理颜色渐变。 它就几个属性非常好理解,学过ps的同学肯定知道渐变是色素均...

  • iOS 最少代码实现颜色渐变

    方法一.使用CAGradientLayer //初始化颜色渐变图层和图层范围CAGradientLayer *la...

  • IOS 实现颜色渐变扩展

    //绘制渐变色颜色的方法 + (CAGradientLayer*)setGradualChangingColor:...

网友评论

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

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