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

MENU

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

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

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

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

第5回 「UIControl編」

■ UIの挙動をコードで確認してみよう

今回は「UIControl編」というタイトルがついています。が、おなじみのオブジェクト・ライブラリには「UIControl」なんていうクラスのオブジェクトは出てきません。

図. オブジェクト・ライブラリ。「Button」はUIButtonクラスのオブジェクト、「Segmented Control」はUISegmentedControlクラスのオブジェクトだが、UIControlクラスのオブジェクトはこの欄には出てこない。

実は前々回のUIButtonクラス前回のUISegmentedControlクラスは、UIKitフレームワークの中でも共通の属性を持っているのです。それは「UIControlクラスを継承している」ということです。第一回目に紹介したApple社の公式ドキュメントをもう一度見てみましょう。

UIKit Framework Reference: Introduction

このページの後半にUIKit全クラスの継承関係を示した階層図があります。UIControlを探してみると、「NSObject」→「UIResponder」→「UIView」→「UIControl」とあり、その下には、UIButtonやUISegmentedControlなど全部で7つのクラスがあります。これらが一つのグループになるわけです。

UIControlクラス自体はユーザからの入力データをアプリに渡すための枠組みを提供しています。そのサブクラスのUIButtonを使うと、ひとつのボタンをユーザが操作した情報をアプリに渡します。UISegmentedControllerを使うと、複数の状態からひとつを選択するというボタン操作の情報をアプリに渡します。

今までの連載で

  • UILabel
  • UIButton
  • UISegmentedControl

という3つのクラスを紹介してきましたが、最初のUILabelは文字情報を表示するだけだったので、Storyboard上で設定のほぼ全てを確認できましたが、UIButtonとUISegmentedControllerは上記のようにUIControlクラスのサブクラスで、ユーザの入力を反映させる役割を持っているので、実際にアプリを動かして操作性を確認する必要があります。今回は少しソースコードを打ち込んでアプリを動かしてみましょう。

■ UIButtonの動きを確認

まずはUIButtonです。

  • 新規プロジェクトで「Single View Application」を作成。
  • Storyboard上のViewControllerのViewのバックグラウンドカラーをLight Gray Colorにする。
  • オブジェクト・ライブラリからButtonをView上に配置する。

図. オブジェクトライブラリからButtonを一つ配置。

  • アシスタント・エディタを開く。
  • Storyboard上のButtonを右クリックする。

図. アシスタント・エディタのアイコンは画面右上。

図. Buttonを右クリックするとイベントの種類を選べる。

  • 「Sent Events」欄の「Touch Up Inside」行の右の丸アイコンから画面右側のViewController.mの@end行の上までドラッグする。

図. アシスタント・エディタの左右画面でドラッグしてUIパーツとコードを結びつける。

  • 「Name」欄に「bgColorChange」と入力して「Connect」ボタンを押す。

図. IBAction名として「bgColorChange」と入力。

図. ViewController.mにIBAction「bgColorChange」が追加される。

こうすることによって、ViewController.mにIBAction「bgColorChange」が追加されました。このIBAction内に記述された処理は、ボタンを押した時に行われます。

ちょっと試してみましょう。

  • IBAction内に以下の処理を記述する。
- (IBAction)bgColorChange:(id)sender {
    UIColor *bgColor = [UIColor colorWithRed:rand() % 255 / 255.0f
                                       green:rand() % 255 / 255.0f
                                        blue:rand() % 255 / 255.0f
                                       alpha:1.0];
    [UIView animateWithDuration:0.5 animations:^{
        self.view.backgroundColor = bgColor;
    }];
}

プロジェクトを実行してButtonを押してみると、バックグラウンドカラーがランダムに変わっていきます。部屋の電気のスイッチみたいですね。

さあ、これでボタンに反応する処理ができました。さっそくここで連載3回目のUIButtonの説明を参考にして、Buttonをいろいろとカスタマイズしてみましょう。どんなボタンが実感として操作性が良いのか、いろいろ試してじっくりとUIを練り上げていくことが大切です。ただしはじめのうちはいろいろ試した結果、結局デフォルトがいちばん邪魔にならずに使いやすかった、ということになりがちです。それでも試す価値はあります。何よりUIKitに詳しくなります。是非いじり倒してみてください。

もうひとつ、UIButtonの挙動を試すべき部分があります。先ほど「IBAction内に記述された処理は、ボタンを押した時に行わます」と述べましたが、「ボタンを押した時」というのが、実はあいまいなままです。どのタイミングが「押した」時なのか、そこをしっかり押さえていきましょう。

  • アシスタント・エディタを開く。
  • Storyboard上のButtonを右クリックする。
  • 「Sent Events」欄の「Touch Down」行の右の丸アイコンから、画面右側のViewController.mのIBAction「bgColorChange」メソッドまでドラッグする。

 

図. 「Sent Events」欄から新たに「Touch Down」を追加してひも付け。

  • 同じく「Sent Events」欄の「Touch Up Inside」行の右側にある「×」アイコンをクリックする。

図. 今までひも付いていた「Touch Up Inside」を解除する。

これで「Sent Event」欄のひも付けが「Touch Down」のみになったはずです。ということは、Buttonを「Touch Down」した時にイベントが発生してIBActionの処理が行われる、ということになります。

「Touch Down」はボタンを押した瞬間、「Touch Up Inside」はボタンを押した後に離した瞬間、イベントが発生します。「Touch Up Inside」の必要性はわかるでしょうか?

ボタンを間違えて押してしまった!という時に、押した指を離さずにボタンの外までグリグリとドラッグしてそこで指を離したらボタンをキャンセルできた、という経験はよくあると思います。これで助かることもありますよね。ユーザに優しいボタンはこんな風にキャンセルを許してくれるような余裕があったりするものです。通常のアプリのボタンは「Touch Up Inside」でいいでしょう。

「Touch Down」の必要性はもちろんわかりますね。ゲームのようなリアルタイム性を要求されるアプリなら、ボタンは押した瞬間に反応してくれないと困ります。

これらのイベントは複数同時に指定できます。押した瞬間と、ドラッグしている最中の両方でイベントが発生するようにすることもできます。行いたい処理によって適切に選びましょう。イベントの種類はここでは全部で14種類あります。ボタンとは関係ないものも含まれますが、それぞれの意味については以下のサイトがとても参考になります。

にっくのiOSアプリ開発日記

説明を鵜呑みにせず実際に動かしてみて動作を確認する、というプログラマにとって大切な姿勢を学べます。みなさんも是非実践してみてください。

■ UISegmentedControlの動きを確認

今度はUISegmentedControlです。Storyboard上での配置はもう大丈夫ですね。

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

上図のような要素数3のセグメンテッド・コントロールの作り方は、前回(連載4回目)の記事にありますので参考にして下さい。Storyboard上で「Segment 0 – First」が「Selected」になるようにしておきます。「View」の「Background」は「Light Gray Color」を選択します。

この後の作業は上述のButtonの時と同じです。

  • アシスタント・エディタを開く。
  • Storyboard上のSegmented Controlを右クリックする。
  • 「Sent Events」欄の「Value Changed」行の右の丸アイコンから画面右側のViewController.mの@end行の上までドラッグする。

図. 今回は「Sent Events」欄の「Value Changed」からドラッグする。

  • 「Name」欄に「bgColorChange」と入力して「Connect」ボタンを押す。
  • IBAction内に以下の処理を記述する。
- (IBAction)bgColorChange:(id)sender {
    UIColor *bgColor;
    UISegmentedControl *segmentedControl = (UISegmentedControl *)sender;
    switch (segmentedControl.selectedSegmentIndex) {
        case 0:
            bgColor = [UIColor lightGrayColor];
            break;
        case 1:
            bgColor = [UIColor blackColor];
            break;
        case 2:
            bgColor = [UIColor whiteColor];
            break;
        default:
            break;
    }
    [UIView animateWithDuration:0.5 animations:^{
        self.view.backgroundColor = bgColor;
    }];
}

これでプロジェクトを実行すると、Buttonの時と同じようにそれぞれのボタンを押すと背景色が変わります。今回はグレーと黒と白に固定になります。

今回のポイントは「Sent Events」欄で「Value Changed」を選んだ部分でしょう。どのタイミングでイベントが発生するかという部分で「値が変わった時」と指定したわけです。これはセグメンテッド・コントロールの特徴を考えれば納得です。つまり、セグメンテッド・コントロールの場合は常に何らか一つの状態が選択されている、今回の初期状態ではSegment 0 – Firstが選択されている、そしてボタンを押すと他の状態が選択される、ということで「値が変わった時」にイベントが発生すればよい、ということになります。

逆に言うと、他のもの、例えば「Touch Up Inside」などを選んでもイベントは発生しません。14種類もあっても、実際に使えるのはそれらのうちの一部だけです。Buttonの時も同じです。

さあ、これでセグメンテッド・コントロールに反応する処理ができ上がりました。やはり前回のセグメンテッド・コントロールのカスタマイズの部分を参考にして色々と試してみましょう。ボタンのデザインをどうすれば「それらしく」「自然に」ユーザを導けるか、試すことによって色々と見えてくると思います。例えば「View」の「Tint」、つまりTint Colorを「Light Gray Color」「Black Color」「White Color」のいずれかにすると、どこかのタイミングで必ずボタンが消えて操作不能になります。Tint Colorは重要な要素なので、兼ね合いを慎重に考える必要があります。

それから今回は実験なのでラベルも変ですし、色の順番も明度の順番になっていません。この辺りは正しく修正した上で試すべきでしょう。

さて、ここまでUIControlクラスのオブジェクトの動作を、実際のアプリの動きの中で確認してみました。今回ソースコードの中身については解説を省略しましたが、余裕があればソースコードで使われてる関数やメソッドについて調べてみてください。

次回はテキスト入力を実現するUITextFieldクラスについていろいろ試してみましょう。UITextFieldクラスもUIControlのサブクラスです。今回のようにプロジェクトを実行して動作を確認していきます。お楽しみに。

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

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

今すぐ新規会員登録
Page Top