【SwiftUI】グラデーションの使い方

グラデーションとは、連続した階調で色調や透明度が変化していく色の指定を指します。
SwiftUIでは線形、放射状、円すい状の3種類のグラデーションが使えます。
これらのグラデーションはすべて、Viewとして単独で使用したり、Modifierの一部(例えばText Viewの背景)として使えます。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3

線形グラデーション(LinearGradient)

一方向に向かって色調が変化していくグラデーションです。
開始位置と終了位置を指定します。

使用例

線形グラデーション

解説

引数(gradient)には、使用する色の配列をGradient構造体で指定します。
使用例では、青→黒(Gradient(colors: [.blue, .black]))を指定しています。

引数(startPoint)と引数(endPoint)にはグラデーションの開始位置と終了位置を各々UnitPoint構造体で指定します。
使用例では、開始位置が左(.leading)、終了位置が右(.trailing)を指定しています。

放射状グラデーション(RadialGradient)

ある一点から放射状に色調が変化していくグラデーションです。
放射状の中心位置に加え、グラーデションの開始半径、終了半径を指定します。

使用例

放射状グラデーション

解説

引数(grandient)には、使用する色の配列をGradient構造体で指定します。
使用例では、赤→黒(Gradient(colors: [.red, .black]))を指定しています。

引数(center)には、放射状の中心位置をUnitPoint構造体で指定します。
使用例では、フレームの中心(.center)を指定しています。

引数(startRadius)は中心からグラデーションを開始するまでの距離を数値(CGFloat)で指定します。
引数(endRadius)は中心からグラデーションを終了するまでの距離を数値(CGFloat)で指定します。
使用例では、中心より1の位置から300の位置の間で色調を変化させます。

円すい状グラデーション(AngularGradient)

色調を変化させながら円の周りを1周するグラデーションです。
円の中心位置とグラデーションの開始角度を指定します。

使用例

円すい状グラデーション

解説

引数(gradient)には、使用する色の配列をGradient構造体で指定します。
使用例では、緑→黒→緑(Gradient(colors: [.green, .black, .green]))を指定しています。

引数(center)には、円の中心位置をUnitPoint構造体で指定します。
使用例ではフレームの中心(.center)を指定しています。

引数(angle)には、グラデーションの開始角度をAngle構造体で指定します。
デフォルトは.zeroで、中心から3時の方向です。
開始角度を垂直上にするには.degrees(-90)、垂直下にするには.degress(90)を指定します。
使用例では、右上45度(.degrees(-45))を指定しています。

Gradient構造体

グラデーションさせる色を定義する構造体です。

引数(colors)に色の配列を指定します。
色の数は3つ以上の指定も可能で、指定された順番に均等のタイミングで変化していきます。

均等なグラデーション

不均等なグラデーション

Gradient構造体では、色の変化のタイミングを任意に指定できます。

引数(stops)にカラー分岐点(location)付きの色情報の配列を指定します。
カラー分岐点は0.0から1.0の間で指定します。
上の例では、開始位置(0.0)が青、70%進んだ位置(0.7)で黒、終了位置(1.0)で赤に変化するグラデーションの指定です。

不均等なグラデーション

UnitPoint構造体

Viewの相対的な位置を定義する構造体です。

引数(x)と引数(y)で位置を示します。
UnitPoint(x: 0.0, y: 0.0)がViewの左上、UnitPoint(x: 1.0, y: 1.0)がViewの右下を表します。
マイナス値や1.0より大きい数値は、Viewフレームの外の位置を指します。
xとyで指定する代わりに、下記に示すプロパティの使用が可能です。

プロパティ 意味 UnitPoint
.center 中央 (x: 0.5, y: 0.5)
.bottom (x: 0.5, y: 1.0)
.bottomLeading 左下 (x: 0.0, y: 1.0)
.bottomTrailing 右下 (x: 1.0, y: 1.0)
.leading (x: 0.0, y: 0.5)
.top (x: 0.5, y: 0.0)
.topLeading 左上 (x: 0.0, y: 0.0)
.topTrailing 右上 (x: 1.0, y: 0.0)
.trailing (x: 1.0, y: 0.5)

透明度のグラデーション

Color構造体の引数(opacity)を変化させて、透明度のグラデーションが作れます。

以下は透明度のグラデーションを利用して画像のぼかし効果を実現した例です。

透明度のグラデーション

あわせて読みたい記事

【SwiftUI】色の指定方法
SwiftUIでの色の指定方法を解説します。色の指定にはColor構造体を使用します。
SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント