Cocoaの日々

UIBarButtonItem に指定した画像を表示する。こんな感じ。

initWithImage: を使うと白抜き表示になる？

UIBarButtonItem にはカスタム画像用に initWithImage:style:target:action: が用意されている。これを使えば簡単にカスタム画像をツールバーに表示できる、わけではなかった。

[[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"Icon"]
  style:UIBarButtonItemStylePlain
 target:self
 action:@selector(openKarteList:)] autorelease];

普通にこんな画像を用意して
initWithImage: を使うと白抜きの表示になる。
ネットで探すとみんな困っているようだ。
UIBarButtonItem Image not showing - Mac Forums
Re: UIBarButtonItem image not showing up.... - msg#00180 - iPhoneSDKDevelopment

透明部分だけが利用される

UIBarButtonItem のリファレンスを読み直すと initWithImage:sytle:target:action:の説明にこう書いてあった。

The item’s image. If nil an image is not displayed.

The images displayed on the bar are derived from this image. If this image is too large to fit on the bar, it is scaled to fit. Typically, the size of a toolbar and navigation bar image is 20 x 20 points. The alpha values in the source image are used to create the images—opaque values are ignored.

[引用元] UIBarButtonItem Class Reference
※下線は当ブログの著者が引いた。

どうも表示対象になるのは画像の透明部分（alpha値 < 1.0）のみで、不透明な部分は無視されるようだ。通常のアイコン画像は周辺は透明にするが、本体は不透明なのでこのルールに引っかかり白くなってしまっていた。


そうしたら本体部分の alpha値を下げてみよう。画像加工ソフト（Pixelmator）を使い全体の透明度（alpha値）を 0.5 に下げてみた。
どうだろうか。

やはりだめ。白抜きが灰色になっただけ。

そうか、alpha値だけが利用されるってことは、alphaレイヤーだけで絵を描かないとダメなのか。

Pixelmator だと描画内容をマスク（alphaレイヤー）に変換するフィルタがあるので、それを使ってみた。
こんなのができあがった。これをツールバーへ表示してみよう。
でた。
押すと自動的に光った効果が適用される。
なるほど、そういうことか。

他の方法

alphaレイヤーだけで描画した画像を作ればいいことがわかったが、普通の画像で表示する場合はどうすればいいのか。イニシャライザに -initWithCustomView: があるのでこれを使えばいいようだ。試しに UIImageView を充ててみた。

UIImageView* view = [[[UIImageView alloc] initWithImage:
  [UIImage imageNamed:@"Icon2"]] autorelease];
[buttons addObject:[[[UIBarButtonItem alloc] initWithCustomView:view] autorelease]];

すると出た。


ただ UIImageView は UIControlのサブクラスではないため、target-action によるイベントハンドリングは自前で実装する必要がある。また押した時にボタンが光る効果もない。

そう考えるとツールバーへ表示する画像はあらかじめ alphaレイヤーに描く用に変換したものを用意した方が無難なようだ。

参考情報

Pixelmator は Amazon.co.jp でも購入できるようです。


英語がわかればオンラインでもっと安く購入できます。以下、過去に書いた購入記事です。
(旧) Cocoaの日々: Pixelmator 1.5 購入（割引クーポン適用）