• ログインログイン
  • 新規登録新規登録

MENU

「UIKitを使いこなそう(iOS7編)」 ーiOSアプリの正しいユーザインターフェイス構築のためにー(3)

連載UIKitを使いこなそう(iOS7編)

iOSアプリ作りの必修科目ともいえるUIKit。ゲームアプリにせよユーティリティーにせよユーザに対してわかりやすい操作性をキープするため、Xcodeを用いてユーザーインターフェースを勉強していきましょう。

前回までのプログラミング学習レシピに引き続き、3回目の勉強内容です。

第3回 「UIButton編」

■ 対話のきっかけは押したくなるボタンから

今回はUIKitでボタンを担当するUIButtonクラスの紹介です。

UIにおけるボタンの役割を考えてみると、ユーザが押したくなるボタンが必要だとわかります。ひと目見てボタンだとわかる、しかも無意識のうちに押したくなるようなボタンが良いボタンです(ユーザデータを削除するようなボタンでは、逆に押しにくくする工夫も必要です)。良いボタンはアプリのマニュアルやヘルプを不要にします。

ところが今回紹介するiOS7でのUIButtonをそのまま使うと、ひと目でボタンとはわからないような表示になります。大丈夫なのでしょうか。アプリ開発者はiOS7を初めて見た時、ずいぶんと驚いたのではないかと思います。

多少不安は残りますが、とにかく前回同様あれこれ設定をいじってみましょう。

■ Storyboardでいろんな設定を試そう

今回はStoryboard上でUIButtonを配置してみましょう。

Single View Applicationプロジェクトの初期状態では、1つのView Controller上に1枚のViewが配置されていましたね。まずその既に配置されているViewの背景色を薄いグレーに変更しましょう。ボタンの挙動がつかみやすくなります。

図. View(UIView)のAttributes inspector画面。今回は背景色を薄いグレーに変更。

そのViewの上にButtonを配置します。

 図. ButtonをView上へドラッグして配置。

配置してみると、およそボタンとは呼べないような、単なる「Button」という文字列がView上に表示されます。ではさっそくAttirubutes inspectorで設定を見てみましょう。

 図. Button(UIButton)のAttributes inspector画面。赤枠の設定項目を以下に説明。

まずは「Type」です。6種類から選べます。

  • Custom
  • System
  • Detail Disclosure
  • Info Light
  • Info Dark
  • Add Contact

デフォルトは「System」です。

それぞれの役割については配置後のアイコンをよく見て判断しましょう。連載初回で紹介したApple社のドキュメントでアイコンの意味が解説されてます。これらのアイコンを別の役割で使おうとすると、Apple純正のアプリと違う意味になってくるのでユーザが混乱するかもしれません。気をつけましょう。

 図. 「Type」メニュー。6種類から選択。

違いを知るにはとにかく全部配置しちゃいましょう。Buttonをあと5つ配置して設定を全部変えます。見やすくするために前回学んだUILabelで説明を表示してみました。

 図. 画面右側に6種類のボタン。左側の説明文はラベル。

そしてプロジェクトを実行させてそれぞれのボタンを押してみてください。6種類の中で同じように見えるものもあります。実はiOS6まではすべてボタンの見た目も挙動もそれぞれ違っていたのですが、iOS7になってから多少集約されています。iOS6時代の名残りも含まれているので、まずは自分で挙動を把握しましょう。なお、Customを押しても反応がないのは、文字通りカスタマイズが前提になっているからです。

図. Info Lightを押した時の画面。Info Darkも同じ。

こうやっていろいろ押してみると、「Custom」を除けば意外とボタンとして認識できそうです。いかにもボタン、という画像でなくても、青い文字を見るとなんとなくリンクを連想してクリックしたくなるのかもしれません。iOS7でUIKitのデザインが変わってとてもシンプルになった時、多くのアプリ制作者はUIパーツの機能がユーザにわかってもらえなくなるのではと危惧しましたが、意外とユーザの方が進んでいるのかもしれません。

そうするとこのボタンの文字やアイコンの色を別の色にカスタマイズする時には注意が必要ですね。他の色に変更したら、ボタンとして認識してもらえるかどうか実際にユーザテストすることをおすすめします。

次の「State Config」は、ボタンの状態を選択します。ボタンの状態には4種類あります。

 図. State Configの4つの状態。それぞれの状態で設定を行う。

現在「Default」になっていますが、これはボタンが押されていない状態です。ここから下の設定(「Text Color」など)は、ボタンが押されていない時に適用されます。「Highlighted」はボタンが押されている状態です。「Highlighted」を選択すると、下の設定が既に「Default」の時と変わっているのがわかります。「Text Color」が白になっていればボタンを押すと文字の色が白くなるわけです。その他にも4つの状態は何も設定しなくても少しずつ見た目が違うので区別できます。後ほど出てくる「Control」欄の「Content」でチェックボタンをオン・オフしてみると、それぞれの状態が確認できます。

4つの状態を確認しましょう。

  • Default ・・・ ボタンが押されていない初期状態
  • Highlighted ・・・ ボタンが押されている状態(「hilighted」プロパティが「YES」になっている状態)
  • Selected ・・・ 「selected」プロパティが「YES」になっている状態
  • Disabled ・・・ 「enabled」プロパティが「NO」になっている状態

「Selected」は使わなくてもボタンとして機能しますが、プログラム中で動的にもう一つの状態を作り出す時に便利です。例えばボタンを一度押した時にプロパティを「YES」にすると、過去にボタンを押したことがあるかどうかを区別できる状態が作り出せます。ちょっとややこしくなりますが、前回のUILabelの時の「Highlighted」の役割と似ています。ボタンの場合は「Highlighted」の役割が必須なので、こちらでは「Selected」を使えば良いでしょう。

「Disabled」は、UILabelでも触れたようにボタンそのものが使えない状態をプログラム中で作り出す時に便利です。「enabled」プロパティを「NO」にすると初期状態でボタンの文字がグレイアウトするので、ボタンが使用不可であることをユーザにはっきりと示すことができます。

これら4つの状態のそれぞれの設定項目を調整することによって、ボタンの反応をカスタマイズできるわけです。

「Title」のプルダウンメニューでは、UILabelの時と同じように「Plain」と「Attributed」が選べます。「Attributed」のほとんどの項目が機能しないのはUILabelの時と同様です。ボタンの文字が単一行でしょうから問題はないでしょう。ですからここでは「Plain」を選択しておきましょう。

「Title」の文字列はデフォルトで「Button」になっています。この欄では複数行表示も可能(「option」キー + 「return」キーで改行)ですが、実際のボタンでの表示は一行だけのようです。ボタンの機能説明は本来文字列よりもアイコンなどのグラフィックで示した方がユーザにやさしいです。シンプルを目指しましょう。

なお、「Type」欄で「Custom」か「System」以外を選んでいる時に「Title」文字列を入力すると、自動的にTypeが「Custom」になるので注意して下さい。

さて、ここまでにもいくつか出てきましたが、Storyboardでは設定画面の項目が実際には機能しないことが多々あります。大事なのは自分で設定を変えてどこまで表現できるかを必ず確かめることです。コードを書けばStoryboardで設定できないことが可能になるということもよくありますが、まずはStoryboardでの画面変化をしっかりつかみましょう。特にデザイナーの方はStoryboardでできる範囲をよく知っておいたほうがいいです。

余談ですが、デザイナーがコードに頼らず限界いっぱいまでStoryboardで頑張ればきっとプログラマの人と仲良くなれます(笑)。プログラマも初めのうちは「そんな余計なことまでやらずにこちらに相談してくれればこっちも全部コードで書けてやりやすいのに・・・」と思っているかもしれませんが、統合開発環境を使いこなそうと必死に努力するデザイナーの姿は、いつか必ずプログラマの心を動かすはずです(笑)。

個人で開発されている方は、進化したStoryboardの機能を利用しない手はないと思います。うまく使いこなせば開発効率がグッと上がるでしょう。

さて、次の「Font」はフォント設定です。「Type」が「Custom」か「System」の時に有効です。設定方法はUILabelと同じです。前回を参照して下さい。なおこの項目は「State Config」の4つの状態で共通の設定になります。

「Text Color」と「Shadow Color」は文字色と影の色の設定です。「Type」が「Custom」か「System」の時に有効です。設定方法はやはりUILabelの時と同じです。いろいろ試してみましょう。影の効果は後で出てくる「Shadow Offset」の数値を少し増やして確認しましょう。

「Image」はボタンの画像指定です。自分でボタンの画像を用意した場合はここで設定します。なお、「Title」の文字列が設定されていると、それを避けて左側に画像が描画されます。「Image」を指定した場合は「Title」文字列をすべて削除しておきましょう。もちろん「Title」文字列と「Image」画像が共存する可能性もある(後ほど出てくる「Tint Color」をうまく活用したい場合など)でしょうが、そういった機能説明の文字列表示はそもそもUILabelの役割です。用途を考えて使い分けましょう。

なお、「Type」欄で「Custom」以外を選んでいる時に「Image」を指定すると、自動的にTypeが「Custom」になるので注意して下さい。

「Background」は背景画像指定です。これは「Title」部分の背景になります。この場合は文字列が生かされるので、読みやすい色使いを心がけましょう。非デザイナーの方で慣れていない方はとりあえず文字色と背景色の明度の差を確保するよう心がけて下さい。色相や彩度を変えただけでは読みやすくなりません。

なお、「Type」欄で「Custom」か「System」以外を選んでいる時に「Background」を指定すると、自動的にTypeが「Custom」になるので注意して下さい。

ここまでの項目は「Font」を除き、4つの状態でそれぞれ別の設定にカスタマイズできます。

ここから以下の項目は4つの状態で共通の設定になります。

「Shadow Offset」は影のサイズです。設定方法はUILabelと同じです。前回を参照して下さい。この欄の「Reverses On Highlight」のチェックを入れると、ボタンを押した時に影の方向が逆になります。うまく設定すると文字列が引っ込んだように見えてボタン効果を表現できるかも知れません。

ただし影付き文字は控えめに設定しないと素人臭さが全開になってしまいます。注意深く設定していきましょう。

「Drawing」では3つの設定ができます。

「Shows Touch On Highlight」にチェックを入れると、ボタンを押した時にボタン中心部から周辺部に向かって明るくなります。「Type」欄で「Info Light」と「Info Dark」を選んだ時はデフォルトでこの設定になっているので、先ほど効果を確認していると思います。

「Highlight Adjust Image」は、「Image」で画像を指定したボタンを押した時の色変化を自動設定します。基本的に暗い色になりますが、実際にどんな色になるかは効果を目で確かめるのが一番早いと思います。

「Disabled Adjust Image」も同じで、「Image」で画像を指定したボタンが「Disabled」の状態になった時の色変化を自動設定します。これも効果を目で確認しましょう。基本的には薄い色になります。

「Line Break」は文字列がボタンの領域をはみ出した時の設定です。設定方法はUILabelと同じです。前回を参照して下さい。ただし改行はしないので改行ルールは無視されます。

次の「Edge」と「Inset」はペアで使います。ボタン領域を内側での文字列や画像などのマージンを設定します。CSSのご存じの方には、paddingプロパティと同じ役割、と言えばおわかりでしょうか。

要素がいくつかあるので、例をあげて確認しましょう。全くボタンらしくありませんが説明用に文字列も画像も指定してある全部入りのカスタムボタンです。「Type」は「Custom」に限定されます。

図. ボタンサンプル。「Type」は「Custom」、「Title」は「Button」、「Image」は100×100ピクセルの緑ベタ塗り、「Background」は100×100ピクセルの青ベタ塗り、ボタンのサイズは200×200ピクセル。

まずこのサンプルで気がつく点は、

  • 「Title」と「Image」を両方指定すると、文字列は画像の右に回り込む(既述)
  • 文字列と画像のペアが領域の中央部に配置される
  • 「Background」の画像サイズがボタン領域より小さい場合はボタン領域いっぱいに拡張される。

といったことです。「Background」が逆に大きい場合は入りきらない部分が切り取られます。実際に目で確認しておきましょう。

さてこれらを踏まえて「Inset」の数値をいじってみましょう。4つはそれぞれ上端、下端、左端、右端からの距離です。「Edge」が「Content」の場合は、文字列と画像がペアで動いていきます。「Title」だと文字列だけ、「Image」だと画像だけが動いていきますね。いろいろ試してみるとすぐにわかると思います。

次の「Control」欄は、UIButtonのスーパークラスであるUIControlクラスの設定画面なのですが、ここでは「Content」のみに注目しておきます。「Selected」「Enabled」「Highlighted」はそれぞれ同名のプロパティに対応していてい、上記の「State Config」と関連しています。もう一度確認しておいて下さい。用語で注意するのは、「Disabled」状態を確認したければここで「Enabled」のチェックをはずせば良い、ということです。あとはお分かりですね。

図. 「Control」欄の「Content」項目。それぞれのチェックボックスは「State Config」の状態と関連がある。

次の「View」欄もスーパークラスのUIViewクラスの設定画面なので、UIView編の時に説明することにしましょう。一点だけ、「Tint」だけ説明しておきます。 

 図. 「View」欄の「Tint」項目。

「Tint」はそのUIパーツの色設定なのですが、パーツ全体のキーカラーの設定といった役割を持っています。UIKitでは「Tint Color」と言っています。例えばここでボタンの場合デフォルトで青い色になっていますが、これを赤に変更するとボタンの文字列の色だけではなく、HighlightedやSelectedがYESの場合も赤を貴重に色の変化が起きるようになります。ボタン反応時に現れる薄い色も合わせてパーツ全体の色の変更を行う、という感じです。なおここが「Default」カラーになっている時は、親ビューのTint Colorを引き継ぎます。今回の親ビューは、View Controller上にはじめから配置されているViewですね。そのUIViewのデフォルトTint Colorはデフォルトになっています。さらにたどるとこのアプリケーション全体のwindowというプロパティのTint Colorが青い色になっています。というわけでデフォルトでTint Colorは青い色ということになります。

以上でひとまずUIButtonの説明は切り上げます。実際に効果を試すにはボタンを押してみるのが一番です。「Segue」の設定が分かる人は是非別のView ControllerをStoryboard上に配置して最初のView Controllerのボタンからセグエを引っ張って実行してみましょう。ボタンを押し終わった後の次の動作が画面全体に及ぶので、ボタンのフィーリングをつかみやすいと思います。ゲームに出てくるようなボタンではボタンの動作そのものに凝ったアニメーションが要求されることもあります。その場合はさすがにStoryboardだけでは実装できないので、ボタンからIBActionを設定して、アニメーションのコードを書きましょう。

今後もUIKitのパーツを一つずつ吟味していきます。じっくり取り組んでいる方はなんとなくコツをつかんだのではないでしょうか。要するに画面にパーツを配置して設定をいろいろ試せば全体像も見えてくる、ということです。コツコツやっていきましょう。

完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top