Swift绘制渐变色的方法

2022-07-22,,,

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

示意图:

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: [uicolor(hexstring: "#fd0134")!, uicolor(hexstring: "#007aff")!],
                            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)
 
    }
}

方式一:

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

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

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: [nsnumber] = [0 , 1]
    @ibinspectable var startpoint: cgpoint = .zero
    @ibinspectable var endpoint: cgpoint = .zero
    
    private var gradientbglayer: cagradientlayer?
    
    override func layoutsubviews() {
        super.layoutsubviews()
        gradientbglayer?.removefromsuperlayer()
        if isgradient {
            gradientbglayer = cagradientlayer()
            gradientbglayer!.colors = [startcolor.cgcolor, endcolor.cgcolor]
            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: [nsnumber] = [0 , 1]
    @ibinspectable var startpoint: cgpoint = .zero
    @ibinspectable var endpoint: cgpoint = .zero
    
    private var gradientbglayer: cagradientlayer?
    
    override func layoutsubviews() {
        super.layoutsubviews()
        gradientbglayer?.removefromsuperlayer()
        if isgradient {
            gradientbglayer = cagradientlayer()
            gradientbglayer!.colors = [startcolor.cgcolor, endcolor.cgcolor]
            gradientbglayer!.locations = locations
            gradientbglayer!.frame = bounds
            gradientbglayer!.startpoint = startpoint
            gradientbglayer!.endpoint = endpoint
            self.layer.insertsublayer(gradientbglayer!, at: 0)
        }
    }
    
}

方式二:

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

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

import foundation
import uikit
 
extension uiview {
    
    @discardableresult
    func addgradient(colors: [uicolor],
                     point: (cgpoint, cgpoint) = (cgpoint(x: 0.5, y: 0), cgpoint(x: 0.5, y: 1)),
                     locations: [nsnumber] = [0, 1],
                     frame: cgrect = cgrect.zero,
                     radius: cgfloat = 0,
                     at: uint32 = 0) -> 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: [uicolor],
                     locations: [nsnumber] = [0, 1],
                     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?=nil,cornerradius : cgfloat?=0, at: uint32 = 0){
        var bounds : cgrect = self.bounds
        if let frame = frame {
            bounds = frame
        }
        let bglayer1 = cagradientlayer()
        bglayer1.colors = [uicolor(hexstring: start_color)!.cgcolor, uicolor(hexstring: end_color)!.cgcolor]
        bglayer1.locations = [0, 1]
        bglayer1.frame = bounds
        bglayer1.startpoint = cgpoint(x: 0, y: 0.61)
        bglayer1.endpoint = cgpoint(x: 0.61, y: 0.61)
        bglayer1.cornerradius = cornerradius ?? 0
        self.layer.insertsublayer(bglayer1, at: at)
    }
    
    func addgradient(start_color:string,
                     end_color : string,
                     frame : cgrect?=nil,
                     borader: cgfloat = 0,
                     boradercolor: uicolor = .clear,
                     at: uint32 = 0,
                     corners: uirectcorner?,
                     radius: cgfloat = 0) {
        var bounds : cgrect = self.bounds
        if let frame = frame {
            bounds = frame
        }
        let bglayer1 = cagradientlayer()
        bglayer1.colors = [uicolor(hexstring: start_color)!.cgcolor, uicolor(hexstring: end_color)!.cgcolor]
        bglayer1.locations = [0, 1]
        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? = nil,
                     cornerradius : cgfloat?=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 = [uicolor(hexstring: start_color)!.cgcolor, uicolor(hexstring: end_color)!.cgcolor]
        bglayer1.locations = [0, 1]
        bglayer1.cornerradius = cornerradius ?? 0
        self.layer.addsublayer(bglayer1)
    }
    
    func addverticalgradient(start_color:string,end_color : string,frame : cgrect?=nil,cornerradius : cgfloat?=0){
        var bounds : cgrect = self.bounds
        if let frame = frame {
            bounds = frame
        }
        let bglayer1 = cagradientlayer()
        bglayer1.colors = [uicolor(hexstring: start_color)!.cgcolor, uicolor(hexstring: end_color)!.cgcolor]
        bglayer1.locations = [0, 1]
        bglayer1.frame = bounds
        bglayer1.startpoint = cgpoint(x: 0.5, y: 0)
        bglayer1.endpoint = cgpoint(x: 1, y: 1)
        bglayer1.cornerradius = cornerradius ?? 0
        self.layer.insertsublayer(bglayer1, at: 0)
    }
    
    //将当前视图转为uiimage
    func asimage() -> uiimage {
        let renderer = uigraphicsimagerenderer(bounds: bounds)
        return renderer.image { renderercontext in
            layer.render(in: renderercontext.cgcontext)
        }
    }
}

demo:绘制渐变色

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

《Swift绘制渐变色的方法.doc》

下载本文的Word格式文档,以方便收藏与打印。