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

MENU

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

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

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

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

第4回 「UISegmentedControl編」

■ モード変更はセグメンテッド・コントロールで

今回はUISegmentedContorlクラスの紹介です。

図. セグメンテッド・コントロール

セグメンテッド・コントロールと聞いてもはじめはピンと来ないと思いますが、View上に配置して動かしてみるとすぐに機能を理解できると思います。

 図. セグメンテッド・コントロールをStoryboard上に配置。

いくつかの状態からひとつの状態を選べる、そして選ばれた現在の状態が表示される一種のボタンと言えるでしょう。ポイントは常に1つ選ばれている、という点です。この原則を守って作るとわかりやすいUIになります。そうではない、何も選ばれていない状態のセグメンテッド・コントロールも作れますが、それは例外と考えた方がいいでしょう。初心者には王道の使い方を身につけることをオススメします。

今までと同じようにView上に配置して、Attributes inspectorをあれこれいじってみましょう。各設定での動作を実際に確認するのが使いこなしへの一番の近道です。

図. Segmented ControlのAttributes inspector画面。

まず「Style」ですが、

  • Plain
  • Bordered
  • Bar

の3種類があります。さっそくView上に全部配置してみましょう。

図. 3種類のスタイル。

見た目は全く変わりません。何か選択してみても見た目は変わりません。実はこのStyleはiOS6までは有効でしたが、iOS7では意味を持ちません。Styleそのものが廃止されてしまったのです。旧バージョンとの互換性の考慮でメニューが残っているようです。(ですが通常最新バージョンで使えなくなった機能は、すぐにStoryboard画面から消される事が多いので、ここにStyleが残っているのはちょっと意外です。)

次に「State」ですが、ここの「Momentary」にチェックを入れると、選択しても指を離すと選択状態が残らなくなります。セグメンテッド・コントロールの各セグメントが単なるボタンになるわけです。常に何らかの状態を持つべきセグメンテッド・コントロールでは通常使われないパターンですが、特殊な場合で必要になるでしょう。

 図. 何も選ばれていない状態のセグメンテッド・コントロール。現在の選択状態が不明。

「Segments」はセグメントの数です。iPhoneの場合、2〜5の範囲で選びます。なぜ最大が5かというと、Apple社の公式ドキュメント「iOS ヒューマンインターフェイスガイドライン」に、各セグメントが操作しやすい選択可能な領域(44×44ピクセル)を維持すること、とあるからです。縦長のiPhone画面内にあまりに多くのセグメントを横方向に並べてしまうと、一つ一つのボタン小さくなってしまい指で押せなくなるかもしれません。そうならないように目安として5セグメント以下にしましょう、ということです。

図. 下が7セグメントの場合。上に比べるとかなりボタンが押しにくくなっている。

「Segment」以下は、各セグメントの設定項目になります。「Segment」のプルダウンメニューで何番目のセグメントかを選んで、その内容を下の項目で設定します。セグメントの番号は左から0、1、2・・・です。

「Title」で各セグメントのタイトルを設定します。タイトルを設定するとその文字列が上の「Segment」項目にも表示されるようになります。

「Image」の所は注意が必要です。ここで画像ファイル名(プロジェクトに追加されている画像)を設定しても、デフォルトではセグメント全体にそのまま画像が表示されるわけではありません。試しに一つのボタンより少し大きめ(100×100ピクセル)の画像を用意してみましょう。

図. オレンジ背景100×100ピクセルのボタン画像

この画像をSegment 0に設定すると、まず「Title」に設定されていた文字列が消えて無効になります。ところが左のセグメントは青く塗りつぶされるだけで、オレンジ背景も文字列も表示されません。さらに左端の角丸がとれて単なる四角形になっています。

 図. Segment 0に画像ファイルを指定した画面。画像に関係なく青く塗りつぶされる。

実はこの青は下の方の「View」セクションの「Tint Color」で指定された色なのです。「Tint Color」は前回のUIButtonのところでも出てきましたね。キーカラーの意味合いがあるので、この部分にも影響してきているようです。つまりデフォルトでは画像を指定してもTint Colorで塗りつぶされてしまうだけなのです。

もし画像編集ソフトが使える場合、文字以外の背景を透明にしたPNG画像を用意してみてください。

 図. 背景を透明にしたボタン画像

これをセグメント画像として指定すると、文字の色にかかわらず、Tint Colorの色で文字が表示されるようになります。つまりセグメントの背景画像の扱いは、透明部分以外がTint Colorで表示される、ということになります。

 図. 背景が透明のボタンをセグメントの画像として指定

ちょっと文字が小さいですね。これはもともと100×100ピクセルある画像を小さいセグメント(61×29ピクセル)中に縮小表示しているためです。

どうしても自分で用意した画像をセグメントのボタンとして利用したい場合は、ソースコードでの指定が必要になります。まずAssistant editorでセグメンテッドコントロールのIBOutletを設定します。ここではmySegmentedControlというIBOutlet名を設定したとします。

次に起動時に以下のコードを実行するようにします。

 UIImage *myImage = [[UIImage imageNamed:@"orange_button.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[_mySegmentedControl setImage:myImage forSegmentAtIndex:0];

図. 上記コードを実行した場合のセグメント画像。指定した画像ファイルが表示される。

さてここで疑問がわきます。なぜこんなコードを書かないと指定した画像を素直に表示してくれないのでしょうか。その答えはやはりApple社のヒューマンインターフェースガイドラインにあると考えて良いでしょう。iOS7のUIでは「控えめであること」が要求されます。そしてUIはアプリ全体での統一性が重視される(ユーザが各画面で迷わないよういつも同じようなデザインで誘導していく)ので、シンプルなボタンがアプリ共通のTint Colorで描かれていることが良しとされるはずです。そうすると上記のようにデフォルトでは「透明部分以外がTint Colorで表示される」のが良い、ガイドラインに則しやすい、となります。

そんなこと言われると、工夫の余地がなくてつまらないな、と思う人もいるでしょう。デザイナーの方の腕の見せどころが奪われているような感じもします。でも良いUIの設計は思ったよりも難しく、工夫すればするほどユーザから不評を買うこともしばしばあります。ベテランのデザイナーの方ほどそういう経験があるのではないでしょうか。

いまここを読んでいる初心者の方は、まずはApple推奨のやり方で進めていきましょう。比較的楽に無難なUIを構築できるはずです。いずれUI設計の経験を積んでより良いユーザ体験の実現に確信が持てたら、上記コードを利用してオリジナル画像のセグメント表示にチャレンジしていきましょう。

さて次は「Behavior」の「Enabled」と「Selected」です。今までUILabelでもUIButtonでも出てきましたが、同じような意味になります。「Enabled」はセグメントごとに設定できるので、例えば初期状態では3つのボタンのうち3番目のボタンはまだ使えない状態にしたい、という時には、Segment 2(3番目)のEnabledのチェックを外せばO.K.です。

図. Segment 2(3番目のセグメント)のEnabledがオフの場合。文字がグレーアウトしている。

「Selected」がチェックされていると、そのセグメントが選択された状態になります。そしてセグメンテッド・コントロールの性質上、どれか一つのセグメントのみがチェック可能です。例えば2番目のセグメントのチェックを入れると、他の1番目や3番目のチェックは自動的に外れるようになっています。また、すべてのセグメントのチェックを外すこともできます。この場合は実行すると何も選ばれていないセグメンテッド・コントロールになります。UIとしては例外的なものでしょう。

ちなみに「Enabled」がオフになっているものを「Selected」オンにすることもできます。が、これもできてしまう、というだけであって、実際にはユーザにとって混乱の元になる(選択状態にあるものをクリックできない)のでそういう設定にならないように注意しましょう。

「Content Offset」は、各セグメント内のコンテンツの位置決めです。ここでいうコンテンツとは、Titleの文字列かImageの画像のどちらか、です。UIButtonの時は文字列と画像が共存できましたが、UISegmentedControlの場合はどちらか一つだけです。そしてそのOffsetが0の時、コンテンツはセグメント内の中央に位置します。移動したければX座標方向、Y座標方向にプラスマイナスの値で設定します。これはいろいろな値で試してみればすぐに分かります。

ここまでが「Segmented Control」セクションでした。次の「Control」セクションでは「Content」欄のみ説明します。この「Selected」「Enabled」「Highlighted」はUIButtonの時と同じ並びですが、ここではセグメンテッドコントロール全体に対しての指定となります。例えばEnabledのチェックを外すと、セグメンテッドコントロール全体がグレーアウトします。

このあと、「View」セクションでは、「Tint」のみに注目しておきます。今まで何度か出てきた「Tint Color」を指定します。ここの色を変えると、セグメンテッド・コントロールのイメージがガラッと変わることがわかると思います。本来各パーツでTint Colorを変えるのではなく、UIWindowという画面全体を管理するクラスのTint Colorプロパティを変えることによって、アプリ全体のキーカラーを変えるのが普通です。キーカラーというのはそもそもものごと全体を支配するカラーなのでUIのパーツごとにTint Colorを設定するのはかえって不自然なのです。

さてもっと細かく見ていくことも可能ですが、今回セグメンテッド・コントロールに関してはここまでとしましょう。

次回は少しソースコードを書いて、今まで出てきたUIButtonとUISegmentedControlの操作結果を反映するデモプロジェクトを動かしてみましょう。お楽しみに。

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

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

今すぐ新規会員登録
Page Top