SwiftでUIViewにグラデーションを付ける方法

はじめに

SwiftでUIViewにグラデーションを付ける方法をまとめました。

対象バージョン

• Xcode ver.11.6
• Simulater ver.13.6
• iOS ver 13.5.1

デフォルト(上から下)

let gradientLayer = CAGradientLayer()
// グラデーションレイヤーの領域をviewと同じに設定
gradientLayer.frame = self.frame
// グラデーション開始色
let topColor = UIColor(red: 0.0, green: 0.0, blue: 0.73, alpha: 0.1).cgColor
// グラデーション終了色
let bottopColor = UIColor(red: 0.0, green: 0.20, blue: 0.40, alpha: 1).cgColor
let gradientColors: [CGColor] = [topColor, bottopColor]
gradientLayer.colors = gradientColors
// ビューにグラデーションレイヤーを追加
layer.insertSublayer(gradientLayer, at:0)

startPointとendPointを変更することでグラデーションの向きを変更

左から右

let gradientLayer = CAGradientLayer()
// グラデーションレイヤーの領域をviewと同じに設定
gradientLayer.frame = self.frame
// グラデーション開始色
let topColor = UIColor(red: 0.0, green: 0.0, blue: 0.73, alpha: 0.1).cgColor
// グラデーション終了色
let bottopColor = UIColor(red: 0.0, green: 0.20, blue: 0.40, alpha: 1).cgColor
let gradientColors: [CGColor] = [topColor, bottopColor]
gradientLayer.colors = gradientColors
gradientLayer.startPoint = CGPoint.init(x: 0, y: 0)
gradientLayer.endPoint = CGPoint.init(x: 1, y: 0)
// ビューにグラデーションレイヤーを追加
layer.insertSublayer(gradientLayer, at:0)

左上から右下

let gradientLayer = CAGradientLayer()
// グラデーションレイヤーの領域をviewと同じに設定
gradientLayer.frame = self.frame
// グラデーション開始色
let topColor = UIColor(red: 0.0, green: 0.0, blue: 0.73, alpha: 0.1).cgColor
// グラデーション終了色
let bottopColor = UIColor(red: 0.0, green: 0.20, blue: 0.40, alpha: 1).cgColor
let gradientColors: [CGColor] = [topColor, bottopColor]
gradientLayer.colors = gradientColors
gradientLayer.startPoint = CGPoint.init(x: 0, y: 0)
gradientLayer.endPoint = CGPoint.init(x: 1, y: 1)
// ビューにグラデーションレイヤーを追加
layer.insertSublayer(gradientLayer, at:0)

まとめ

Viewのサイズとグラデーションのサイズが異なる場合は適時frameを調整すれば、
一部でけグラデーションを適用することも可能なようです。
グラデーションのcolorsプロパティも配列になっているので2色以外も設定して使用できるのかなと思います。