ボタンに画像を使ってみる

ボタンに画像を使う場合について再確認してみました。

←今回使う画像はこれで、サイズは23 x 23ピクセルのpng画像です。

(1) 画像をセットする場合

UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:button1];
button1.frame = CGRectMake(10, 10, 60, 60);
[button1 setImage:[UIImage imageNamed:@"twbtn1.png"] forState:UIControlStateNormal];
[button1 addTarget:self action:@selector(buttonTappedHandler) forControlEvents:UIControlEventTouchUpInside];
button1.layer.shadowOpacity = 0.5f;//shadow
button1.layer.shadowOffset = CGSizeMake(0, 2);//shadow

おー、ちゃんと影も画像のまわりに出来てるな。
意表をついてframe周りに出るんじゃないの？とか一瞬思いましたが。

ところでコード内にあるように、frameでサイズを 60 x 60ピクセルに設定してます。
というのも最初23 x 23ピクセルとして作成していたのですが、ボタンの押せる範囲が小さかったので大きくしたのです。
で、気が付いたのですが、ありがたいことにこういう場合、画像はframeの中心に自動的に配置してくれるんですね。
次の画像は、frameがどこにあるかわかるように色を付けたものです。



確かに、中心にあるな。


(2) 背景画像として使う

UIButton *button2 = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:button2];
button2.frame = CGRectMake(10, 10, 23, 23);
[button2 setTitle:@"/" forState:UIControlStateNormal];
[button2 setBackgroundImage:[UIImage imageNamed:@"twbtn1.png"] forState:UIControlStateNormal];
[button2 addTarget:self action:@selector(buttonTappedHandler) forControlEvents:UIControlEventTouchUpInside];
button2.layer.shadowOpacity = 0.5f;//shadow
button2.layer.shadowOffset = CGSizeMake(0, 2);//shadow

setBackgroundImage:forState: なんてメソッドがUIButtonクラスにあるので使ってみました。
背景画像に画像を設定できるんですね。
背景画像って言うくらいだから手前に文字の設定もできるんです（見にくいけど）。

ともかく、背景画像を自分で作成して文字列をコード内でいろいろと変えるような場合にはこの方法が使えるんだな。


(3) 画像をテキストの代わりに使う

UIButton *button3 = [UIButton buttonWithType:100];
[self.view addSubview:button3];
button3.frame = CGRectMake(10, 10, 230, 30);
[button3 setImage:[UIImage imageNamed:@"twbtn1.png"] forState:UIControlStateNormal];
[button3 addTarget:self action:@selector(buttonTappedHandler) forControlEvents:UIControlEventTouchUpInside];

よく使う100番のボタンなんかのテキストに相当する部分にも画像が置けるんですね。
ところが、どういうわけかframeのサイズが設定できません。
コードだと230 x 30ピクセルで指定してますが、実際のボタンのサイズはもっと小さいですよね。画像サイズを見て内部で決定してるんでしょうか。
うーん、設定する方法ないのかなあ。