【SwiftUI】色の指定方法

SwiftUIでの色の指定方法を解説します。
色の指定にはColor構造体を使用します。

スポンサーリンク

環境

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

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

基本的な使い方

基本的な使い方

SwiftUIではColor構造体を使って色を指定します。
標準的な色がColor構造体のプロパティとして定義されていますので、プロパティを指定するだけでその色のViewが生成できます。
実行例では、赤色を示すColor.redを生成しています。
これ以外に、色を指定するModifierの引数として渡す使い方もあります。

Viewの色指定

一般的なViewの色は次の2つのModifierで指定します。

.foregroundColor(Color)

Viewの前景色を指定します。Text Viewなら文字の色です。
引数はColor構造体限定の為、次のようにプロパティのみの指定が可能です。

.background(View)

Viewの背景を指定します。
背景は色だけとは限りません(例えばイメージなどの指定も可)ので、次のようにColor構造体を明示します。

使用可能な色の種類

Color構造体にプロパティとして定義されている色は次の通りです。
一部のプロパティは外観モード(ライト/ダーク)によって表示される色が変わります。
「その他」として定義されているプロパティについては、次章で解説します。

ライトモード ダークモード
プロパティ一覧(ライトモード) プロパティ一覧(ダークモード)

上画面の出力コードは次の通りです。

特殊なプロパティ

Color構造体には標準色として定義されている10種類の色指定の他に、いくつかの特殊なプロパティがあります。

.primary と .secondary

テキストのデフォルト色で、外観モード(ライトorダーク)によって色が変わります。
secondaryの方はprimaryに比べて、わずかに透明で背後の色が少し透けて見えます。

.accentColor(アクセントカラー)

iOSでは、標準のコントロールとコンテナで、このaccentColorを使用します。
例えば、Buttonのラベルでは、テキストにaccentColorが使用されます。

accentColorはModifierとして指定する事で、デフォルトの色から変更する事が可能です。
1つのViewのaccentColorを設定すると、View内のすべてのViewに影響します。
次の例はVStack内にボタンを作成し、みどり色のaccentColorを指定した例です。

accentColorの指定

.clear

透明色を指定するプロパティです。
この色を適用した部分は背景が透けて見えます。

RGBによる色指定

標準で定義済のもの以外の色を使用する場合は、次のようにRGBで指定する事が可能です。

濃度および不透明度は0〜1.0の範囲で指定可能です。
opacity(不透明度)のみ省略可能で、デフォルト値は1.0です。

使用例

RGBの各色の濃度、および不透明度を自由にスライダーで変更しながら色を確認するサンプルです。

カラー調整サンプル

あわせて読みたい記事

【SwiftUI】画面の背景色指定
画面の背景色を指定する方法を解説します。UIKitではUIViewControllerのプロパティで設定しますが、SwiftUIではどうするのでしょうか?
【SwiftUI】Viewの背景設定と重ね合わせ
Viewの背景設定と、別のViewを重ねる方法を解説します。
【SwiftUI】グラデーションの使い方
グラデーションとは、連続した階調で色調や透明度が変化していく色の指定を指します。SwiftUIでは線形、放射状、円すい状の3種類のグラデーションが使えます。これらのグラデーションはすべて、Viewとして単独で使用したり、Modifier...