1.3 UIViewController1 UIViewController のカスタマイズ(storyboard)
参考 : UIViewController Class Reference | ViewController プログラミングガイド
MVCの C。View の表示と管理やモデルとViewの連携などを行います。 iOSアプリケーションの画面の一単位として認識すると、比較的理解がしやすいと思います。
役割は大きく分けて三つあります。
- コンテンツを表示させる
- 複数の UIViewController を管理するコンテナ
- 他のViewControllerと連携する Modal(1.4)
本節では 1, 3 の解説をします(2 は次章)。そして UIViewController の lifecycle(1.5) に関しても説明します。
ViewControllerを用いてコンテンツを表示するとき、もっともよく使われる方法は UIViewControllerを継承したクラスを作り、カスタマイズしていく方法です。 以下ではその方法について説明します。
UIViewControllerのデザインのカスタマイズ方法は大きく分けてxibを用いる方法とstoryboardを用いる方法があります。 この講義資料を執筆していた当初はxibを用いる方法が主流でしたが、現在はxib、storyboardの両方が用いられています。
xibはUIViewやUIViewControllerのパーツや画面単位でのUIをGUIを用いてデザインするツールです。storyboardは複数のViewController間の連携や画面遷移などをよりデザインしやすくしたツールです。 細かいパーツや再利用性の高いパーツを作る際はxibを用いるほうが利便性が高く、ViewController間の連携を考えるときはstoryboardの方が便利なケースがあります。 そのためどちらを使うかはケースバイケースだと認識すればよいでしょう。
このページではstoryboardを用いた資料の作り方について解説します。xibの資料をご覧になりたい場合はこちらをご覧ください。 1.3 UIViewController1 UIViewController のカスタマイズ(xib, autoresizing)
おそらくXcodeのプロジェクトをプロジェクトテンプレートから作成した場合
- Main.storyboard
- ViewController.h
- ViewController.m
などのファイルが初期状態で作成されています。Main.storyboardの中にはViewControllerが一つあり、またViewController.m ではまさにViewControllerのカスタマイズを行っています。
以下では、新規でサブクラスを作成し、新しくカスタマイズしたViewControllerを表示するところまでを行います。
まず、新規クラスファイルを生成します。クラス名はここではMixiSampleViewControllerとします。
- cmd+n あるいはメニューのFile → New → File と選んで新しいファイルを作成します
- Cocoa Touch Classを選択
- Class MixiSampleViewController , Subclass of UIViewController, Also create XIB Fileのチェックは外します
- Next → Create とすると新規ファイル MixiSampleViewController.h MixiSampleViewController.m が作成されます
新規ファイルが作れたら、次はstoryboard上で以下の操作を行います
- MixiSampleViewControllerのViewControllerを作成
- Initial ViewControllerに指定
- MixiSampleViewControllerのカスタマイズ
Main.storyboardを選択して、右側のユーティリティエリアのオブジェクトライブラリから View Controller を探し、中央の編集エリアにドラッグ&ドロップします。 こうすることで、このstoryboard上に新しいViewControllerが生成されます。
今新しく作ったView Controllerのクラスはデフォルトである UIViewControllerになります。このクラスを自分の作ったViewControllerに切り替えます。 ドラッグ&ドロップしたView Controller を選択した上で右側のユーティリティエリアの上部左から三番目の Identity inspectorの中にあるClassを MixiSampleViewController にします
storyboardにはデフォルトで最初にロードされるView Controllerを設定できます。そのView ControllerのことをInitial View Controllerと呼びます。
プロジェクトテンプレートから読み込まれた場合は最初に生成される ViewController というクラスがInitial View Controllerとして設定されています。その設定をMixiSampleViewControllerに移行します。
storyboardでMixiSampleViewControllerを選択した状態で、右側のユーティリティエリアの左から4番目のAttributes Inspectorを開きます。 その下のView Controllerの設定項目の中に is Initial View Controller のチェックがあると思うのでそこにチェックを入れます。 すると、View Controllerに向かって付いていた矢印が MixiSampleViewController に移ると思います。そうなっていればOKです。 この矢印はそのStoryboardのInitial View Controllerの 印です。
MixiSampleViewControllerの見た目をカスタマイズします。 ViewControllerには一つのUIViewインスタンスが割り当てられていて、それをカスタマイズしていく、というのが流れです。 UIViewについてはUIViewの項目をご覧頂く方がわかりやすいと思います。
ここではオブジェクトライブラリから適当にViewのパーツをこのView Controller内にドラッグ&ドロップしてください。 ドロップできないものもいくつかあります。それらはこのケースだと使えないものとなってきます。何が使えて、なぜ使えないかは UIKitに慣れてくると次第に理解が深まると思います。
まだAutolayoutの設定をしていないと思うのでパーツは左上に寄せておくと良いでしょう。 また次の章で利用するのでラベル(UILabel)とボタン(UIButton)を一つずつ配置しておいてください。
ここまでできれば、一度実行してみてください。シミュレータでカスタマイズしたView Controllerが表示されればOKです。
storyboardやxib上のパーツとソースコードを結びつけます。先ほどView ControllerのクラスをMixiSampleViewControllerを指定したのでこのViewControllerが生成されるときはMixiSampleViewControllerのインスタンスが生成されるようになっています。 さらにView上のパーツを各クラスのプロパティと結びつけたり、ユーザーのアクションとView Controllerのメソッドを結びつけます。 (アウトレットという仕組みです)
各パーツとクラスのプロパティを結びつけるにはIBOutletを用います。手順としては、IBOutletのプロパティをコード上で作成し、そのプロパティをstoryboard上のパーツと結びつけます。
MixiSampleViewControllerの@interface部にIBOutletキーワードを付けたUILabelのプロパティを作成してください
@interface MixiSampleViewController : UIViewController
@property (nonatomic, strong) IBOutlet UILabel *label;
@end
プロパティの宣言ができれば再びstoryboardに戻ってMixiSampleViewControllerを選択します。Document OutlineのMixi Sample View Controllerを選択して右クリックをすると次のようなパネルが出現します。
この中に先ほど作成した label という選択肢があると思います。labelの右側の円内からドラッグしてView Controller上のラベルにドロップしてください。こうすることでコード上のプロパティとstoryboard上のUIとを結びつけることができます。
実際に結びつけることができたら、ラベルの中身をコード上から書き換えて見ましょう。MixiSampleViewControllerのviewDidLoadを次のように書き換えます。
- (void)viewDidLoad {
[super viewDidLoad];
self.label.text = @"Test";
}
labelプロパティが正しく紐付けができていれば、実行時にラベルの文字列が "Test" に変化すると思います。 (長めのテキストを入れた場合は自動的にTruncateされると思います)
UI上のパーツに対してユーザーが何かアクションを起こした時に、対応するメソッドを呼び出すにはIBActionを利用します。 手順としてはIBOutletと同様に、メソッドを宣言、定義し、storyboard上のパーツと結びつけます。
MixiSampleViewControllerの@implementationの中に以下のメソッドを定義してください
- (IBAction)buttonTapped:(id)sender
{
self.label.text = @"YES";
}
このメソッドの戻り値の型がIBActionとなっていますが、これはInterface Builderが紐付けれるメソッドを探すためのキーワードとなります。 実際に何かreturnする、というものではなくvoidのようなもの、と思っておいて差し支えないと思います。
メソッドの実装ができれば先ほどと同様な結びつけを行います。
再びstoryboardに戻ってMixiSampleViewControllerを選択し、Document OutlineのMixi Sample View Controllerを選択して右クリックをすると次のようなパネルが出現します。 つぎは今定義したメソッドが増えていると思うので、ボタンにドラッグ&ドロップします。
ドロップしたときに、どのアクションと対応するかを聞かれると思います。ボタンタップ時には "Touch Up Inside" を選ぶのがよいでしょう。
これで結びつけは完了です。実行してボタンをタップするとラベルの文字が変わればOKです。
ここまでで、storyboardを用いてUIViewControllerをカスタマイズすることができると思います。 ここでレクチャーした内容を実際に行うのが演習課題となります。
解答例については iOSTraining/SampleProjects/1.3/MyFirstProject を参照してください。
新規プロジェクトを作成してください。 そのあと新しいViewControllerのクラスを作成し、storyboard上に追加し、起動時に表示されるViewControllerとなるようにしてください。
課題1.で作成したViewControllerにUILabelとUIButtonのパーツを配置してください。
UIButtonをタップしたらラベルの文字列が YES となるようにしてください。
Assistant Editorを表示した上で、control + ドラッグ&ドロップでプロパティの追加とIBOutletやIBActionの結びつけを一発でできます。
