[SnapKit] 오토레이아웃 구현과 스냅킷 구현

앞선 포스트에서 언급했듯이 스냅킷은 불편한 코드베이스의 오토레이아웃을 클로저 형태로 간편하게 설정하도록 도와주는 라이브러리이다.

 

먼저 두개의 label을 생성해준다.

let labelA = {
    let label = UILabel()
    label.text = "오토레이아웃으로 구현"
    label.backgroundColor = .orange
    label.textAlignment = .center
    return label
}()
        
let labelB = {
    let label = UILabel()
    label.text = "스냅킷으로 구현"
    label.backgroundColor = .systemPink
    label.textAlignment = .center
    return label
}()

 

첫번째 label을 코드베이스의 오토레이아웃으로 현재 뷰에 추가해준다.

self.view.addSubview(labelA)
labelA.translatesAutoresizingMaskIntoConstraints = false
labelA.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
labelA.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 80).isActive = true
labelA.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -80).isActive = true
labelA.heightAnchor.constraint(equalToConstant: 80).isActive = true

 

순서대로 보면 먼저 현재 뷰에 addSubview를 선행한다.

다음으로 오토레이아웃을 따르겠다는 설정으로 translatesAutoresizingMaskIntoConstraints 값을 false로 변경한다.

그 다음에는 상단, 양 끝을 상위 뷰 safeArea에서 상대적으로 배치를 하고, 높이를 80으로 준다.

각 제약은 isActive를 통해 활성화해야 적용이 된다.

 

이번에는 동일한 제약을 스냅킷으로 구현해서 바로 아래에 추가해보겠다.

self.view.addSubview(labelB)
labelB.snp.makeConstraints {
    $0.top.leading.trailing.equalTo(view.safeAreaLayoutGuide).inset(80)
    $0.height.equalTo(80)
}

 

먼저 addSubview를 선행한다.

다음으로 label의 스냅킷 makeConstraints를 사용해서 클로저 형태로 필요한 제약을 모두 걸어준다.

특히 위의 예제에서 상단과 양 옆은 같은 옵션을 주고 있는데, 이럴 때 스냅킷의 장점이 확실히 드러난다.

단순하게 메서드 체이닝 형태로 열거하듯이 사용하면 모든 제약을 한 번에 걸어줄 수 있다.

 

참고로 inset 대신 offset을 사용하게 되면 기준이 바뀌어서 trailing이나 bottom은 음수로 지정해주어야 같은 효과를 나타낸다.

또한 이미 설정했던 제약을 수정하고 싶으면 updateConstraints를 사용하면 되고, 완전히 새롭게 다시 제약을 걸고 싶으면 remakeConstrains를 사용하면 된다.

중요한 것은 updateConstraints는 기존에 설정했던 제약만 수정이 가능하다는 점이 있다.

 

위의 예제를 구현한 화면은 아래와 같다.

두 가지 방식으로 추가한 subviews

 

아래는 전체 코드이다.

class FirstViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .systemBackground
        
        let labelA = {
            let label = UILabel()
            label.text = "오토레이아웃으로 구현"
            label.backgroundColor = .orange
            label.textAlignment = .center
            return label
        }()
        
        self.view.addSubview(labelA)
        labelA.translatesAutoresizingMaskIntoConstraints = false
        labelA.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
        labelA.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 80).isActive = true
        labelA.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -80).isActive = true
        labelA.heightAnchor.constraint(equalToConstant: 80).isActive = true
        
        let labelB = {
            let label = UILabel()
            label.text = "스냅킷으로 구현"
            label.backgroundColor = .systemPink
            label.textAlignment = .center
            return label
        }()
        
        self.view.addSubview(labelB)
        labelB.snp.makeConstraints {
            $0.top.leading.trailing.equalTo(view.safeAreaLayoutGuide).inset(80)
            $0.height.equalTo(80)
        }
    }
}

 

다음 포스트에서는 스냅킷을 사용해서 화면 전체에 다양하게 뷰를 위치 시키고, StackView도 추가하는 예제를 다루도록 하겠다.