Auto Layout Programmatically
지난 포스팅에서는 단순히 UIButton과 UILabel을 코드로 작성하고 위치시켜봤다면 이번 포스팅에서는 Constraints를 동적으로 관리하는 방법을 알아보도록 하겠습니다. 먼저 이번 포스팅에서 만들어 볼 예제의 결과 화면을 확인하고 시작하겠습니다.
하단의 Change Constraints 버튼을 누르면 UIView의 크기가 변하는 것을 확인하실 수 있습니다.
그럼 본격적으로 시작해보도록 하겠습니다.
반드시 이전 포스팅을 숙지하시고 들어가시기 바랍니다.
1. UIButton
먼저 버튼 하나를 화면 하단에 위치시키고 그 자리에 고정시켜 놓겠습니다.
class ViewController: UIViewController{
let changeConsBtn = UIButton()
override func viewDidLoad(){
setButton()
}
func setButton(){
changeConsBtn.translatesAutoresizingMaskIntoConstraints
= false
changeConsBtn.backgroundColor = .darkGray
changeConsBtn.setTitle("Change Constraints", for: .normal)
changeConsBtn.setTitleColor(.white, for: .normal)
changeConsBtn.addTarget(self,
action:#selector(changeBtnTapped), for: .touchUpInside)
self.view.addSubview(changeConsBtn)
changeConsBtn.topAnchor.constraint(equalTo:
self.view.bottomAnchor, constant: -50)
.isActive = true
changeConsBtn.leadingAnchor.constraint(equalTo:
self.view.leadingAnchor).isActive = true
changeConsBtn.trailingAnchor.constraint(equalTo:
self.view.trailingAnchor).isActive = true
changeConsBtn.bottomAnchor.constraint(equalTo:
self.view.bottomAnchor).isActive = true
}
}
.translatesAutoresizingMaskIntoConstraints = false와.isActive = true를 해주는 것을 잊지마세요!
- 버튼의 액션에 대한 함수는 뒤에서 작성하도록 하겠습니다.
2. UIView
이번엔 동적으로 Constraints들이 바뀔 UIView를 만들어보도록 하겠습니다. 먼저 Constraints가 동적으로 바뀔 것이기 때문에 UIButton과 다르게 Constraints를 배열로 관리하도록 하겠습니다.
그리고 이러한 Constraints들을 변수에 담고 배열에 넣어 Activate 하도록 하겠습니다.
class ViewController: UIViewController{
var ConsArray:[NSLayoutConstraint] = []
let changeConsBtn = UIButton()
override func viewDidLoad(){
setButton()
setView()
}
func setView(){
colorView.translatesAutoresizingMaskIntoConstraints = false
colorView.backgroundColor = .orange
self.view.addSubview(colorView)
let leadingCons=colorView.leadingAnchor.constraint(equalTo:
self.view.leadingAnchor)
let trailingCons=colorView.trailingAnchor.constraint(equalTo:
self.view.trailingAnchor)
let topCons=colorView.topAnchor.constraint(equalTo:
self.view.topAnchor)
let bottomCons=colorView.bottomAnchor.constraint(equalTo:
self.view.bottomAnchor, constant: -50)
ConsArray = [leadingCons, trailingCons, topCons, bottomCons]
NSLayoutConstraint.activate(ConsArray)
}
/*
setButton Code
*/
}
여기까지 기본적으로 UIView와 UIButton을 위치시켜보았습니다. 이젠 버튼의 액션으로 UIView의 Constraints가 동적으로 바뀌는 것을 구현해보도록 하겠습니다.
3. changeBtnTapped()
이 함수 안에는 UIView의 Constraints를 바꿔주는 코드가 다음과 같이 들어가야 합니다. 코드의 내용은 작성하시는 분들의 방식대로 작성해주시면 됩니다. 저는 다음과 같이 작성하였습니다.
먼저 기존의 Constraints를 갖고 있는 ConsArray와는 별개로 새로운 Constraints를 담을 newConsArray 변수 하나를 선언하도록 하겠습니다. 그리고 현재 UIView에 어떤 Constraints 가 적용되어 있는지를 판단하기 위한 isNewCons 변수도 함께 선언하도록 하겠습니다.
class ViewController: UIViewController{
let colorView = UIView()
let changeConsBtn = UIButton()
var ConsArray:[NSLayoutConstraint] = []
var newConsArray:[NSLayoutConstraint] = []
var isNewCons:Bool = false
override func viewDidLoad(){
setButton()
setView()
}
/*
setButton, setView Code
*/
}
그리고 버튼의 액션에 대한 코드는 다음과 같이 작성하였습니다.
@objc func changeBtnTapped(){
if isNewCons {
NSLayoutConstraint.deactivate(newConsArray)
NSLayoutConstraint.activate(ConsArray)
isNewCons = false
}else {
NSLayoutConstraint.deactivate(ConsArray)
let heightCons =
colorView.heightAnchor.constraint(equalToConstant: 200.0)
let widthCons =
colorView.widthAnchor.constraint(equalToConstant: 200.0)
let horizontalCons =
colorView.centerXAnchor.constraint(equalTo:
self.view.centerXAnchor)
let verticalCons =
colorView.centerYAnchor.constraint(equalTo:
self.view.centerYAnchor)
newConsArray =
[heightCons, widthCons, horizontalCons, verticalCons]
NSLayoutConstraint.activate(newConsArray)
isNewCons = true
}
}
간단하게 설명드리자면 버튼이 눌렸을 때 isNewCons가 true라면, 즉 현재 UIView에 newConsArray가 적용되어 있다면 그것을 .deactivate시키고 기존의 ConsArray를 적용시키는 코드입니다. isNewCons가 false라면 그 반대가 되겠죠?
마무리
오늘은 이렇게 Constraints를 동적으로 적용시키는 방법에 대해 알아보았습니다. 이렇게 코드로 Constraints를 다루다보니 요소들 간의 관계를 더욱 명확히 알 수 있는 것 같고 더욱 직관적인 것 같이 느껴지기 시작했습니다! 긴 글 읽어주셔서 감사합니다.
Source : github
참고자료