【swift】SnapKitを使ってAutolayoutを簡単に実践する

5/21追記 swift3.1ver
【swift3.1】SnapKitを使ってAutolayoutを簡単に実践する - 知行合一

SnapKitを使ってAutoLayoutの練習問題を解いてみた。
Requirements

環境
swift version 2.3

この本の答え

雑にまとめている。
使うViewはorengeView, grayView, brownViewとspacerView。
それぞれインスタンス作成するだけでサイズとかを後から指定する流れ。

Q.1 (Q3) 中心にViewを置く

        view.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: 100, height: 100))
            make.center.equalTo(CGPoint(x: 0, y: 0))
        })

Q2. 中心から100px上にずらす

       view.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: 100, height: 100))
            make.center.equalTo(CGPoint(x: 0, y: -100))
        })

Q4. 画面いっぱい

        view.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: deviceWidth, height: deviceHeight))
        })

Q5. 画面の左下を基準にした位置(20, 20)に固定サイズのViewを置く

        view.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: 100, height: 100))
            make.left.equalTo(20)
            make.bottom.equalTo(-20)
        })

Q6. 画面の下から左右いっぱいの複数のViewを高さ固定50pxで積み上げる

Viewを適当に作って、

        grayView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: deviceWidth, height: 50))
            make.left.bottom.right.equalTo(0)
        })

        orengeView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: deviceWidth, height: 50))
            make.left.right.equalTo(0)
            make.bottom.equalTo(-50)
        })
        
        brownView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: deviceWidth, height: 50))
            make.left.right.equalTo(0)
            make.bottom.equalTo(-100)
        })

//Q8. 画面の下から左右いっぱいの複数のViewを縦横の比率一定で積み上げる
省略(サイズ変えるだけなので)
//Q9. 画面の上から何%(40%)いっぱいにViewを表示
省略(サイズ変えるだけなので)

//10. 画面を上下に分割して分割した領域の中央にイメージ(150×100)を表示

grayView.addsubview(orengeView)してから

        grayView.addSubview(orengeView)
        
        grayView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: deviceWidth, height: deviceHeight/2))
        })
        
        orengeView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: 150, height: 100))
            make.center.equalTo(CGPoint(x: 0, y: 0))
        })

11. 複数のViewを同じ幅で並べたいとき

        grayView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: deviceWidth/3, height: 100))
            make.top.equalTo(100)
            make.left.equalTo(0)
        })
        
        orengeView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: deviceWidth/3, height: 100))
            make.top.equalTo(100)
            make.left.equalTo(deviceWidth/3)
        })
        
        brownView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: deviceWidth/3, height: 100))
            make.top.equalTo(100)
            make.right.equalTo(0)

Q12. 複数のViewを等間隔で並べて表示したい時

スペーサーを作って間隔を調整する

        let spacerView = UIView()
        self.view.addSubview(spacerView)
        
        grayView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: 50, height: 50))
            make.top.equalTo(100)
            make.left.equalTo(0)
        })
        
        spacerView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: 50, height: 50))
            make.top.equalTo(100)
            make.left.equalTo(50)
            make.right.equalTo(brownView).inset(50)
        })
        
        spacer.addSubview(orengeView)
        orengeView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: 50, height: 50))
            make.center.equalTo(CGPoint(x: 0, y: 0))
        })
                
        brownView.snp_makeConstraints(closure: { (make) -> Void in
            make.size.equalTo(CGSize(width: 50, height: 50))
            make.top.equalTo(100)
            make.right.equalTo(0)
        })

もっと複雑なレイアウトもやってみたい。