iOS 7 から始める UIKit 入門 コントロール編 #1 はじめに

特集

諏訪 悠紀

2013.10.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

本シリーズでは iOS 7 からアプリ開発を始める人をメインターゲットとした UIKit の使いかたについて、UIKit User Interface Catalog をベースに解説していきたいと思います。

UIKit User Interface Catalog はそもそもどのようなことが載っているかといいますと、アプリ内に UIKit をどのように組み込んで使っていけばいいのかといったようなかなり基礎的な内容が詳細に解説されています。iOS 7 から新しくなったところもあるので、新しい UIKit の教科書みたいなものでしょうか。以上のことから iOS 7 から iOS アプリを作りたい！ と思っている人にとって非常に役に立つガイドラインになっています。

ビューとコントロールに分かれておりますが、まずはじめはコントロールについて解説したいと思います！第1回目はコントロールについての概要です。

コントロールとは？

コントロールとはユーザーとアプリのコミュニケーションツールです。ユーザーはコントロールを操作することで、アプリに何らかの意思を伝えたり、画面遷移などといったナビゲーションをしたり、また何らかの情報を入力したりします。ユーザーがアプリを使用する上で無くてはならないものです。

コントロールはユーザーが直接触れるものであるため、ユーザーによく知られている身近な存在です。そのためアプリ内でコントロールにどのような機能を持たせるかが、アプリの使いやすさに直接関係していると言えます。

uikit_uicontrols01

コントロールの種類

コントロールは以下のような種類に分かれています。これらのコントロールのクラスはすべて UIControl クラスのサブクラスです。それぞれのコントロールは目的に応じていろいろなカスタマイズ可能なプロパティやオプションを持っています。詳しくは各コントロールの解説ページを参考にしてください。

コントロールの機能

ステート(状態)

ステートは、コントロールが現在どのような状態か表現するプロパティです。 具体的には normal, selected, enabled, highlighted などのような種類があります (すべての種類は UIControlState を参照)。一度に複数の状態を持つことができます。また、それぞれのステートに個別の外観を設定することができるので、ユーザーに対してコントロールがどのような状態なのか分かりやすく伝えることができます。

ステートの初期の状態を設定するには Interface Builder の Attribute Inspector の Content フィールドを使用すると簡単です。

uikit_uicontrols03

Enabled は初期の状態でコントロールが操作できるかどうかを設定するプロパティです。コントロールが有効な場合は操作できますが、無効になっているときはグレー表示になり、操作できなくなります。デフォルトでは有効になっているので、もし初期状態で無効にしたい場合チェックボックスを外します。

Highlighted は初期の状態でコントロールを強調表示させるかどうかを設定するプロパティです。コントロールはタップされたときに、タッチされた状態から離れた状態になるまで、一時的に強調させることができます。ボタンなどの一部のコントロールの強調表示されたときの外観をカスタマイズすることができます。デフォルトは無効になっているので、必要であればチェックを付けましょう。

Selected は初期の状態でコントロールを選択させるかどうかを設定するプロパティです。ユーザーがコントロール上でタップすると、コントロールが選択された状態になります。多くのコントロールでは、この状態になっても動作や外観に影響を与えませんが、UISegmentedControl など対応しているコントロールもあります。このプロパティもデフォルトは無効になっているので、必要であればチェックを付けましょう。

イベントの取得

コントロールのイベントとは、ユーザーがコントロールから指を離したり、ドラッグしたり、タップしたりといったような、コントロールに対して行うことができるさまざまな物理的なジェスチャーのことです。例えば「検索ボタンをタップしたら検索処理を走らせる」といったような、ユーザーのアクションに応じて処理を実行させるにはイベントを取得する必要があります。

イベントの取得にはターゲット・アクション機構を使います。ターゲット・アクション機構は、コントロールの特定のイベントが発生したとき、オブジェクトにアクションのメッセージを送るようにするためのモデルです。

例えば、ユーザが Slider を操作したときに UIControlEventValueChanged というイベントを生成し、イベントを使用してラベルのテキストをスライダーの現在の値に更新することができます。このケースでは sender がスライダーで、イベントは値の変更、アクションがラベルのテキストの更新となります。また、コントロールのファイルにはラベルが IBOutlet インスタンスとして含まれている必要があります。スライダー、イベント、ターゲットとアクション間の関係を作成するには、次のいずれかの方法で実装します。

方法その1

addTarget:action:forControlEvents: メソッドを呼ぶ。 

[self.mySlider addTarget:self
                  action:@selector(myAction:)
        forControlEvents:UIControlEventValueChanged];

方法その2

Interface Builder とソースファイルを開き、対象のコントロールを Control キーを押しながら対象のソースファイルにドラッグする (Connections Inspector 機能)。

uikit_uicontrols04

方法その3

Interface Builder とソースファイルを開き、コントロールを Control キーを押しながらクリックし、対象のイベントをソースファイルにドラッグする。

uikit_uicontrols05

より詳細な情報は Cocoa Fundamentals Guide の Target-Action in UIKit を参照してください。

コントロール内のコンテンツの配置

特定のコントロール (ボタンやテキストフィールド) は、カスタムのイメージやテキストを含むことができます。これらのコントロールは Attributes Inspector の "水平方向の配置"（contentHorizontalAlignment）と "垂直方向の配置"（contentVerticalAlignment）のオプションを使用して、含まれるコンテンツの配置を指定することができます。

水平方向の配置オプションを使用すると、コンテンツをコントロールの左、中央、または右のいずれかに揃えて表示するかどうか、またはコントロールの幅を埋めるかどうかを指定することができます。垂直方向の配置オプションを使用すると、コンテンツをコントロールの上部、中央、または下部のいずれかに揃え表示するかどうか、またはコントロールの高さを埋めるかどうかを指定することができます。 このしくみを使うと、コントロールの中のコンテンツを確実に表示させることができるようになります。

uikit_uicontrols06

Auto Layout

Auto Layout システムは、View や Control などのような UI 要素に「レイアウトの制約」を定義する機能です。レイアウトの制約は、UI 要素同士の関係を表します。オートレイアウトの制約を作成するには、適切な UI 要素または UI 要素のグループを選択し、Interface Builder の右下隅のメニューからオプションを選択します。

Auto Layout について詳しく知りたいかたは以下のシリーズ記事を参照してください。かなり分かりやすくまとまっています！

まとめ

ということで、まずはコントロールの機能やレイアウト、実装方法がざっくりと解説してみました。コントロールの概要はこれまでと変わりませんが、各々の コントロールの使いかたは少しずつ変わっているようです。次回以降はそれぞれのコントロールについて詳しく見ていきたいと思います！

参考

*