はじめに
今日はSwiftUIのColorについて勉強していきます。
SwiftUIというかXcodeではColorをリソースとして定義することができます。
今回はAssetsでColorを作るところから使うところを共有しようと思います
環境
この記事の情報は次のバージョンで動作確認しています。
AssetsでColorを作る
まずリソースとしてColorを作ることをしていきます。
プロジェクトツリーのAssetsをクリック
右クリック → New Color Set
Xcodeの右側に表示されているアイコンをの一番右にあるやつをクリック。
(されていない場合下図赤枠をクリックすると表示されます)
画面中央に２つあると表示されていますが、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を使えばもっと安全に
文字列で指定するのはリネームした時に事故るのが怖いです。
なのでColorをextensionして定数化しましょう。
extension Color { static let mycolor = Color("mycolor") } Text("あいうえお") .foregroundColor(Color.mycolor)
これまでと同じ書き方ができるのでこっちの方が良さげです。
ColorをAssetsで作るメリット
Assetsで定義することでデザイン調整をプログラムをいじらずできます。
今回やりませんでしたがダークモードとライトモード(通常)で同じ定義でカラーを分けることができます。
参考にしたサイト
おわりに
最後まで見ていただきヘペトナス！
読者登録・Twitterのフォローもお願いします。