Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@feat2kj

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?