[TIL] 220122 - Auto Layout 기본적인 내용

오토레이아웃

뷰의 제약사항(Constraint)을 바탕으로 뷰 체계 내의 모든 뷰의 크기와 위치 동적으로 계산한다.

외부변경과 내부변경에 대하여 동적으로 반응하는 인터페이스를 가능하게 한다.

외부 변경

슈퍼뷰의 크기나 모양이 변경될 때 발생하는 것. 예를 들어서, 분할 뷰(split view), 화면 회전, 다른 크기의 스크린 지원하는 경우 등이 있다.

내부 변경

사용자 인터페이스의 뷰의 크기 또는 설정이 변경될 때 발생하는 것. 예를 들어서 애플리케이션 변경에 의해 컨텐츠가 보여지는 경우나 애플리케이션이 동적 타입을 지원하는 경우 등이 있겠다.

오토레이아웃이 필요한 이유❓

여러가지 경우가 있겠지만 가장 쉬운 경우는 같은 애플리케이션이 다른 크기의 화면을 가지는 기기에서 모두 유사하게 실행 되고자 할 때 필요하다. 이를 포함하여 화면 또는 뷰, 인터페이스 등에 변화(회전이 쉬운 예시)가 있을 때 필요하다.

안전 영역(Safe area)

컨텐츠가 상태바, 내비게이션 바, 툴바, 탭바 등을 가리는 것을 방지하는 영역.

표준 시스템이 제공하는 뷰들은 모두 안전영역을 준수하게 되어있다.

제약사항(anchor를 이용하여 정렬)

여러 제약사항을 만들고, 이 제약사항들의 isActive프로퍼티를 true, false를 통해 적용하거나 해제한다.

여기서 제약사항은 NSLayoutConstraints 타입으로 만들어준다.

@IBOutlet weak var button: UIButton!
...
override func viewDidLoad() {
	super.viewDidLoad()
	...
	button.translatesAutoresizingMaskIntoConstraints = false
	...
	var constraintX: NSLayoutConstraints
	constraintX = button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
	...
	constraintX.isActive = true // 제약사항 적용!
}

코드로 만들어주지 않고, 인터페이스 빌더로 직접 제약사항을 만들어줘서 활성화 시킬 수도 있다.

위에서 사용 한 translatesAutoresizingMaskIntoConstraints의 경우에는 오토레이아웃이 도입되기 전 뷰를 유연하게 표현할 수 있도록 AutoresizingMask를 사용했다고 하는데, 코드로 constrains를 넣어줄 때는 이 AutoresizingMask와 충돌을 일으킬 수 있기 때문에 애초에 AutoresizingMaskIntoConstraint의 값을 false로 지정한 다음 오토레이아웃을 지정해 준다.

다만, 인터페이스 빌더에서 제약사항(constraints)을 추가할 때는 자동으로 false로 설정된다고 한다.

 

🍎 같은 제약사항을 추가하더라도 코드로 하는 방법과 인터페이스 빌더를 통해 하는 방법을 모두 알면 좋을 것 같다!