snapkit(4)

1.뷰를 4등분해서 보여준다.

목표

red        | blue

black     |green

red는 top과 left에 맞닿아 있고 가로,세로는 전체의 50% 

blue는 top과 right에 맞닿아 있고 가로,세로는 전체의 50% 

black는 bottom과 left에 맞닿아 있고 가로,세로는 전체의 50% 

green는 bottom과 right에 맞닿아 있고 가로,세로는 전체의 50% 

이것을 snapkit으로 구현하면 아래와 같다.

import Foundation
import Foundation
import UIKit


class View2Controller: UIViewController {
    var didSetupConstraints = false

    let redView: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor.red
        return view
    }()

    let blueView: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor.blue
        return view
    }()

    let greenView: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor.green
        return view
    }()

    let blackView: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor.black
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.initUI()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    static func instance() -> View2Controller {
        let vc = View2Controller()
        return vc
    }
}

//snapkit
extension View2Controller {
    func initUI() {
        self.view.backgroundColor = .white

        self.view.addSubview(self.redView)
        self.view.addSubview(self.greenView)
        self.view.addSubview(self.blackView)
        self.view.addSubview(self.blueView)

        view.setNeedsUpdateConstraints()
    }

    override func updateViewConstraints() {
        if (!didSetupConstraints) {
            /*
                red   | blue
                black      | green 
            */
            redView.snp.makeConstraints { (make) in
                let multipler = 1.0 / 2.0
                make.width.equalTo(self.view).multipliedBy(multipler)
                make.height.equalTo(self.view).multipliedBy(multipler)
                make.top.equalTo(self.view)
                make.left.equalTo(self.view)
            }

            blueView.snp.makeConstraints { (make) in
                let multipler = 1.0 / 2.0
                make.width.equalTo(self.view).multipliedBy(multipler)
                make.height.equalTo(self.view).multipliedBy(multipler)
                make.top.equalTo(self.view)
                make.right.equalTo(self.view)
            }

            greenView.snp.makeConstraints { (make) in
                let multipler = 1.0 / 2.0
                make.width.equalTo(self.view).multipliedBy(multipler)
                make.height.equalTo(self.view).multipliedBy(multipler)
                make.bottom.equalTo(self.view)
                make.right.equalTo(self.view)
            }

            blackView.snp.makeConstraints { (make) in
                let multipler = 1.0 / 2.0
                make.width.equalTo(self.view).multipliedBy(multipler)
                make.height.equalTo(self.view).multipliedBy(multipler)
                make.bottom.equalTo(self.view)
                make.left.equalTo(self.view)
            }

            didSetupConstraints = true
        }

        super.updateViewConstraints()

    }
}

아래는 결과 화면이다.

뷰가 전체를 차지해서 navigationbar아래에 들어가있다. 먼가 이상하다. 

다음번에 수정되도록 해보자.

https://github.com/choiks14/SnapkitTest