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

AutoLayoutをSwiftで簡潔に記述できるSnappyを試してみた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