[Swift] Auto Layout 세 가지 방법 (feat. SnapKit)

뷰(View)를 그릴 때 위치 즉, 레이아웃을 설정하게 되는데, 기기 사이즈가 워낙 다양하다보니 자동으로 기기 환경에 맞게 레이아웃이 변경되도록 하는 것을 오토레이아웃(Auto Layout)이라고 한다. 

 

AutoLayout 속성

오토레이아웃을 어떻게 구현할 수 있는지, 그 방법들의 장단점은 무엇인지 하나하나 살펴보자. 

(아래와 화면을 구성하기 위해 어떻게 레이아웃을 설정할 수 있는지 보자)

 

샘플 이미지

 

 

1. 일반적인 오토레이아웃

// X버튼

// autolayout 적용을 위해서는 false 설정 필수!
closeButton.translatesAutoresizingMaskIntoConstraints = false

// view에 추가 
self.view.addSubview(closeButton)

// autolayout
closeButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 20).isActive = true
closeButton.leading.constraint(equalTo: view.leadingAnchor, constant: 15).isActive = true

X버튼 하나만 설정해주는데도 긴 코드를 필요로 한다. 

나머지 버튼들에 대해서도 설정해주려면 각각 속성에 대한 contraint, isActive = true를 반복해야한다. 

 

다뤄야할 버튼,텍스트 등이 많을 경우 이 방법은 비효율/비생산적이다. 

여기서 조금 보완된 방법이 아래의 NSLayoutConstraint이다. 

 

2. NSLayoutConstraint 활용

// X버튼

// autolayout 적용을 위해서는 false 설정 필수!
closeButton.translatesAutoresizingMaskIntoConstraints = false

// view에 추가 
self.view.addSubview(closeButton)

// autolayout with NSLayoutConstraint
NSLayoutConstraint.activate([
	closeButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
	closeButton.leading.constraint(equalTo: view.leadingAnchor, constant: 15)
])

1번과 크게 다른 점은 매번 isActive를 쓰지 않아도 된다는 점이다. 사실 그거 하나만으로도 굉장히 편리하다...고 생각할 숫 잇지만 아래 SnapKit을 사용하는 경우가 가장 편리하고 눈으로 보기에도 간결하고 직관적인 코드인 것 같다. 

 

 

3. SnapKit 활용

// X버튼

// autolayout 적용을 위해서는 translatesAutoresizingMaskIntoConstraints = false 설정 안해도 됨!
// 이미 snapkit내에 포함

// view에 추가 
self.view.addSubview(closeButton)

// autolayout with NSLayoutConstraint
closeButton.snp.makeConstraints {
	$0.top.equalToSuperview().offset(20)
    // => $0.top.equalTo(self.view.snp.top).offset(20)
	$0.left.equalToSuperview().offset(15)    
}

 

한 눈에 봐도 코드가 매우 간결해진 것을 볼 수 있다. 그 이유는 바로 translatesAutoresizingMaskIntoConstraints 설정을 해줄 필요가 없고, 각 속성에 대해서도 간결하게 설정할 수 있기 때문이다. 

 

위와 같이 별다른 파라미터 없이 후위 클로저로 사용도 가능하며, 파라미터를 사용하고자 한다면 아래와 같이 구현 가능하다. 

 

// autolayout with NSLayoutConstraint
closeButton.snp.makeConstraints { (make) in 
	make.top.equalToSuperview().offset(20)
    // => make.top.equalTo(self.view.snp.top).offset(20)
	make.left.equalToSuperview().offset(15)    
}

 

크게 차이는 없으나 $0을 사용하는 것이 조금 더 편리하다는 것을 알 수 있다. 

 

equalTo, equalToSuperview에 offset, inset, edges등 다양한 좌표 값을 활용하면 원하는 위치에 이동시킬 수 있다. 

 

1,2번의 방법은 이제 조금 익숙하니, 조금 더 편리하고 생산성있는 SnapKit을 사용해서 뷰를 구성해보자!