iOS - AutoLayout, Autoresizing는 무엇인가
UIKit의 Storyboard를 사용하여 UI가 디자인 된 프로젝트를 Code Base로 컨버팅을 진행하다가, 문득 매번 사용하는 translatesAutoresizingMaskIntoConstraints = false 해줘야하는 이유에 대해 궁금해졌다!
AutoLayout, Autoresizing, translatesAutoresizingMaskIntoConstraints 예제를 통해서 알아보시죠!
예제 git : https://github.com/KimCookk/iOS_Example/tree/main/UI/UIKit/AutoresizingMask
AutoLayout?
뷰들 사이에 관계를 설정하여, 자동적으로 뷰의 크기와 위치가 계산되는 방식입니다. 스토리보드나 코드를 통해 버튼 하나를 생성한다고 가정하면, UIButton을 생성해주고, Constraint를 설정해주는데 Constraint는 앞선 말한 뷰들 사이의 관계이며, 설정 된 제약에 따라 크기와 위치가 결정됩니다.
아래의 Constraint를 확인하면, 설정 뷰의 어떤 값을 어떤 뷰의 어떤 값과 어떻게 어떻게 한다라는 내용을 담고 있다.
subRectangleView 의 centerX를 rectangleView의 centerX와 equal( 동일 )하게 가져가며, 해당 값에 1.0배 + 0.0 수치를 적용한다.
let centerXOfsubRectangleView = NSLayoutConstraint(item: subRectangleView, attribute: .centerX, relatedBy: .equal, toItem: rectangleView, attribute: .centerX, multiplier: 1.0, constant: 0.0)
Autoresizing?
Autoresizing는 superview의 크기가 커지거나 줄어들 때, Autoresizing mask를 통해 sub 크기나 위치를 조정하는 방법입니다. AutoLayout을 실현하기 위해 제공되는 하나의 방식이라고 생각하시면 될거 같습니다.
아래와 같이 UI 요소에 autoresizingMask 프로퍼티에 설정해 줄 수 있으며, 아래와 같이 설정 할 경우 superView의 크기가 커지면, subView의 width부분이 함께 늘어난다.
button.autoresizingMask = [.flexibleWidth]
translatesAutoresizingMaskIntoConstraints = false?
constraint 제약, autoresizingMask 변화에 따른 위치, 크기 조정을 통해 AutoLayout을 실현시켜줍니다. 하지만 두 가지 모두 설정되어 있는 경우 충돌이 발생 할 수 있으며, 이를 방지하기 위해 코드로 constraint를 설정 이전에 translatesAutoresizingMaskIntoConstraints = false 를 통해 autoresizingMask 방식은 사용하지 않겠다! 알려주는 것 입니다.
예제
startButton, resetButton으로 superview의 크기가 증가, 감소함에 따라 translatesAutoresizingMaskIntoConstraints 여부에 따른 constraint와 autoresizingMask 각각 적용 결과를 확인 할 수 있습니다.
주석 해제할 경우 constraint의 결과 확인 가능
주석인 경우 autoresizingMask의 결과 확인 가능
//subRectangleView.translatesAutoresizingMaskIntoConstraints = false
subRectangleView 정의 부분에서 view.autoresizingMask = [.flexibleWidth] 설정 변경 가능
lazy var subRectangleView: UIView = {
let view = UIView(frame: CGRect(origin: CGPoint(x: 50, y: 50), size: CGSize(width: 100, height: 100)))
view.backgroundColor = .lightGray
view.autoresizingMask = [.flexibleWidth]
return view
}()
참고
https://ios-development.tistory.com/672