toolbarButtonへ画像を適用する オリジナルボタンを作る


開発をやってるとこんな感じのボタンが欲しいというのは結構あります。以前にギアのマークのボタンが欲しくて探しまわって、結局みつけたやり方はギアっぽいマークの文字コードでボタン化するでした。

先にまとめてしまうと透明と、それ以外の部分でつくられたPNGを用意することで色のついた部分が白く表示される。

今回は画像を作ってオリジナルのボタンを作りたかったのでやってみました。アルファチャンネルを使うと良さげなのは知っていましたがアルファチャンネルの知識があやふや。多分透明度のことだと思ったのでまずはこんな画像を用意。

130814 toolbarbutton add image

色のついた部分と透明部分とで出来た画像です。それをPNGで書きだして、Xcodeで取り込みます。それをボタンの画像に設定してみるといい感じに。

130814 toolbarbutton add image

試しにこんな画像でもOK。

130814 toolbarbutton add image

130814 toolbarbutton add image

取り込んだ画像をボタンに設定するには

StoryBoardの場合は以下の画像の様にボタンを選択してinspectorから設定。

130815-0001

コードの場合はここが参考になります。

Cocoaの日々: UIBarButtonItem にカスタム画像を表示する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です