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
참고자료