[iOS] Snapkit 라이브러리로 AutoLayout 잡기

Snapkit 이란?

짧은 코드로 autolayout을 표현할 수 있도록 도와주는 프레임워크

 

Snapkit 사용 전후 비교

⭐️  예제 1

기존 오토레이아웃

        yellowBox.translatesAutoresizingMaskIntoConstraints = false
        
        yellowBox.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.8).isActive =  true
        yellowBox.heightAnchor.constraint(equalTo: self.view.heightAnchor, multiplier: 0.8).isActive = true

        yellowBox.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        yellowBox.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true

또는

        yellowBox.translatesAutoresizingMaskIntoConstraints = false
        
        yellowBox.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 20).isActive = true
        yellowBox.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -20).isActive = true
        yellowBox.topAnchor.constraint(equalTo: self.view.topAnchor,constant: 20).isActive = true
        yellowBox.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -20).isActive = true

 

Snapkit 사용 후

yellowBox.snp.makeConstraints { (make) in
//            make.edges.equalTo(self.view).inset(UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20))
            make.edges.equalToSuperview().inset(UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20))
            // yellow 박스의 top, bottom, lead, trail을 view에 맞춘다
            // 패딩을 주려면 .inset 활용      
        }

 

실행 결과

 

⭐️  예제 2

기존 오토레이아웃

        redBox.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            redBox.widthAnchor.constraint(equalToConstant: 100),
            redBox.heightAnchor.constraint(equalToConstant: 100),
            redBox.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
            redBox.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
        ])

 

Snapkit 사용 후

        redBox.snp.makeConstraints { (make) in
            make.width.height.equalTo(100) // 너비, 높이 모두 100으로
//            make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top)
//            make.centerX.equalToSuperview()
            make.center.equalToSuperview() // 상위 뷰와 center x,y 같게
        }

 

실행 결과

 

⭐️  예제 3

기존 오토레이아웃

        blueBox.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            blueBox.widthAnchor.constraint(equalTo: self.redBox.widthAnchor, multiplier: 2),
            blueBox.heightAnchor.constraint(equalTo: self.redBox.heightAnchor),
            blueBox.topAnchor.constraint(equalTo: self.redBox.bottomAnchor, constant: 20),
            blueBox.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
        ])

 

Snapkit 사용 후

        blueBox.snp.makeConstraints { (make) in
//            make.width.equalTo(redBox.snp.width).dividedBy(1.5)
            make.width.equalTo(redBox.snp.width).multipliedBy(2)
            // multipliedBy : 곱하기, dividedBy: 나누기
            make.height.equalTo(redBox.snp.height)
            make.top.equalTo(redBox.snp.bottom).offset(20)
            // offset은 띄워주기 역할
            make.centerX.equalToSuperview()
        }

 

실행 결과

 

⭐️  예제 4

기존 오토레이아웃

        myDarkGrayBtn.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            myDarkGrayBtn.widthAnchor.constraint(equalToConstant: 200),
            myDarkGrayBtn.heightAnchor.constraint(equalToConstant: 100),
            myDarkGrayBtn.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
            myDarkGrayBtn.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
        ])

 

Snapkit 사용 후

        myDarkGrayBtn.snp.makeConstraints { (make) in
            make.width.equalTo(200)
            make.height.equalTo(100)
            make.bottom.equalTo(self.view.safeAreaLayoutGuide.snp.bottom)
            make.centerX.equalToSuperview()
        }

실행 결과

 

⭐️  예제 5

기존 오토레이아웃

    var greenBoxTopNSLayoutConstraint : NSLayoutConstraint? = nil

        greenBox.translatesAutoresizingMaskIntoConstraints = false

        greenBoxTopNSLayoutConstraint = greenBox.topAnchor.constraint(equalTo: self.blueBox.bottomAnchor, constant: 20)

        NSLayoutConstraint.activate([
            greenBox.widthAnchor.constraint(equalToConstant: 100),
            greenBox.heightAnchor.constraint(equalToConstant: 100),
            greenBox.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),

        ])

        greenBoxTopNSLayoutConstraint?.isActive = true

        self.greenBoxTopNSLayoutConstraint?.constant = CGFloat(offset)

 

Snapkit 사용 후

    var greenBoxTopConstraint : Constraint? = nil

        greenBox.snp.makeConstraints { (make) in
            make.width.height.equalTo(100)
            make.centerX.equalToSuperview()
//            make.centerX.equalTo(self.view)
            self.greenBoxTopConstraint = make.top.equalTo(blueBox.snp.bottom).offset(20).constraint
        }

        self.greenBoxTopConstraint?.update(offset: offset)

 

실행 영상

 

Snapkit을 쓰면 기존 오토레이아웃 방식보다 훨씬 간결하게 코드를 작성할 수 있다.

 

[출처]

https://github.com/SnapKit/SnapKit

https://www.youtube.com/watch?v=2Gp01Zqy2oA