1-3-2_UIViewController-customization-xib.md

参考 mixi-inc/iOSTraining 1.3 UIViewController1 UIViewController のカスタマイズ(xib, autoresizing)

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

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

UIViewControllerの役割

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

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

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

コンテンツを表示させる

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

UIViewControllerのデザインのカスタマイズ方法は大きく分けてxibを用いる方法とstoryboardを用いる方法があります。

そのため、xibの資料を残しつつstoryboardを用いたViewControllerのカスタマイズについては別ページをご覧ください。

1.3.1 UIViewControllerのカスタマイズ(storyboard)

UIViewControllerの初期化

まず、新規クラスファイルをSampleViewControllerとして生成します。
command + nあるいはメニューのFile → New → Fileと選んで新しいファイルを作成します。
Also create XIB fileにチェックを入れてください。

生成されたSampleViewControllerは下記のコードで初期化できます。

let sampleVC = SampleViewController(nibName: "SampleViewController", bundle: nil)

Object libraryからViewの配置

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

Viewの初期設定

Attributes Inspectorで各属性設定しましょう。

Viewの階層関係を意識

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

ViewController の view 上に SampleViewController の view を表示させる。

view.addSubview(sampleVC.view)

レイアウトした ViewController の表示

IBOutletの設定

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

SampleViewController.swiftを選択した状態で optionを押しながら.xibを選択することで二面で開くことが出来きます。
そこからcontrolを押しながらviewの上から左のソースコードへドラッグします。

下記のコードをSampleViewController書いて、Viewを操作します。

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    grayView.backgroundColor = .red
}

Auto Layoutの設定

各Viewにsuperviewやsubviewに対しての制約を設定します。

Constraint

• SampleViewControllerのviewのtopとgrayのviewのtopのスペースが20px
• SampleViewControllerのviewのleftとgrayのviewのleftのスペースが16px
• SampleViewControllerのviewのrightとgrayのviewのrightのスペースが16px
• grayのviewのheightを320pxに固定

Alignment Constraint

• grayのviewの縦方向のcenterとyellowのviewの縦方向のcenterのスペースが0px
• grayのviewの横方向のcenterとyellowのviewの横方向のcenterのスペースが0px

blueのviewに対しても任意のConstraintを設定することで、下図のように画面サイズが変わってもConstraintにしたがったレイアウトになります。

サンプルについてはsamples/day1/sample1-3-2/VCCustomizationを参照してください。