【SwiftUI】色の指定方法(Color)

(2020/8/13 更新)

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

スポンサーリンク

環境

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

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

基本的な使い方

基本的な使い方

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

Viewの色指定

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

.foregroundColor(Color)

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

.background(View)

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

スポンサーリンク

使用可能な色の種類

Color構造体にプロパティとして定義されている色は次の通りです。
SwiftUIで定義されている標準色はダークモードとライトモードの両方で見栄えがするようにカスタムブレンドされているので、純粋な色合いではありません。
また、一部のプロパティは外観モード(ライト/ダーク)によって表示される色が変わります。
「その他」として定義されているプロパティについては、次章で解説します。

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

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

スポンサーリンク

特殊なプロパティ

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

.primary と .secondary

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

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

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

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

accentColorの指定

.clear

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

スポンサーリンク

他の色指定方法

標準で定義済の以外の色を使用する場合は、次のように別の指定方法があります。

HSVモデル

色相(hue)、彩度(saturation)、明度(brightness)による色指定です。

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

RGBモデル

赤(Red)、緑(Green)、青(Blue)の濃度による色指定です。

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

使用例

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

カラー調整サンプル

スポンサーリンク

あわせて読みたい記事

【SwiftUI】画面の背景色指定
画面の背景色を指定する方法を解説します。UIKitではUIViewControllerのプロパティで設定しますが、SwiftUIではどうするのでしょうか?
【SwiftUI】グラデーションの使い方
グラデーションとは、連続した階調で色調や透明度が変化していく色の指定を指します。SwiftUIでは線形、放射状、円すい状の3種類のグラデーションが使えます。これらのグラデーションはすべて、Viewとして単独で使用したり、Modifier...
【SwiftUI】ダークモード対応
アセットカタログを使ったダークモード対応について解説します。