2023/9/13

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

この記事からわかること

Swift UIでグラデーションカラーを実装する方法
LinearGradient構造体の使い方
GradientやUnitPointの指定方法
複数色でグラデーションを配置するには？
円形や円錐型でグラデーションする方法

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

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構造体

LinearGradientは直線的なグラデーションを実装できる構造体です。イニシャライザは以下のように定義されており、Gradient型でグラデーションで使用する色をstartPointとendPointでグラデーションの開始位置と終了位置を指定します。

init(
    gradient: Gradient,
    startPoint: UnitPoint,
    endPoint: UnitPoint
)

Gradient型

公式リファレンス：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(放射状)

公式リファレンス：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

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

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()
    }
}