[iOS] Auto Layout

Eugenie·2022년 6월 22일
0

Auto Layout

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

애플리케이션을 사용할 때 발생하는 외부 변경과
내부 변경에 동적으로 반응하는 사용자 인터페이스를 가능하게 한다.

External Changes

외부 변경은 슈퍼뷰의 크기나 모양이 변경될 때 발생한다.

각각의 변화와 함께, 사용 가능한 공간을 가장 잘 사용할 수 있도록
뷰 체계의 레이아웃을 업데이트해줘야 한다.

🔸 사용자가 아이패드의 분할 뷰를 사용하거나 사용하지 않는 경우
🔸 장치를 회전하는 경우
🔸 활성화 콜과 오디오 녹음 바가 보여지거나 사라지는 경우
🔸 다른 크기의 스크린을 지원하기 원하는 경우

대부분의 변경사항은 런타임에 발생할 수 있으며
애플리케이션으로부터 동적인 응답을 요구한다.

다른 스크린 크기를 지원하는 것은
애플리케이션이 다른 환경에 적응하는 것을 나타낸다.
스크린 크기가 일반적으로 실행 시간에 변경되지 않는다고 해도,
적응형 인터페이스를 만들면 애플리케이션이 아이폰 또는 아이패드에서도
모두 동일하게 잘 작동할 수 있다.

오토 레이아웃은 아이패드 내부 변경에서 슬라이드와 분할뷰를 지원하는 핵심 요소이다.

Internal Changes

내부 변경은 사용자 인터페이스의 뷰의 크기 또는 설정이 변경되었을 때 발생한다.

🔸 애플리케이션 변경에 의해 콘텐츠가 보여지는 경우
🔸 애플리케이션이 국제화를 지원하는 경우
🔸 애플리케이션이 동적 타입을 지원하는 경우

애플리케이션 콘텐츠가 변경되었을 때,
새로운 콘텐츠는 예전과 다른 레이아웃을 필요로 할 수 있다.

❓ Why Auto Layout

인터페이스의 절대적인 좌표가 아닌
동적으로 상대적인 좌표가 필요한 경우에 유용하다.

Pros and Cons of Auto Layout

View 와의 관계를 정의하므로, 모든 디바이스에 적용가능하다는 장점이 있고,
Frame-Based Layout 보다 속도가 느리다.

❓ Frame-Based Layout

view hierarchy 에 있는 모든 view 의 frame 을 계산해 지정한다.
레이아웃의 변화가 있을 때에는 다시 계산을 해주어야 한다.
모든 디바에스에 대응하는 코드를 작성해야 한다.
모든 상황과 레이아웃을 개발자가 관리해야 하므로, 설계와 디버그, 유지보수에 신경써야 한다.

Auto Layout Attributes

📏 Width : 정렬 사각형의 너비
📏 Height : 정렬 사각형의 높이
📏 Top : 정렬 사각형의 상단
📏 Bottom : 정렬 사각형의 하단
📏 Baseline : 텍스트의 하단
📏 Horizontal : 수평
📏 Vertical : 수직
📏 Leading : 리딩, 텍스트를 읽을 때 시작 방향
📏 Trailing : 트레일링, 텍스트를 읽을 때 끝 방향
📏 CenterX : 수평 중심
📏 CenterY : 수직 중심

Safe Area

안전 영역은 콘텐츠가 상태바, 내비게이션바, 툴바, 탭바를 가리키는 것을 방지하는 영역이다.

표준 시스템이 제공하는 뷰들은
자동으로 안전 영역 레이아웃 가이드를 준수하도록 되어있다.

🍎 cf. 안전 영역은 iOS11 부터 사용 가능, 하위 버전에도 호환 작동 (iOS11 미만 버전에서는 상/하단 레이아웃 가이드 사용)

안전 영역 레이아웃 가이드는
UIView 클래스의 var safeAreaLayoutGuide: UILayoutGuide 로 접근 가능하다.

Constraint

제약은 뷰 스스로 또는 뷰 사이의 관계를 속성을 통하여 정의하는 것을 말한다.

👉🏻 RedView 의 Leading 은 BlueView 의 trailing 의 1.0 배에 8.0 을 더한 위치

Intrinsic Content Size

고유 콘텐츠 크기는 뷰가 갖는 원래의 크기로 생각할 수 있다.

레이블의 고유 콘텐츠 크기는 텍스트의 크기이고,
이미지의 고유 콘텐츠 크기는 이미지 자체의 크기가 된다.

Constraint Priorities

우선도가 높을 수록 다른 제약보다 우선적으로 레이아웃에 적용하고
같은 속성의 다른 제약과 경합하는 경우, 우선도가 낮은 제약은 무시된다.

👍🏻 Content hugging priority

콘텐츠 고유 사이즈보다 뷰가 커지지 않도록 제한한다.
다른 제약사항보다 우선도가 높으면 뷰가 콘텐츠 사이즈보다 커지지 않는다.

👍🏻 Cotent compression resistance priority

콘텐츠 고유 사이즈보다 뷰가 작아지지 않도록 제한한다.
다른 제약사항보다 우선도가 높으면 뷰가 콘텐츠 사이즈보다 작아지지 않는다.

Layout Margin

뷰에 콘텐츠 내용을 레이아웃할 때 사용하는 기본 간격이다. ( default spacing )

🎾 레이아웃 마진 가이드 [ Layout Margins Guide ]

: 레이아웃 마진에 따라 형성되는 사각의 프레임 영역

Anchor

오토레이아웃을 코드로 구현하여 제약을 만들기 위해 Anchor 를 사용한다.

// example

button.translatesAutoresizingMaskIntoConstraints = false

var constraintX: NSLayoutConstraint
constraintX = button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)

constraintX.isActive = true
🍎 cf. translatesAutoresizingMaskIntoConstraints - 인터페이스 빌더에서 오토레이아웃을 적용하면 값 false
// MARK: - Anchor 와 관련된 프로퍼티

var constraints: [NSLayoutConstraint]
// 뷰에 부여한 제약사항들은 담은 배열

var bottomAnchor: NSLayoutYAxisAnchor { get }
// 뷰 프레임의 하단부 레이아웃 앵커

var centerXAnchor: NSLayoutXAxisAnchor { get }
// 뷰 프레임의 수평 중심부 레이아웃 앵커

var centerYAnchor: NSLayoutYAxisAnchor { get }
// 뷰 프레임의 수직 중심부 레이아웃 앵커

var heightAnchor: NSLayoutDimension { get }
// 뷰 프레임의 높이를 가리키는 레이아웃 앵커

var leadingAnchor: NSLayoutXAxisAnchor { get }
// 뷰 프레임의 리딩을 가리키는 레이아웃 앵커

var topAnchor: NSLayoutYAxisAnchor { get }
// 뷰 프레임의 상단부 레이아웃 앵커

var trailingAnchor: NSLayoutXAxisAnchor { get }
// 뷰 프레임의 트레일링을 가리키는 레이아웃 앵커

NSLayoutConstraint

매개변수설명비고
item제약조건을 받는 뷰
relatedBy제약조건을 받는 뷰 간의 관계NSLayoutRelation 열거형 값
( .lessThanOrEqual, .equal, .greaterThanOrEqual )
attribute제약조건을 받는 뷰의 제약조건의 속성NSLayoutAttribute 열거형 값
( .left, .right, .top, .bottom 등 )
toItem제약조건을 받을 뷰없을 경우 nil 가능
attribute제약조건을 받을 뷰의 제약 조건의 속성NSLayoutAttribute 열거형
( .left, .right, .top, .bottom 등 )
multiplier제약 조건을 받는 뷰의 속성값을 얻기 위해 뷰의 속성값을 곱한다.비율의 크기를 설정할 수 있고, 위치 지정에도 활용할 수 있다.
constant상수 값비율 ( muliplier ) 의 값이 아닌 상수의 값이 필요한 경우
👍🏻 제약조건을 받는 뷰 - RedView, 제약조건을 받을 뷰 - BlueView
// example

NSLayoutConstraint(item: button,
				attribute: .right,
                relatedBy: .equal,
                toItem: textField,
                attribute: .left,
                multiplier: 1.0,
                constraint: 8.0)

Visual Format Language

기호및문자열설명
|superView
-표준 간격 ( 기본 8 포인트 )
==같은 너비
-10-사이 간격 10 포인트
<=5050 보다 작거나 같다
>=5050 보다 크거나 같다
@750우선도를 지정할 수 있다.
H수평 방향 ( 가로 )
V수직 방향 ( 세로 )
👍🏻 [button]-[textField]


📚 Reference
Anatomy of a Constraint
Positioning content relative to the safe area
Visual Format Language
boostcourse - iOS 앱 프로그래밍

profile
🌱 iOS developer

0개의 댓글