バッテラが如く

プログラミングしましょ!

【Swift】オリジナルのColorを作って使う方法 (Assets)

SwiftUI

はじめに

今日はSwiftUIのColorについて勉強していきます。

SwiftUIというかXcodeではColorをリソースとして定義することができます。

今回はAssetsでColorを作るところから使うところを共有しようと思います

環境

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

* MacOS Monterey (12.1)
* Xcode (13.3.1)

AssetsでColorを作る

まずリソースとしてColorを作ることをしていきます。

プロジェクトツリーのAssetsをクリック

右クリック → New Color Set

Xcodeの右側に表示されているアイコンをの一番右にあるやつをクリック。
(されていない場合下図赤枠をクリックすると表示されます)

画面中央に2つあると表示されていますが、Any Appearanceをクリックして選択状態にします。

Darkはダークモード用です。説明がややこしくなるのでひとまず気にしなくてよいです。

あとはRed, Green, Blueの値を変えて色を作るといった感じです。

Input Methodを変えると入力方式を変えられます。

お好みの方法で色を決めます。

Floating point

0.0〜1.0の間で設定していくタイプ

8-bit(0-255)

0〜255の間で設定していくタイプ

8-bit(Hexadecimal)

HTMLのカラーコードで設定していくタイプ

作ったColorを使う

オリジナルのColorを使う方法についてです。ここからはプログラムを書いていきます。

Color("カラーアセット名") で使うことができます。

 Text("あいうえお")
    .foregroundColor(Color("mycolor"))

mycolorの部分はAssetsで作ったColorと同じ名前にしてください。

extensionを使えばもっと安全に

文字列で指定するのはリネームした時に事故るのが怖いです。

なのでColorextensionして定数化しましょう。

extension Color {
    static let mycolor = Color("mycolor")
}

Text("あいうえお")
    .foregroundColor(Color.mycolor)

これまでと同じ書き方ができるのでこっちの方が良さげです。

ColorをAssetsで作るメリット

Assetsで定義することでデザイン調整をプログラムをいじらずできます。

今回やりませんでしたがダークモードとライトモード(通常)で同じ定義でカラーを分けることができます。

参考にしたサイト

qiita.com

おわりに

最後まで見ていただきヘペトナス!

読者登録・Twitterのフォローもお願いします。