请选择 进入手机版 | 继续访问电脑版

[Swift] Swift绘制渐变色的方法

[复制链接]
查看162 | 回复36 | 2021-9-14 13:10:05 | 显示全部楼层 |阅读模式

本文实例为大家分享了Swift绘制渐变色的详细 代码,供大家参考,详细 内容如下

表示 图:

Swift绘制渐变色的方法

  1. import Foundation
  2. import UIKit
  3. class GradientVC: UIViewController {
  4. @IBOutlet weak var butOne: GradientCustomButton!
  5. @IBOutlet weak var viewTwo: UIView!
  6. override func viewDidLoad() {
  7. super.viewDidLoad()
  8. /// 方式一 xib添加渐变色
  9. /// 方式一 代码添加渐变色
  10. butOne.isGradient = true
  11. butOne.startColor = UIColor(hexString: "#FD0134")!
  12. butOne.endColor = UIColor(hexString: "#007AFF")!
  13. butOne.startPoint = CGPoint(x: 0,y: 0)
  14. butOne.endPoint = CGPoint(x: 1,y: 1)
  15. /// 方式二
  16. //viewTwo.addGradient(start_color: "#8238FF", end_color: "#007AFF")
  17. //viewTwo.layer.masksToBounds = true
  18. viewTwo.addGradient(colors: [UIColor(hexString: "#FD0134")!, UIColor(hexString: "#007AFF")!],
  19. point: (CGPoint(x: 1.0, y: 0.0), CGPoint(x: 0.0, y: 1.0)),
  20. frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width-40, height: 100),
  21. radius: 0)
  22. }
  23. }
复制代码

方式一:

使用 xib或代码的方式添加渐变色.

Swift绘制渐变色的方法

Swift绘制渐变色的方法

Swift绘制渐变色的方法

这种方式有个缺点, 假如 要对更多的视图(比如UILabel)添加渐变色, 必要 继续创建一个子类继承于它举行 功能的拓展.

  1. import Foundation
  2. import UIKit
  3. class GradientCustomView: UIView {
  4. @IBInspectable var isGradient: Bool = false
  5. @IBInspectable var startColor: UIColor = .white
  6. @IBInspectable var endColor: UIColor = .white
  7. @IBInspectable var locations: [NSNumber] = [0 , 1]
  8. @IBInspectable var startPoint: CGPoint = .zero
  9. @IBInspectable var endPoint: CGPoint = .zero
  10. private var gradientBGLayer: CAGradientLayer?
  11. override func layoutSubviews() {
  12. super.layoutSubviews()
  13. gradientBGLayer?.removeFromSuperlayer()
  14. if isGradient {
  15. gradientBGLayer = CAGradientLayer()
  16. gradientBGLayer!.colors = [startColor.cgColor, endColor.cgColor]
  17. gradientBGLayer!.locations = locations
  18. gradientBGLayer!.frame = bounds
  19. gradientBGLayer!.startPoint = startPoint
  20. gradientBGLayer!.endPoint = endPoint
  21. self.layer.insertSublayer(gradientBGLayer!, at: 0)
  22. }
  23. }
  24. }
  25. class GradientCustomButton: UIButton {
  26. @IBInspectable var isGradient: Bool = false
  27. @IBInspectable var startColor: UIColor = .white
  28. @IBInspectable var endColor: UIColor = .white
  29. @IBInspectable var locations: [NSNumber] = [0 , 1]
  30. @IBInspectable var startPoint: CGPoint = .zero
  31. @IBInspectable var endPoint: CGPoint = .zero
  32. private var gradientBGLayer: CAGradientLayer?
  33. override func layoutSubviews() {
  34. super.layoutSubviews()
  35. gradientBGLayer?.removeFromSuperlayer()
  36. if isGradient {
  37. gradientBGLayer = CAGradientLayer()
  38. gradientBGLayer!.colors = [startColor.cgColor, endColor.cgColor]
  39. gradientBGLayer!.locations = locations
  40. gradientBGLayer!.frame = bounds
  41. gradientBGLayer!.startPoint = startPoint
  42. gradientBGLayer!.endPoint = endPoint
  43. self.layer.insertSublayer(gradientBGLayer!, at: 0)
  44. }
  45. }
  46. }
复制代码

方式二:

直接拓展UIView,让每个继承于UIView的视图都可以调用拓展的方法.

这种方式的缺点就是无法在Xib中使用

  1. import Foundation
  2. import UIKit
  3. extension UIView {
  4. @discardableResult
  5. func addGradient(colors: [UIColor],
  6. point: (CGPoint, CGPoint) = (CGPoint(x: 0.5, y: 0), CGPoint(x: 0.5, y: 1)),
  7. locations: [NSNumber] = [0, 1],
  8. frame: CGRect = CGRect.zero,
  9. radius: CGFloat = 0,
  10. at: UInt32 = 0) -> CAGradientLayer {
  11. let bgLayer1 = CAGradientLayer()
  12. bgLayer1.colors = colors.map { $0.cgColor }
  13. bgLayer1.locations = locations
  14. if frame == .zero {
  15. bgLayer1.frame = self.bounds
  16. } else {
  17. bgLayer1.frame = frame
  18. }
  19. bgLayer1.startPoint = point.0
  20. bgLayer1.endPoint = point.1
  21. bgLayer1.cornerRadius = radius
  22. self.layer.insertSublayer(bgLayer1, at: at)
  23. return bgLayer1
  24. }
  25. func addGradient(start: CGPoint = CGPoint(x: 0.5, y: 0),
  26. end: CGPoint = CGPoint(x: 0.5, y: 1),
  27. colors: [UIColor],
  28. locations: [NSNumber] = [0, 1],
  29. frame: CGRect = CGRect.zero,
  30. radius: CGFloat = 0,
  31. at: UInt32 = 0) {
  32. let bgLayer1 = CAGradientLayer()
  33. bgLayer1.colors = colors.map { $0.cgColor }
  34. bgLayer1.locations = locations
  35. bgLayer1.frame = frame
  36. bgLayer1.startPoint = start
  37. bgLayer1.endPoint = end
  38. bgLayer1.cornerRadius = radius
  39. self.layer.insertSublayer(bgLayer1, at: at)
  40. }
  41. func addGradient(start_color:String,end_color : String,frame : CGRect?=nil,cornerRadius : CGFloat?=0, at: UInt32 = 0){
  42. var bounds : CGRect = self.bounds
  43. if let frame = frame {
  44. bounds = frame
  45. }
  46. let bgLayer1 = CAGradientLayer()
  47. bgLayer1.colors = [UIColor(hexString: start_color)!.cgColor, UIColor(hexString: end_color)!.cgColor]
  48. bgLayer1.locations = [0, 1]
  49. bgLayer1.frame = bounds
  50. bgLayer1.startPoint = CGPoint(x: 0, y: 0.61)
  51. bgLayer1.endPoint = CGPoint(x: 0.61, y: 0.61)
  52. bgLayer1.cornerRadius = cornerRadius ?? 0
  53. self.layer.insertSublayer(bgLayer1, at: at)
  54. }
  55. func addGradient(start_color:String,
  56. end_color : String,
  57. frame : CGRect?=nil,
  58. borader: CGFloat = 0,
  59. boraderColor: UIColor = .clear,
  60. at: UInt32 = 0,
  61. corners: UIRectCorner?,
  62. radius: CGFloat = 0) {
  63. var bounds : CGRect = self.bounds
  64. if let frame = frame {
  65. bounds = frame
  66. }
  67. let bgLayer1 = CAGradientLayer()
  68. bgLayer1.colors = [UIColor(hexString: start_color)!.cgColor, UIColor(hexString: end_color)!.cgColor]
  69. bgLayer1.locations = [0, 1]
  70. bgLayer1.frame = bounds
  71. bgLayer1.startPoint = CGPoint(x: 0, y: 0.61)
  72. bgLayer1.endPoint = CGPoint(x: 0.61, y: 0.61)
  73. bgLayer1.borderColor = boraderColor.cgColor
  74. bgLayer1.borderWidth = borader
  75. if corners != nil {
  76. let cornerPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners!, cornerRadii: CGSize(width: radius, height: radius))
  77. let radiusLayer = CAShapeLayer()
  78. radiusLayer.frame = bounds
  79. radiusLayer.path = cornerPath.cgPath
  80. bgLayer1.mask = radiusLayer
  81. }
  82. self.layer.insertSublayer(bgLayer1, at: at)
  83. }
  84. func addGradient(startPoint: CGPoint = CGPoint(x: 0, y: 0.5),
  85. start_color:String,
  86. endPoint: CGPoint = CGPoint(x: 1, y: 0.5),
  87. end_color : String,
  88. frame : CGRect? = nil,
  89. cornerRadius : CGFloat?=0){
  90. var bounds : CGRect = self.bounds
  91. if let frame = frame {
  92. bounds = frame
  93. }
  94. let bgLayer1 = CAGradientLayer()
  95. bgLayer1.frame = bounds
  96. bgLayer1.startPoint = startPoint
  97. bgLayer1.endPoint = endPoint
  98. bgLayer1.colors = [UIColor(hexString: start_color)!.cgColor, UIColor(hexString: end_color)!.cgColor]
  99. bgLayer1.locations = [0, 1]
  100. bgLayer1.cornerRadius = cornerRadius ?? 0
  101. self.layer.addSublayer(bgLayer1)
  102. }
  103. func addVerticalGradient(start_color:String,end_color : String,frame : CGRect?=nil,cornerRadius : CGFloat?=0){
  104. var bounds : CGRect = self.bounds
  105. if let frame = frame {
  106. bounds = frame
  107. }
  108. let bgLayer1 = CAGradientLayer()
  109. bgLayer1.colors = [UIColor(hexString: start_color)!.cgColor, UIColor(hexString: end_color)!.cgColor]
  110. bgLayer1.locations = [0, 1]
  111. bgLayer1.frame = bounds
  112. bgLayer1.startPoint = CGPoint(x: 0.5, y: 0)
  113. bgLayer1.endPoint = CGPoint(x: 1, y: 1)
  114. bgLayer1.cornerRadius = cornerRadius ?? 0
  115. self.layer.insertSublayer(bgLayer1, at: 0)
  116. }
  117. //将当前视图转为UIImage
  118. func asImage() -> UIImage {
  119. let renderer = UIGraphicsImageRenderer(bounds: bounds)
  120. return renderer.image { rendererContext in
  121. layer.render(in: rendererContext.cgContext)
  122. }
  123. }
  124. }
复制代码

Demo:绘制渐变色

以上就是本文的全部内容,盼望 对大家的学习有所帮助,也盼望 大家多多支持脚本之家。


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

avatar 聚雅阁砚堂 | 2021-9-19 14:41:24 | 显示全部楼层
以后就跟admin楼主混了!
回复

使用道具 举报

avatar 15254714558 | 2021-9-22 06:45:50 | 显示全部楼层
好帖子!
回复

使用道具 举报

avatar 一心之恋祭 | 2021-9-23 07:51:51 | 显示全部楼层
今天上网不回帖,回帖就回精华帖!
回复

使用道具 举报

avatar 启凡 | 2021-9-23 07:51:54 | 显示全部楼层
投admin楼主一票,不用谢哦!
回复

使用道具 举报

avatar 彩云彩2017 | 2021-9-26 14:38:30 | 显示全部楼层
最近精神病院在打折,admin楼主去看看吧?
回复

使用道具 举报

avatar 乐态思 | 2021-9-29 00:13:35 | 显示全部楼层
这个帖子会火的,鉴定完毕!
回复

使用道具 举报

avatar 我能陪你变老 | 2021-9-30 03:06:04 | 显示全部楼层
脑残片admin楼主今天吃了么?
回复

使用道具 举报

avatar 郭光庆 | 2021-10-10 03:58:58 | 显示全部楼层
缺乏激情了!
回复

使用道具 举报

avatar 务川冷泉水鱼庄 | 2021-10-11 01:21:34 | 显示全部楼层
admin楼主的帖子越来越有深度了!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则