【Swift UI】LinearGradientでグラデーションを実装する方法

この記事からわかること
- Swift UIでグラデーションカラーを実装する方法
- LinearGradient構造体の使い方
- GradientやUnitPointの指定方法
- 複数色でグラデーションを配置するには?
- 円形や円錐型でグラデーションする方法
index
[open]
\ アプリをリリースしました /
Swift UIでグラデーションを実装する方法
Swift UIでグラデーションを実装するにはLinearGradient
構造体を使用します。例えば画面全体をグラデーションカラーにしたい場合は以下のように実装します。
struct ContentView: View {
var body: some View {
LinearGradient(
gradient: Gradient(colors: [
Color(red: 0/255, green: 147/255, blue: 233/255),
Color(red: 128/255, green: 208/255, blue: 199/255)]),
startPoint: .leading, endPoint: .trailing
).ignoresSafeArea()
}
}

UIKitではCAGradientLayer
クラスを使用して実装します。
LinearGradient(線型)
LinearGradient
は直線的なグラデーションを実装できる構造体です。イニシャライザは以下のように定義されており、Gradient
型でグラデーションで使用する色をstartPoint
とendPoint
でグラデーションの開始位置と終了位置を指定します。
init(
gradient: Gradient,
startPoint: UnitPoint,
endPoint: UnitPoint
)
Gradient型
Gradient
型ではinit(colors: [Color])
を使用してグラデーションで使用するColor
構造体を配列で渡します。配列なので2つでなく、3つや4つなど複数の色を渡すことが可能です。
Gradient(colors: [
Color(red: 255/255, green: 60/255, blue: 172/255),
Color(red: 120/255, green: 75/255, blue: 160/255),
Color(red: 43/255, green: 134/255, blue: 197/255)])

UnitPoint型
グラデーションの方向はUnitPoint
型でstartPoint
とendPoint
を指定します。指定できるのは以下の通りです。名称からある程度予想できると思います。
@frozen public struct UnitPoint : Hashable {
public static let zero: UnitPoint
public static let center: UnitPoint
public static let leading: UnitPoint
public static let trailing: UnitPoint
public static let top: UnitPoint
public static let bottom: UnitPoint
public static let topLeading: UnitPoint
public static let topTrailing: UnitPoint
public static let bottomLeading: UnitPoint
public static let bottomTrailing: UnitPoint
}
RadialGradient(放射状)
LinearGradient
では線形のグラデーションでしたがRadialGradient
構造体を使用すれば円形(放射状)のグラデーションを実装することができます。
struct ContentView: View {
var body: some View {
RadialGradient(
gradient: Gradient(colors: [
Color(red: 43/255, green: 134/255, blue: 197/255),
Color(red: 120/255, green: 75/255, blue: 160/255)]),
center: .center,
startRadius: 1,
endRadius: 200
).ignoresSafeArea()
}
}

引数に指定する値
- center:円の中心位置
- startRadius:円系グラデーションの開始位置ラディアス
- endRadius:円系グラデーションの終了位置ラディアス
AngularGradient(円錐)
AngularGradient
構造体を使用すれば円錐状のグラデーションを実装することができます。
struct ContentView: View {
var body: some View {
AngularGradient(
gradient: Gradient(colors: [
Color.black,
Color(red: 43/255, green: 134/255, blue: 197/255),
Color.black]),
center: .center,
angle: .degrees(-45)
).ignoresSafeArea()
}
}

引数に指定する値
- center:円錐の中心位置
- angle:円錐グラデーションの開始角度
EllipticalGradient(楕円)
EllipticalGradient
構造体を使用すれば楕円型のグラデーションを実装することができます。
struct ContentView: View {
var body: some View {
EllipticalGradient(
gradient: Gradient(colors: [
Color.black,
Color(red: 43/255, green: 134/255, blue: 197/255),
Color.black])
).ignoresSafeArea()
}
}

おまけ
Swift UIでカラーを指定する際は16進数で指定する方が楽ですが、デフォルトでは用意されていないので拡張して以下のように指定できるようにしておくと便利です。
Color(hexString: "#434343")
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。