理想的温柔 發表於 2021-8-25 15:51:31

Swift绘制渐变色的方法

<p>本文实例为大家分享了Swift绘制渐变色的具体代码，供大家参考，具体内容如下</p>
<p>示意图：</p>
<p style="text-align: center"><img src="https://img.jbzj.com/file_images/article/202108/2021825154312764.jpg?2021725154328" alt="" /></p>
<div class="jb51code">
<pre class="brush:cpp;">
import Foundation
import UIKit

class GradientVC: UIViewController {
   
    @IBOutlet weak var butOne: GradientCustomButton!
    @IBOutlet weak var viewTwo: UIView!
   
    override func viewDidLoad() {
      super.viewDidLoad()
      
      /// 方式一 xib添加渐变色
      
      /// 方式一 代码添加渐变色
      butOne.isGradient = true
      butOne.startColor = UIColor(hexString: "#FD0134")!
      butOne.endColor = UIColor(hexString: "#007AFF")!
      butOne.startPoint = CGPoint(x: 0,y: 0)
      butOne.endPoint = CGPoint(x: 1,y: 1)
      
      /// 方式二
      //viewTwo.addGradient(start_color: "#8238FF", end_color: "#007AFF")
      //viewTwo.layer.masksToBounds = true
      viewTwo.addGradient(colors: ,
                            point: (CGPoint(x: 1.0, y: 0.0), CGPoint(x: 0.0, y: 1.0)),
                            frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width-40, height: 100),
                            radius: 0)

    }
}</pre>
</div>
<p><strong>方式一：</strong><br />
</p>
<p>使用xib或代码的方式添加渐变色.</p>
<p style="text-align: center"><img src="https://img.jbzj.com/file_images/article/202108/2021825154335011.jpg?2021725154345" alt="" /></p>
<p style="text-align: center"><img src="https://img.jbzj.com/file_images/article/202108/2021825154400079.jpg?2021725154422" alt="" /></p>
<p style="text-align: center"><img src="https://img.jbzj.com/file_images/article/202108/2021825154437215.jpg?2021725154459" alt="" /></p>
<p>这种方式有个缺点, 若是要对更多的视图(比如UILabel)添加渐变色, 需要继续创建一个子类继承于它进行功能的拓展.</p>
<div class="jb51code">
<pre class="brush:cpp;">
import Foundation
import UIKit

class GradientCustomView: UIView {
   
    @IBInspectable var isGradient: Bool = false
    @IBInspectable var startColor: UIColor = .white
    @IBInspectable var endColor: UIColor = .white
    @IBInspectable var locations: =
    @IBInspectable var startPoint: CGPoint = .zero
    @IBInspectable var endPoint: CGPoint = .zero
   
    private var gradientBGLayer: CAGradientLayer&#63;
   
    override func layoutSubviews() {
      super.layoutSubviews()
      gradientBGLayer&#63;.removeFromSuperlayer()
      if isGradient {
            gradientBGLayer = CAGradientLayer()
            gradientBGLayer!.colors =
            gradientBGLayer!.locations = locations
            gradientBGLayer!.frame = bounds
            gradientBGLayer!.startPoint = startPoint
            gradientBGLayer!.endPoint = endPoint
            self.layer.insertSublayer(gradientBGLayer!, at: 0)
      }
    }

}

class GradientCustomButton: UIButton {
   
    @IBInspectable var isGradient: Bool = false
    @IBInspectable var startColor: UIColor = .white
    @IBInspectable var endColor: UIColor = .white
    @IBInspectable var locations: =
    @IBInspectable var startPoint: CGPoint = .zero
    @IBInspectable var endPoint: CGPoint = .zero
   
    private var gradientBGLayer: CAGradientLayer&#63;
   
    override func layoutSubviews() {
      super.layoutSubviews()
      gradientBGLayer&#63;.removeFromSuperlayer()
      if isGradient {
            gradientBGLayer = CAGradientLayer()
            gradientBGLayer!.colors =
            gradientBGLayer!.locations = locations
            gradientBGLayer!.frame = bounds
            gradientBGLayer!.startPoint = startPoint
            gradientBGLayer!.endPoint = endPoint
            self.layer.insertSublayer(gradientBGLayer!, at: 0)
      }
    }
   
}</pre>
</div>
<p><strong>方式二：</strong><br />
</p>
<p>直接拓展UIView,让每个继承于UIView的视图都可以调用拓展的方法.</p>
<p>这种方式的缺点就是无法在Xib中使用</p>
<div class="jb51code">
<pre class="brush:cpp;">
import Foundation
import UIKit

extension UIView {
   
    @discardableResult
    func addGradient(colors: ,
                     point: (CGPoint, CGPoint) = (CGPoint(x: 0.5, y: 0), CGPoint(x: 0.5, y: 1)),
                     locations: = ,
                     frame: CGRect = CGRect.zero,
                     radius: CGFloat = 0,
                     at: UInt32 = 0) -&gt; CAGradientLayer {
      let bgLayer1 = CAGradientLayer()
      bgLayer1.colors = colors.map { $0.cgColor }
      bgLayer1.locations = locations
      if frame == .zero {
            bgLayer1.frame = self.bounds
      } else {
            bgLayer1.frame = frame
      }
      bgLayer1.startPoint = point.0
      bgLayer1.endPoint = point.1
      bgLayer1.cornerRadius = radius
      self.layer.insertSublayer(bgLayer1, at: at)
      return bgLayer1
    }
   
    func addGradient(start: CGPoint = CGPoint(x: 0.5, y: 0),
                     end: CGPoint = CGPoint(x: 0.5, y: 1),
                     colors: ,
                     locations: = ,
                     frame: CGRect = CGRect.zero,
                     radius: CGFloat = 0,
                     at: UInt32 = 0) {
      let bgLayer1 = CAGradientLayer()
      bgLayer1.colors = colors.map { $0.cgColor }
      bgLayer1.locations = locations
      bgLayer1.frame = frame
      bgLayer1.startPoint = start
      bgLayer1.endPoint = end
      bgLayer1.cornerRadius = radius
      self.layer.insertSublayer(bgLayer1, at: at)
    }
   
    func addGradient(start_color:String,end_color : String,frame : CGRect&#63;=nil,cornerRadius : CGFloat&#63;=0, at: UInt32 = 0){
      var bounds : CGRect = self.bounds
      if let frame = frame {
            bounds = frame
      }
      let bgLayer1 = CAGradientLayer()
      bgLayer1.colors =
      bgLayer1.locations =
      bgLayer1.frame = bounds
      bgLayer1.startPoint = CGPoint(x: 0, y: 0.61)
      bgLayer1.endPoint = CGPoint(x: 0.61, y: 0.61)
      bgLayer1.cornerRadius = cornerRadius &#63;&#63; 0
      self.layer.insertSublayer(bgLayer1, at: at)
    }
   
    func addGradient(start_color:String,
                     end_color : String,
                     frame : CGRect&#63;=nil,
                     borader: CGFloat = 0,
                     boraderColor: UIColor = .clear,
                     at: UInt32 = 0,
                     corners: UIRectCorner&#63;,
                     radius: CGFloat = 0) {
      var bounds : CGRect = self.bounds
      if let frame = frame {
            bounds = frame
      }
      let bgLayer1 = CAGradientLayer()
      bgLayer1.colors =
      bgLayer1.locations =
      bgLayer1.frame = bounds
      bgLayer1.startPoint = CGPoint(x: 0, y: 0.61)
      bgLayer1.endPoint = CGPoint(x: 0.61, y: 0.61)
      bgLayer1.borderColor = boraderColor.cgColor
      bgLayer1.borderWidth = borader
      if corners != nil {
            let cornerPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners!, cornerRadii: CGSize(width: radius, height: radius))
            let radiusLayer = CAShapeLayer()
            radiusLayer.frame = bounds
            radiusLayer.path = cornerPath.cgPath
            bgLayer1.mask = radiusLayer
      }
      self.layer.insertSublayer(bgLayer1, at: at)
    }
   
    func addGradient(startPoint: CGPoint = CGPoint(x: 0, y: 0.5),
                     start_color:String,
                     endPoint: CGPoint = CGPoint(x: 1, y: 0.5),
                     end_color : String,
                     frame : CGRect&#63; = nil,
                     cornerRadius : CGFloat&#63;=0){
      var bounds : CGRect = self.bounds
      if let frame = frame {
            bounds = frame
      }
      let bgLayer1 = CAGradientLayer()
      bgLayer1.frame = bounds
      bgLayer1.startPoint = startPoint
      bgLayer1.endPoint = endPoint
      bgLayer1.colors =
      bgLayer1.locations =
      bgLayer1.cornerRadius = cornerRadius &#63;&#63; 0
      self.layer.addSublayer(bgLayer1)
    }
   
    func addVerticalGradient(start_color:String,end_color : String,frame : CGRect&#63;=nil,cornerRadius : CGFloat&#63;=0){
      var bounds : CGRect = self.bounds
      if let frame = frame {
            bounds = frame
      }
      let bgLayer1 = CAGradientLayer()
      bgLayer1.colors =
      bgLayer1.locations =
      bgLayer1.frame = bounds
      bgLayer1.startPoint = CGPoint(x: 0.5, y: 0)
      bgLayer1.endPoint = CGPoint(x: 1, y: 1)
      bgLayer1.cornerRadius = cornerRadius &#63;&#63; 0
      self.layer.insertSublayer(bgLayer1, at: 0)
    }
   
    //将当前视图转为UIImage
    func asImage() -&gt; UIImage {
      let renderer = UIGraphicsImageRenderer(bounds: bounds)
      return renderer.image { rendererContext in
            layer.render(in: rendererContext.cgContext)
      }
    }
}</pre>
</div>
<p>Demo：绘制渐变色</p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持琼殿技术社区。</p>
                           
                            <div class="art_xg">
                              <b>您可能感兴趣的文章:</b><ul><li>iOS SwiftUI 颜色渐变填充效果的实现</li></ul>
                            </div>

                        </div>
                        <!--endmain-->
頁: [1]
查看完整版本: Swift绘制渐变色的方法