🍎

CAGradientLayerとは？

2021/11/09に公開

iOS

簡単に言うとCAGradientLayerとは グラデーションを生成するレイヤー です。
Apple公式ドキュメントには「背景色の上に色のグラデーションを描き、レイヤーの形（角の丸い部分も含む）を埋めるレイヤーです。」と書かれています。

どう使う？

では簡単な使い方を見てみましょう。
※任意の数の色を含んだグラデーションの設定ができます。今回は使用する色は2色に絞り、左から右にグラデーションが伸びるよう設定しています。(今後記事をアップデートして、設定等追加していきます)

1. storyboardでグラデーションにするViewを用意

storyboard上では下記のようにViewを用意してあげます！
※分かりやすいように一旦背景色をグレーにしてあります！

2. コード実装

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var gradationView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let gradientLayer = CAGradientLayer()
        let color1 = UIColor.red
        let color2 = UIColor.blue
        gradientLayer.colors = [color1.cgColor,color2.cgColor] //ここでグラデーションを構成する複数の色を設定する
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
        gradientLayer.frame = gradationView.bounds //gradationViewにgradientLayerの位置を合わせる
        gradationView.layer.insertSublayer(gradientLayer, at: 0) //gradationViewにgradientLayerをinsert(挿入)する
    }
}

3. ビルド結果

4. まとめ

たった数行で左右に伸びる2色のグラデーションを実装することができました。
また、startPointとendPointを変えることで様々な方向にグラデーションの方向を変えることができます。今回は左から右への設定でしたが、この記事をアップデートしながら今後解説を加えていこうと思います。

・サンプルコード

読んでいただきありがとうございました！