読者です 読者をやめる 読者になる 読者になる

知行合一

とか言ってみる

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

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

環境
swift version 2.3

この本の答え

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

Q.1 (Q3) 中心にViewを置く
f:id:komu11:20160821154950p:plain:w300

        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上にずらす
f:id:komu11:20160821154842p:plain:w300

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

Q4. 画面いっぱい
f:id:komu11:20160821155009p:plain:w300

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

Q5. 画面の左下を基準にした位置(20, 20)に固定サイズのViewを置く
f:id:komu11:20160821155029p:plain:w300

        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で積み上げる
f:id:komu11:20160821155042p:plain:w300
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)を表示
f:id:komu11:20160821155310p:plain:w300

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を同じ幅で並べたいとき
f:id:komu11:20160821155131p:plain:w300

        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を等間隔で並べて表示したい時
f:id:komu11:20160821155147p:plain:w300

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

        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)
        })

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