LoginSignup
54

More than 3 years have passed since last update.

AutoLayoutをSwiftで簡潔に記述できるSnappyを試してみた

Last updated at Posted at 2014-11-01

AutoLayoutはコードで書くと記述が長くなって面倒ですよね。それで、少し前にAutoLayoutを簡潔に記述できるMasonryというのが出ていたのですが、久しぶりに見てみたら完全Swift対応版のMasonryが出ていたので、試してみました。

インストール

Swiftで書かれたライブラリにはcocoapodsのような便利なインフラがないので、手動でライブラリを追加していくことになります。

gitsubmoduleを追加する

まず、プロジェクトのルートに移動して、git submodule add https://github.com/Masonry/Snappy.gitをして、Snappyをgitのsubmoduleとして追加します。

Snappy.xcodeprojを利用するXcodeに追加する

Xcodeを開いて、先ほどsubmoduleとしてダウンロードしたSnappyのディレクトリの中の、Snappy.xcodeprojをFine navigatorにドラッグして入れます。

x1.png

こんな感じの見た目になります。

Embedded Binariesとして追加する

XcodeのTarget > General にある、Embeded Binariesの+ボタンを押して、Snappy.frameworkを追加する。

x2.png

こんな感じの見た目になります。さて、設定が出来ました!

Snappyを使ってViewの配置をしてみた

x6.png

こんなビューをframeを使わず、Snappyだけで表現してみました。

コード

import UIKit
import Snappy

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // FULL SCREEN VIEW [BLUE]

        let blueView = UIView()
        blueView.backgroundColor = UIColor.blueColor()
        self.view.addSubview(blueView)

        blueView.snp_makeConstraints { make in
            make.edges.equalTo(self.view)
            return
        }

        // PADDING ALL EDGES [ORANGE]

        let orangeView = UIView()
        orangeView.backgroundColor = UIColor.orangeColor()
        self.view.addSubview(orangeView)

        let orangeViewPadding = UIEdgeInsetsMake(10, 10, 10, 10)
        orangeView.snp_makeConstraints { make in
            make.edges.equalTo(self.view).with.insets(orangeViewPadding)
            return
        }

        // VIEW ON PADDING VIEW [GREEN]

        let greenView = UIView()
        greenView.backgroundColor = UIColor.greenColor()
        orangeView.addSubview(greenView)

        let greenViewPadding = UIEdgeInsetsMake(0.0, 0.0, 150.0, 10.0)
        greenView.snp_makeConstraints { make in
            make.top.equalTo(orangeView.snp_top).with.offset(greenViewPadding.top)
            make.left.equalTo(orangeView.snp_left).with.offset(greenViewPadding.left)
            make.bottom.equalTo(orangeView.snp_bottom).with.offset(-greenViewPadding.bottom)
            make.right.equalTo(orangeView.snp_right).with.offset(-greenViewPadding.right)
            return
        }
    }
}

使い方

UIViewControllerのviewDidLoadで色のついたビューを配置することをイメージして下さい。

一つ上の階層のビューと上下左右同じにする

let blueView = UIView()
blueView.backgroundColor = UIColor.blueColor()
self.view.addSubview(blueView)

blueView.snp_makeConstraints { make in
    make.edges.equalTo(self.view)
    return
}

一つ上の階層のビューから指定した距離をおいて配置する

let orangeView = UIView()
orangeView.backgroundColor = UIColor.orangeColor()
self.view.addSubview(orangeView)

let orangeViewPadding = UIEdgeInsetsMake(10, 10, 10, 10)
orangeView.snp_makeConstraints { make in
    make.edges.equalTo(self.view).with.insets(orangeViewPadding)
    return
}

その他に、下記のようにviewのNSLayoutAttributeが取得できるので、様々な自由なコンストレイントを貼ることができます。

x3.png

また、priorityの設定もできるので、ほとんどのこと(すべて)が表現できるのではないでしょうか?

今回試したサンプル

下記のコマンドでsubmoduleも取得して下さい。

git clone git@github.com:morizotter/MZRSnappySample.git
git submodule init
git submodule update

参考

更新

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
54