UIButtonに任意の画像を使ってタップ時にハイライトさせる




 今更ではあるがメモしておく。

 画面上にボタンを用意するにはUIButtonを使うが、標準の外観では物足りない場合はボタンに見える画像を用意することが多い。ところがHTMLのつもりでImageプロパティに画像を指定してTitleプロパティにラベルを指定…とやってしまうと画像だけ表示されてラベルが表示されない。

 その場合はラベルも含んだボタン画像を用意するというのも一つの方法だが、ボタンの種類が多い場合は用意すべき画像が多くなってしまう。背景画像(BackgroundImageプロパティ)に画像を設定する。

 ただ、単純に背景画像を設定してもいいが、より細かく表現するにはボタンの状態別に画像を用意する。非活性状態、有効状態、選択状態、押下状態の4種類あればよいだろう。それぞれ次のようなコードになる。

1
2
3
4
[button setBackgroundImage:[UIImage ...] forState:UIControlStateDisabled];
[button setBackgroundImage:[UIImage ...] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage ...] forState:UIControlStateSelected];
[button setBackgroundImage:[UIImage ...] forState:UIControlStateHighlighted];

 これを利用してトグルボタンのような機能を持たせることもできる。タッチイベントを捕捉してOFF状態であればONにし、ON状態であればOFFにするという具合だ。しかし、これがうまく動作してくれない。いや、トグルは動作するのだが、OFF状態のボタン押下中のハイライト画像が表示されないのだ。

 まず、adjustsImageWhenHighlightedプロパティはfalseにしておこう。これがtrueだとOFF状態のボタンを押下した時にハイライト画像ではなく、ボタン全体が暗転してしまう。だがそれでもまだ不充分。

 どうやらUIControlState~はビット和を指定することが可能らしい。つまりON状態とOFF状態だけでなく、OFF状態のボタンを押下中やON状態のボタンを押下中という表現ができる。それを改良したのが次のコード。

1
2
3
4
5
[button setBackgroundImage:[UIImage ...] forState:UIControlStateDisabled];
[button setBackgroundImage:[UIImage ...] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage ...] forState:UIControlStateSelected];
[button setBackgroundImage:[UIImage ...] forState:(UIControlStateHighlighted|UIControlStateNormal)];
[button setBackgroundImage:[UIImage ...] forState:(UIControlStateHighlighted|UIControlStateSelected)];

 これでボタンの状態に関係なく、ボタン押下中はハイライト画像を表示させることができた。


関連記事

Leave a Reply

アーカイブ