AutoLayoutの制御をNSLayoutConstraintでやってみる

画面の生成自体をxcode(storyboard)で行うか、コーディングで実装するか
よく議論が交わされますが、個人的には
xcodeをベースにした方が良いかなと思っています。
iOSの開発を初めたばかりだと、一番ここが悩んでしまうとこなのかなと。

# xcode実装にしている理由

WEBベースアプリの例ですが、メリットはこんな感じかなと思っています。

1. 他の人が見た時にパッと画面を把握できる
2. 開発者同士なら画面遷移図の代わりになるので、他にドキュメントを作成しなくて良い
3. autolayoutの設定が都度確認できる(プレビュー)
4. appleが推奨してるから
5. いろんな勉強会での、利用者の多さ
6. デザイン側とも確認がしやすい

# NSLayoutConstraintを利用してみる

上記理由で、初めからxcodeメインで行っていたので、コードでの実装をあまり意識していませんでした。
今回はいい機会なので、[NSLayoutConstraint]の使い勝手を軽く試してみようかと思います。

# 環境
* Mac OSのバージョン
    * 10.11.1(El Capitan)
* Xcodeのバージョン
    * 7.0.1

# 検証用レイアウト
以下のレイアウトを作成して、検証してみます。

![スクリーンショット 2015-12-06 22.15.40.png](https://qiita-image-store.s3.amazonaws.com/0/103324/82c2eb30-74a7-65e9-737b-19ba7d2c28fb.png)

# NSLayoutConstraintの実装
 
```
      let view1 = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        view1.backgroundColor = UIColor.cyanColor()
        self.view.addSubview(view1)
        view1.translatesAutoresizingMaskIntoConstraints = false //swift2用
        self.view.addConstraints([
            NSLayoutConstraint(item: view1, attribute: .Top, relatedBy: .Equal,
                toItem: self.view, attribute: .Top, multiplier: 1.0, constant: 10),
            NSLayoutConstraint(item: view1, attribute: .Left, relatedBy: .Equal,
                toItem: self.view, attribute: .Left, multiplier: 1.0, constant: 10),
            NSLayoutConstraint(item: view1, attribute: .Right, relatedBy: .Equal,
                toItem: self.view, attribute: .Right, multiplier: 1.0, constant: -10),
            NSLayoutConstraint(item: view1, attribute: .Height, relatedBy: .Equal,
                toItem: self.view, attribute: .Height, multiplier: 0.0, constant: 100),
            ]
        )
        
        let view2 = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        view2.backgroundColor = UIColor.greenColor()
        self.view.addSubview(view2)
        view2.translatesAutoresizingMaskIntoConstraints = false
        
        self.view.addConstraints([
            NSLayoutConstraint(item: view2, attribute: .Top, relatedBy: .Equal,
                toItem: view1, attribute: .Bottom, multiplier: 1.0, constant: 10),
            NSLayoutConstraint(item: view2, attribute: .Left, relatedBy: .Equal,
                toItem: view1, attribute: .Left, multiplier: 1.0, constant: 0),
            NSLayoutConstraint(item: view2, attribute: .Right, relatedBy: .Equal,
                toItem: view1, attribute: .Right, multiplier: 0.5, constant: 0),
            NSLayoutConstraint(item: view2, attribute: .Height, relatedBy: .Equal,
                toItem: self.view, attribute: .Height, multiplier: 0.0, constant: 100),
            ]
        )
        
        let view3 = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        view3.backgroundColor = UIColor.blueColor()
        self.view.addSubview(view3)
        view3.translatesAutoresizingMaskIntoConstraints = false
        
        self.view.addConstraints([
            NSLayoutConstraint(item: view3, attribute: .Top, relatedBy: .Equal,
                toItem: view2, attribute: .Top, multiplier: 1.0, constant: 0),
            NSLayoutConstraint(item: view3, attribute: .Left, relatedBy: .Equal,
                toItem: view2, attribute: .Right, multiplier: 1.0, constant: 10),
            NSLayoutConstraint(item: view3, attribute: .Right, relatedBy: .Equal,
                toItem: view1, attribute: .Right, multiplier: 1.0, constant: 0),
            NSLayoutConstraint(item: view3, attribute: .Height, relatedBy: .Equal,
                toItem: view2, attribute: .Height, multiplier: 1.0, constant: 0),
            ]
        )
```
## 実装した感想
* これくらいのレイアウトだと、xcodeとコードでは実装の手間は気にならない
* 実プロジェクトで利用する際は、autolayoutの設定値の定義場所設計の方が問題になりそう
* 開発者には[NSLayoutConstraint]のパラメータがxcodeのGUIより理解しやすい気がした
* [multiplier]項目というのを知らなかったので勉強になった(便利！)

# まとめ
今回は軽く試しただけですが、コードの方が良いという意見もわかるなと思いました。
それでもメリットが大きいので、xcodeをベースにする方向性は変わりませんが、
簡単な部品などはxib作るのもって事があるので、覚えておいた方が良さそうです。