iOS 7 では標準ボタンの画像が tintColor で塗りつぶされる : iPhone プログラミング

SPECIAL

iOS 7 からデザインコンセプトが変更されて、いわゆるフラットデザインになりました。

UIButton もその影響を大きく受けて、標準スタイルは角丸からテキストだけに変更になりました。これまでのボタンタイプも UIButtonTypeRoundedRect から UIButtonTypeSystem に（名前だけ）変更になっています。

iOS 7 And Later

iOS 6 And Earlier

ボタンがテキストだけってもはやボタンではないような気もします。

iOS 7 的には、テキストを普通の文字色にして、ボタンは明るく目立つ色合いにすることで、シンプルかつ直観的に押せると思わせるデザインコンセプトみたいです。

iOS 7 では UIButton に画像を設定した場合にも、ずいぶん違った印象になります。

iOS 7 And Later

iOS 6 And Earlier

このような違いが表れるのは、iOS 7 では画像に貼ったボタンが tintColor 単色で塗りつぶされるためで、これとそもそもの角丸との違いによって、iOS 7 と iOS 6 とでまったく別物なボタンになりました。

ただし、このように iOS 7 環境で tintColor でボタンの画像が塗られるのは、ボタンの種類を UIButtonTypeSystem または UIButtonTypeRoundedRect にしている場合だけです。

ボタンの種類が UIButtonTypeCustom であれば、画像を tintColor で塗りつぶされることはありません。

それなら、画像を使うボタンは UIButtonTypeCustom にすれば良いかというと、一概にそうとは言えなかったりします。

iOS 7 And Later

iOS 6 And Earlier

iOS 7 では画像がそのまま表示されるボタンになるので良いのですけど、iOS 6 でも見た目が iOS 7 と同じようなボタンになります。

iOS 6 の場合、他のボタンは標準的な UIButtonTypeRoundedRect 指定のものだったりするでしょうから、iOS 7 のためにうっかり画像を使っているボタンだけに UIButtonTypeCustom を指定すると、とてもちぐはぐなデザインになってしまいます。

ボタンは UI コントロールの中では使用頻度はかなり高いものになるので、アプリを iOS 6 と iOS 7 の両方に対応させようとしたとき、こんな感じでけっこう気を遣いながら扱わなければいけなそうです。

UIButtonTypeSystem でも画像を tintColor で塗りつぶさせないようにできれば幾らか楽そうですけど、そういった調整を行うプロパティは見つけられませんでした。

ちなみに tintColor を透明色に設定すると画像が透明で塗りつぶされます。

これを使えば iOS 7 に限って画像が表示されないことはできるものの、画像の場所はしっかり取られて余白が不思議な感じになるので、あまり使いどころはなさそうでした。

画像の中でも透明色は塗りつぶされないので、iOS 7 のボタンで使う予定の画像はせめて造形が判るように、色を乗せたくない部分は透明で切り抜いておく必要がありそうです。

iOS 6 と iOS 7 の違いで画像の印象が極端に変化しないように、両対応の UI で使う画像は最初から単一色で作っておくのがいちばん賢い方法かもしれません。

いろんな場合を想定してボタンを作るのも大変なので、もしかするとそもそも画像は使わない方向で検討するのも悪くはないかもしれません。

特に iOS 6 と iOS 7 と両対応の場合、ボタンに画像を使うことは、思う以上に頭を悩ませることになりそうなので、それだけの価値があるかを考えて使うのが良さそうです。

しかしこれが iOS 7 専用アプリになった場合、ボタンで使うために用意した画像がわざわざ自動で単一色に塗られても何も嬉しくないような気がします。

それなら最初から、単一色の画像を自分で用意すればいいだけですからね。

この tintColor の仕様は何が良いのか考えてみました。

その結果、もしかするとアプリの設定でボタンの色を変えたいとか、ボタンの色を虹色で輝かせたいというようなときに、それが tintColor を調整するだけでできるというのは、もしかしたら利点なのかもしれません。