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にドラッグして入れます。
こんな感じの見た目になります。
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の設定もできるので、ほとんどのこと(すべて)が表現できるのではないでしょうか?
今回試したサンプル
下記のコマンドでsubmoduleも取得して下さい。
git clone git@github.com:morizotter/MZRSnappySample.git git submodule init git submodule update