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

November 01, 2014

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

Masonry/Snappy

インストール

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にドラッグして入れます。

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

Embedded Binariesとして追加する

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

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

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

こんなビューを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が取得できるので、様々な自由なコンストレイントを貼ることができます。

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

今回試したサンプル

morizotter/MZRSnappySample

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

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

参考

Masonry/Snappy