【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の引数として渡す使い方もあります。

使用可能な色の種類

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
スポンサーリンク
スポンサーリンク
カピ通信

コメント