🎨

グラデーションされたレイヤを挿入するのではなく、レイヤをグラデーションする

2023/01/08に公開

はじめに

UIViewにグラデーションをつけるときに

let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.red.cgColor,
                        UIColor.blue.cgColor]
view.layer.insertSublayer(gradientLayer, at: 0)

のようにして描く方法が検索するとヒットします。これは、グラデーションが作成できるレイヤーを定義して、layerの上にそれを乗せるという流れです。しかし、本来UIViewが持っているlayerをグラデーションする方が方法としては素直ではないかと思ったのでやってみました。
また、以下のような言葉があるようです。
underlying layer:UIViewがデフォルトでもつCALayer型のプロパティ
stand alone layer:親として対応するUIViewがないCALayer
つまり、この記事の内容をまとめると「グラデーションが施されたstand alone layerを挿入するのではなくて、underlying layerをグラデーションさせることでグラデーションを表現した」ということになります。

layerの型を変えたカスタムUIViewを作る

UIView.layerはget-onlyなプロパティであるため、グラデーションさせたいViewにはカスタムUIViewを利用する,カスタムUIViewの中でlayerClassをoverrideするというアプローチを取ります。

class GradientView: UIView {
    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }
}

グラデーションさせたいViewをキャストして利用する

GradientView型のsomeViewをstoryboardで貼り付け、viewDidLoad内で以下の処理を行います。

if let layer = someView.layer as? CAGradientLayer {
  layer.colors = [UIColor.red.cgColor,
                  UIColor.blue.cgColor]
}

すると、期待した通りlayerをグラデーションさせることができました。

参考

https://snoozelag.hatenablog.com/entry/2021/12/18/003933

Discussion