1.3 UIViewController1 UIViewController のカスタマイズ(storyboard)

参考 : UIViewController Class Reference | ViewController プログラミングガイド

MVCの C。View の表示と管理やモデルとViewの連携などを行います。 iOSアプリケーションの画面の一単位として認識すると、比較的理解がしやすいと思います。

UIViewController の役割

役割は大きく分けて三つあります。

1. コンテンツを表示させる
2. 複数の UIViewController を管理するコンテナ
3. ユーザの操作のなかに一時的に割り込む Modal(1.5)

本節では 1, 3 の解説をします(2 は次章)。そして UIViewController の lifecycle(1.6) に関しても説明します。

コンテンツを表示させる

ViewControllerを用いてコンテンツを表示するとき、もっともよく使われる方法は UIViewControllerを継承したクラスを作り、カスタマイズしていく方法です。 以下ではその方法について説明します。

UIViewControllerのデザインのカスタマイズ方法は大きく分けてxibを用いる方法とstoryboardを用いる方法があります。 この講義資料を執筆していた当初はxibを用いる方法が主流でしたが、現在はxib、storyboardの両方が用いられています。 そのため、xibの資料を残しつつstoryboardを用いたViewControllerのカスタマイズについて記載します。

UIViewController の初期化

まず、新規クラスファイルを生成。MixiSampleViewController。 cmd+n -> Objective-C Class -> With XIB for user interface

MixiSampleViewController を初期化

MixiSampleViewController *sampleVC = [[MixiSampleViewController alloc] initWithNibName:@"MixiSampleViewController" bundle:nil];

autolayout のチェックは外す

iOS 6 限定なので外してください。

Object library から View の配置

ドラッグして view の上に重ねます。

View の初期設定は各 inspector で

• attribute inspector で各属性を

• size inspector でレイアウトを

View の階層関係を意識

どの View に add するのかを考えながら配置しましょう。

レイアウトした ViewController の表示

MixiViewController の view 上に MixiSampleViewController の view を表示させる。

[self.view addSubview:_sampleVC.view];

IBOutlet の設定

xib 上の UIView component と実装ファイルをつなげてます。これで実装ファイルから xib の View を操作できるようになる。

MixiSampleViewController.h を選択した状態で option key を押しながら .xib を選択することで二面で開くことが出来る。 そこから ctl を押しながら view の上から左のソースコードへドラッグ。 ドロップすると以下のような画面が出ますので、 property の名前をつける。

下記のコードを MixiSampleViewController 書いて、View を操作。

[_grayView setBackgroundColor:[UIColor redColor]];

IBAction の設定

MixiViewController の xib 上に配置した Button など View コンポーネントからイベントを取得。 IBOutlet の設定と同じ操作をして、項目設定画面になったら Action を選ぶ。またメソッド名も入力。

するとメソッドの宣言が自動的にされます。。 また実装ファイルにも空のメソッドが追加されています。ここに MixiSampleViewController の view を表示させる、非表示にするという処理を加えてください。

- (IBAction)pressAddButton:(id)sender {
    [self.view addSubview:_sampleVC.view];
}

- (IBAction)pressRemoveButton:(id)sender {
    [_sampleVC.view removeFromSuperview];
}

autosizing の設定

各 View が親ビューのリサイズ時にどのように振る舞うかを設定します。

• 内側の矢印マーク チェックを入れると、親ビューのリサイズに合わせて自分をリサイズします。チェックを外すとリサイズせず固定のサイズを保ちます。
• 外側のマーク チェックを入れると、親ビューのリサイズしても自分と親ビューの間隔を固定に保ちます。外すと親ビューのサイズに合わせて間隔を伸縮します。

下記のコードで View のリサイズが出来る。どのような動きをするか確かめてみよう。

    [_grayView setFrame:CGRectMake(_grayView.frame.origin.x,
                                   _grayView.frame.origin.y,
                                   _grayView.frame.size.width/2,
                                   _grayView.frame.size.height/2)];