[ SPECIAL ]

Xcode 5 / iOS 7

iOS 7 では標準ボタンの画像が tintColor で塗りつぶされる

2013/09/19 Tomohiro Kumagai

□ iOS 7 では UIButton の表示方法が大きく変わりました。

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

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

iOS 7 And Later
iOS 7 からは UIButton の角丸枠がなくなりました。
iOS 6 And Earlier
iOS 6 のボタンには、角丸の縁がありました。

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

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

ボタンに画像を貼る場合の注意

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

UIButtonTypeSystem または UIButtonTypeRoundedRect の場合

iOS 7 And Later
iOS 7 では、UIButtonTypeSystem の UIButton に貼られた画像が tintColor で塗りつぶされます。
iOS 6 And Earlier
iOS 6 までは、UIButton に貼られた画像がそのまま表示されます。

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

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

UIButtonTypeCustom の場合

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

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

iOS 7 And Later
iOS 7 環境では、UIButtonTypeCustom なボタンは、画像に手を加えられないボタンになります。
iOS 6 And Earlier
iOS 6 の UIButtonTypeCustom ボタンの場合、角丸の縁が描かれません。

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

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

画像ボタンについて、まとめ

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

UIButtonTypeSystem のまま単色で塗らせない方法はなさそう

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

透明の tintColor は透明化

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

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

単色を乗せたくないところは透明にする

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

最初から単一色の画像を使う

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

画像ボタンは使わない方法も

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

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

tintColor の利点

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

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

 

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

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

[ もどる ]


 

カスタム検索

copyright © Tomohiro Kumagai @ EasyStyle G.K.
contact me: please from mail-form page.