UIButtonに設定されたImageを状態に応じて他の色で塗りつぶしたい

Question

UIButtonのImageにPDFのベクター画像を設定しています。
例えば、ホームボタンに家のアイコンが設定されていて、押せる状態の時は黒
押せないときは、グレー
選択されているときは、ピンク
のようにしたいです。

状況に応じた画像をそれぞれ作成して、以下のように設定することもできますが、ベクター画像なので他の色で塗りつぶすことができたら、わざわざ複数の状態の画像を書き出さず一枚ですみます。

button.setImage(UIImage.init(named: "button_image"), for: .selected)

そのようなことが可能でしたら、教えてください。

Comments

[fuzzball]

ベクター画像についてはよく知らないのですが、その画像はモノクロ（例えばタブバーのアイコンのように）で、それにコードで色を付けたいということでしょうか？

[Shichi7]

回答ありがとうございます。はい、そうです。

Answer 1

PDFのベクター画像を設定しています。

おそらくそれは誤解です。
AssetsCatalogを使ってPDFを設定している場合は、PNGファイルのようにコンバートされるだけでPDFのまま端末にコピーされることはありません。
（PDFファイルのままプロジェクトに組み込んでロードしているのでしたら話は別ですが見た感じそうではなさそうですので）

さて本題ですが、AssetsCatalogを使っている場合、画像の詳細設定欄（？）でRender Asの設定をDefaultからTemplate Imageに変更してください。

これでこのイメージセットは、タブのように単色で描画されるようになります。
あとは、適切なタイミングでボタンのtintColorを設定してあげれば画像がその色になると思います。
（tintColorはstateごとに持てないので、そこを工夫してあげる必要はありそうです。）

Comments

[Shichi7]

こちらの方法でうまく行きました！ありがとうございます。

Answer 2

結局UIImageを生成しているようなので従来の方法が使えるのではないかと思いました。

SVGで試そうと思ったら標準では対応してないんですね‥。
ということで、検証していないのでうまくいかなかったらすみません。

• [Swift] iOS で画像の色を動的に変える のようにして、色んな色を付けたUIImageViewを生成します。
• 生成したUIImageViewを 【swift】【iOS】UIViewからUIImageを生成する のようにしてUIImage化します。
• そのUIImageをUIButton.setImage(_:for:)で設定します。