グラデーションを作成してみた[Xcode/Storyboard]

9771 ワード
Xcode Storyboard Xcode テキストリンク

グラデーションを作ってみたので、忘れないように記事に書いてアウトプットしようと思います。

環境

・Mac Book Pro(macOS:BigSur)
・Xcode(ver:12.5)

作成したグラデーション

縦方向

横方向

コード例

ChangeColorModel.swift
class ChangeColorModel{

    func changeColor(topR:CGFloat, topG:CGFloat, topB:CGFloat, topAlpha:CGFloat, bottomR:CGFloat, bottomG:CGFloat, bottomB:CGFloat, bottomAlpha:CGFloat) -> CAGradientLayer{
        let topColor = UIColor(red: topR, green: topG, blue: topB, alpha: topAlpha)
        let bottomColor = UIColor(red: bottomR, green: bottomG, blue: bottomB, alpha: bottomAlpha)

        let gradientColor = [topColor.withAlphaComponent(1.0).cgColor, bottomColor.withAlphaComponent(1.0).cgColor]

        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColor

        return gradientLayer
    }
ViewController.swift
class ViewController: UIViewController,UITextFieldDelegate {

    @IBOutlet weak var btn: UIButton!
    var changeModel = ChangeColorModel()
    var gradientColor = CAGradientLayer()

    override func viewDidLoad() {

    }

    @IBAction func changeColorAction(_ sender: Any) {
        "色をランダムに設定するためのコード"
        let topRandomR    = CGFloat.random(in: 0.0...1.0)
        let topRandomG    = CGFloat.random(in: 0.0...1.0)
        let topRandomB    = CGFloat.random(in: 0.0...1.0)
        let bottomRandomR = CGFloat.random(in: 0.0...1.0)
        let bottomRandomG = CGFloat.random(in: 0.0...1.0)
        let bottomRandomB = CGFloat.random(in: 0.0...1.0)

        gradientColor =  changeModel.changeColor(topR: topRandomR, topG: topRandomG, topB: topRandomB, topAlpha: 1.0, bottomR: bottomRandomR, bottomG: bottomRandomG, bottomB: bottomRandomB, bottomAlpha: 1.0)

　　　　　"下記の2行を加えると横方向のグラデーションになる"
        gradientColor.startPoint = CGPoint.init(x: 0.0, y: 0.0)
        gradientColor.endPoint = CGPoint.init(x: 1.0, y: 0.0)

        gradientColor.frame = self.view.bounds
        self.view.layer.addSublayer(gradientColor)
        btn.layer.zPosition = 1

    }

}