アプリ内で自分で作成したボタンの背景を使うことができますが、ボタンの大きさごとに違う背景を作るのはかなり面倒です。プログラムでストレッチ画像を指定することによりひとつの背景画像を色々な大きさのボタンの背景として使うことができます。

背景画像を用意

今回は下記のような画像を用意しました。

ノーマル状態のボタン背景画像

ノーマル状態のボタン背景画像 button.png


ハイライト時のボタン背景画像 button2.png

ハイライト時のボタン背景画像 button2.png

ストレッチ画像を作り背景画像に指定する

stretchableImageWithLeftCapWidth:topCapHeight: でそれぞれ画像の左上からピクセル数を指定します。下の例は左から 12px 、上から 12px を指定しています。その大きさで四隅を切り取り、その四隅の間を伸縮して画像を表示します。

UIImage *normalImage = [UIImage imageNamed:@"button.png"];
UIImage *stretchImage = [normalImagge stretchableImageWithLeftCapWidth:12 topCapHeight:12];
[button setBackgroundImage:stretchImage forState:UIControlStateNormal];

UIImage *pushImage = [UIImage imageNamed:@"button2.png"];
UIImage *stretchImage2 = [pushImage stretchableImageWithLeftCapWidth:12 topCapHeight:12];
[button setBackgroundImage:stretchImage2 forState:UIControlStateHighlighted];

forState に指定できるのは上記のノーマル状態(UIControlStateNormal)、ハイライト状態(UIControlStateHighlighted)の他に無効状態(UIControlStateDisabled)、選択状態(UIControlStateSelected)があります。

一つの画像で色々な大きさのボタンを表示

これを使うと下記のように一つの画像で色々な大きさのボタンを表示できます。イメージの統一が簡単にできますね。

button.png を色々な大きさのボタンに表示

button.png を色々な大きさのボタンに表示


下のボタンを押したところ

下のボタンを押したところ

関連する投稿