iOS开发之颜色渐变

CAGradientLayer

在其背景色上绘制颜色渐变的图层,填充该图层的形状(包括圆角)。

使用渐变层可以创建包含任意数量颜色的颜色渐变。默认情况下,颜色均匀地分布在整个图层中,但您可以通过渐变指定控制颜色位置的位置。

下例,显示了如何创建包含四种颜色的渐变层,这些颜色通过渐变均匀分布。将图层旋转90°(pi / 2弧度)得到水平梯度。

gradientLayer.colors = [UIColor.red.cgColor,
                        UIColor.yellow.cgColor,
                        UIColor.green.cgColor,
                        UIColor.blue.cgColor]
     
gradientLayer.transform = CATransform3DMakeRotation(CGFloat.pi / 2, 0, 0, 1)

默认方向是从上到下进行渐变

CAGradientLayer的属性
  • colors

    CGColorRef对象数组,定义每个渐变停止的颜色。可以做成动画。

  • locations
    一个可选的NSNumber对象数组,定义每个渐变停止的位置。可以做成动画。

  • endPoint
    在图层的坐标空间中绘制渐变的终点。可以做成动画。

    终点对应梯度的最后一站。点在单位坐标空间中定义,然后在绘制时映射到层的边界矩形。默认值为(0.5,1.0)。

  • startPoint

    在图层的坐标空间中绘制渐变的起始点。可以做成动画。

    起始点对应于梯度的第一个停止点。点在单位坐标空间中定义,然后在绘制时映射到层的边界矩形。默认值为(0.5,0.0)。

  • type

    由图层绘制的渐变样式。 默认X轴

  • transform
    相对于其边界矩形的锚点应用于层的变换。默认为单位变换。可以做成动画。

示例:

 // 设置一个渐变按钮
 let d = QMUIButton()
 d.setTitle(R.string.localizable.settingNavUserTxt(), for: .normal)
 d.setTitleColor(.white, for: .normal)
 d.titleLabel?.font = UIFont.systemFont(ofSize: FONT_MEDDLE)
 d.backgroundColor = .primaryColor
 d.cornerRadius = 8
 // 必须使用CGRect去设置大小
 d.frame = CGRect(x: 0, y: 0, width: 168, height: 40)
 // 设置渐变色
 let gradient = CAGradientLayer()
 gradient.colors = [UIColor(red: 1, green: 1, blue: 1, alpha: 0).cgColor,UIColor(red: 1, green: 1, blue: 1, alpha: 0.4).cgColor]
 gradient.transform = CATransform3DMakeRotation(0, 0, 0, 1)
 gradient.frame = d.bounds
 gradient.borderWidth = 2
 gradient.borderColor = UIColor.primaryColor.cgColor
 gradient.cornerRadius = 8
 gradient.startPoint = CGPoint(x: 0, y: 0)
 gradient.endPoint = CGPoint(x: 0, y: 1)
 // 将渐变添加到按钮layer上
 d.layer.addSublayer(gradient)
 d.clipsToBounds = true

效果如图:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值