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

検証用レイアウト

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

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作るのもって事があるので、覚えておいた方が良さそうです。