はじめに
アプリ開発をしていて「単色のシンプルなアイコンを画面に載せたいけど、色はユーザーがカスタムできるほうがいい。けど色ごとに画像を用意するのは面倒」などと思い、何かいい方法はないかと調べたので、それを記したいと思います。
動作確認はXcode 11.3.1 にて。
背景透過で白色(#FFFFFF)の画像を用意する
画像はICOOON MONO様からお借りしました。
見やすさのため背景を灰色にしていますが、実際は透過色です。
Xcodeで画像をAssetsに追加
自分で用意した画像を使う場合、XcodeのAssetsに追加してあげる必要があります。
↓こんな感じから、
↓これでOK
ImageのcolorMultiplyで色付け
↓ViewにImageを追加します。
VStack {
Text("Hello, World!")
Image("icon_white_sun")
.resizable()
.scaledToFit()
.colorMultiply(Color.red)
.frame(width: 48, height: 48)
}
colorMultiply が肝で、白色部分に指定した色をブレンドさせてあげます。
↓結果はこんな感じ。
↓あとは色の指定を変えるだけで
.colorMultiply(Color.green)
緑にもできる 👍
ナビゲーションバーで色付けする場合はcolorMultiplyではなく、foregroundColorでいけました。
NavigationView {
VStack {
(省略)
}
(省略)
.navigationBarItems(trailing: NavigationLink(destination: ContentView(), label: {
Image("icon_white_sun")
.resizable()
.scaledToFit()
.foregroundColor(Color.orange)
.frame(width: 20, height: 20)
}))
}
いいですね 👍
何かのお役に立てば幸いです。