Swift4.2 Core Graphics CGContext の グラデーションカラーの設定

環境Xcode10.1 Swift4.2

https://user-images.githubusercontent.com/16457165/50054206-e8864280-0182-11e9-84a3-558eb73e769e.png
グラデーションを使用するViewが必要だったので、メソッドのベーシック使用例を記事にしました。

参考サイト drawRadialGradient

指定された開始円と終了円によって定義される領域に沿って変化するグラデーションをペイントします。

func drawRadialGradient(_ gradient: CGGradient, グラデーションオブジェクト。
            startCenter: CGPoint, 開始円の中心を定義する座標。
            startRadius: CGFloat, 開始円の半径。
              endCenter: CGPoint, 終了円の中心を定義する座標。
              endRadius: CGFloat, 終了円の半径。
                options: CGGradientDrawingOptions) グラデーションの描画位置。

参考サイト drawLinearGradient

指定された開始点と終了点で定義された線に沿って変化するグラデーションを描画します。

func drawLinearGradient(_ gradient: CGGradient, グラデーションオブジェクト。
                  start startPoint: CGPoint, グラデーションの開始点を定義する座標。
                    end endPoint: CGPoint, グラデーションの終点を定義する座標。
                options: CGGradientDrawingOptions)塗りが開始点または終了点を超えて拡張されるかどうかを制御するオプションフラグ（drawsBeforeStartLocationまたはdrawsAfterEndLocation）。

使用クラス

class ViewController: UIViewController {

    var vc = GradientView()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor.black
        self.view.addSubview(vc.vc2)
        self.view.addSubview(vc.vc)
    }

    @IBAction func bt(_ sender: Any) {
        if vc.vc.isHidden == false {
            vc.vc.isHidden = true
            vc.vc2.isHidden = false
        } else {
            vc.vc.isHidden = false
            vc.vc2.isHidden = true
        }
    }
}

Viewを統合するView. グラデーションを実施しているクラスをVCに直接読んでも構わないですが、あえて一つのViewに統合しました。

class GradientView:  UIView {

    let vc = DrawRadialGradientView()
    let vc2 = DrawLinearGradientView()

    override init(frame: CGRect) {
        super.init(frame: .zero)

        let screenWidth = UIScreen.main.bounds.width
        let screenHeight = UIScreen.main.bounds.height
        self.frame = CGRect(x: 0, y: 0, width: screenWidth, height: screenHeight)

        vc.frame = self.frame
        vc2.frame = self.frame
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

グラデーションの円を生成するクラス

class DrawRadialGradientView : UIView {

    let screenWidth = UIScreen.main.bounds.width

    override init(frame: CGRect) {
        super.init(frame: .zero)

        self.frame = CGRect(x: 0, y: 0, width: screenWidth, height: screenWidth)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func draw(_ rect: CGRect) {

        let ref = UIGraphicsGetCurrentContext()
        let colors = [UIColor.white.cgColor,UIColor.green.cgColor,UIColor.yellow.cgColor,UIColor.blue.cgColor,UIColor.red.cgColor] as CFArray
        let colorSpc:CGColorSpace = CGColorSpaceCreateDeviceRGB()
        let gradient:CGGradient = CGGradient(colorsSpace: colorSpc, colors: colors, locations: nil)!

        ref!.drawRadialGradient(gradient, startCenter: CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2), startRadius: 0, endCenter: CGPoint(x:self.frame.size.width/2,y: self.frame.size.height/2), endRadius: self.frame.size.width/2, options: CGGradientDrawingOptions(rawValue:0))
    }
}

グラデーションを生成するクラス

class DrawLinearGradientView : UIView {

    let screenWidth = UIScreen.main.bounds.width

    override init(frame: CGRect) {
        super.init(frame: .zero)

        self.frame = CGRect(x: 0, y: 0, width: screenWidth, height: screenWidth)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func draw(_ rect: CGRect) {

        let ref = UIGraphicsGetCurrentContext()
        let colors = [UIColor.white.cgColor,UIColor.green.cgColor,UIColor.yellow.cgColor,UIColor.blue.cgColor,UIColor.red.cgColor] as CFArray
        let colorSpc:CGColorSpace = CGColorSpaceCreateDeviceRGB()
        let gradient:CGGradient = CGGradient(colorsSpace: colorSpc, colors: colors, locations: nil)!
        ref!.drawLinearGradient(gradient, start: CGPoint(x: 0, y: 0), end: CGPoint(x: self.frame.size.width, y: self.frame.size.height), options: CGGradientDrawingOptions(rawValue:0))
    }
}

GitHubSource