[iOS] 오토레이아웃 (Auto Layout) 을 알아보자!

 

부스트코스 iOS 앱 프로그래밍을 듣고 있던 도중, 개념이나 이론에 관하여 공부한 것을 정리하기 위해 글을 씁니다!

⚠️ 공식문서를 읽고 제가 해석(Google translate), 의역한 정보도 포함되어 있으니, 잘못된 정보는 댓글로 알려주시기 바랍니다 😄

 

오토레이아웃이 뭔데?

 오토레이아웃은 뷰의 제약사항(Constraints)를 바탕으로 뷰 계층 내의 모든 뷰의 크기와 위치를 동적으로 계산하여 지정합니다.

Apple Developer Document - Auto Layout Guide

 

Auto Layout Guide: Understanding Auto Layout

왜 필요할까?

 그렇다면 오토 레이아웃은 왜 필요할까요? 예를 들어 봅시다, 휴대폰으로 유튜브에 있는 영상을 보다가, 조금 더 크게 보고싶어서 가로로 휴대폰을 돌렸습니다. 가로모드로 아이폰을 돌렸는데, 영상이 짤려서 보인다거나, 가로비율로 화면이 바뀌지 않았다거나, 텍스트가 가려져서 보이지 않는 일이 발생합니다. 이는 오토레이아웃을 적용하지 않았기 때문입니다. 오토레이아웃이 없다면 앱 사용시 발생하는 외부 변경(External Changes) 이나 내부 변경 (Internal Changes) 에서 동적으로 반응하지 못하여, 사용자 인터페이스를 제공하지 못하게 될 수도 있습니다. 그렇다면 외부 변경과, 내부 변경에 대해 알아봅시다.

 

외부 변경(External Changes)

 슈퍼뷰의 크기나 모양이 변경될 때 발생합니다. -> 변경이 일어날 때마다 사용 가능한 공간을 최대한 사용할 수 있도록 뷰 계층의 레이아웃을 업데이트 해주어야 합니다.

 

예시

• iPad에서 Split View를 사용하거나, Split View 사용을 종료할 때
• 가로모드(landscape mode) / 세로모드 (기기의 회전)
• 활성화 콜 (Active call) 및 오디오 녹음 바가 나타나거나 사라지는 경우
• 다른 크기의 클래스를 지원하길 원하는 경우
• 다른 크기의 스크린을 지원하길 원하는 경우

 위와 같은 변경사항들은 앱이 실행중에 발생할 수 있으며, 앱으로부터 동적인 응답을 요구합니다. 화면 크기는 보통 앱이 실행중에 바뀌지 않지만, 적응형 인터페이스를 만들면 다양한 디바이스에서 앱을 동일하게 실행할 수 있습니다. 또한 오토레이아웃은 iPad의 Split View와 Slide Over를 지원하는 핵심 요소입니다.

 

Split View, Slide Over [출처 - 애플 공식 홈페이지]

 

 

내부 변경 (Internal Chnages)

사용자 인터페이스의 View의 크기 또는 설정이 변경되었을 때 발생합니다.

 

예시

• 애플리케이션에서 표시(display)하는 컨텐츠가 변경되었을 경우 
• 애플리케이션이 국제화(Internationalization)를 지원하는 경우
• 애플리케이션이 동적 타입(Dynamic Type)을 지원하는 경우

 애플리케이션 컨텐츠가 변경되었을 때, 새로운 컨텐츠는 이전과 다른 레이아웃을 요구할 수도 있습니다. 이는 보통 앱에서 text나 이미지를 나타낼 때 발생합니다. 예를 들어, 뉴스 앱은 뉴스 기사 각각의 사이즈에 따라 레이아웃을 조정할 필요가 있습니다. 마찬가지로, 포토 콜라주(photo collage)는 다양한 이미지의 크기와 종횡비를 다뤄야만 합니다.

 

국제화 - Internationalization - 는 앱이 다양한 언어, 지역, 문화에 적응할 수 있도록 하는 과정이다. 국제화된 앱의 레이아웃은 이러한 차이점들을 고려해야 하며, 앱이 지원하는 모든 언어 및 지역에서 올바르게 표시되어야 한다.

 

예를 들어, 영어나 한국어는 표기 순서가 왼쪽 -> 오른쪽 이라면, 아랍문자는 오른쪽 -> 왼쪽으로 표기합니다. 이러한 점도 국제화를 거쳐 앱이 언어, 지역, 문화에 적응할 수 있도록 하지 않을까 하는 생각입니다......

 

Auto Layout의 속성

 

정렬 사각형을 기반으로 하고, 각각의 속성은 아래와 같습니다.

• Width: 정렬 사각형의 넓이
• Height: 정렬 사각형의 높이
• Top: 정렬 사각형의 상단
• Bottom: 정렬 사각형의 하단
• Baseline: 텍스트의 하단
• Horizental: 수평
• Vertical: 수직
• Leading: 리딩, 텍스트를 읽을 때 시작하는 방향
• Trailing: 트레일링, 텍스트를 읽을 때 끝 방향
• Center X: 수평 중심 (x축에서 가운데)
• Center Y: 수직 중심 (y축에서 가운데

Safe Area (안전 영역)

 Safe Area는 컨텐츠가 상태바, 네비게이션 바, 툴바, 탭바를 가리는 것을 방지하는 영역입니다. 즉, bar들과 다른 운영 체제 기반 컨텐츠로 가려지지 않은 화면을 나타냅니다. 이는 iOS에 의해 미리 정의되어 있습니다. 표준 시스템이 제공하는 뷰들은 자동으로 safe area layout guide를 준수하도록 되어있습니다. 

 

 

 Safe Area는 iOS 11 부터 사용 가능하며, 기존의 Top/Bottom Layout Guide를 대체합니다. 아이폰에 노치가 생기면서부터, 노치에 View가 가려지는 것 때문에, Top, Bottom, Leading, Trailing 모두 시스템 마진을 가져야 했기에 safe area가 등장하게 되었습니다.

 Safe Area Layout Guide는 UIView 클래스의 var safeAreaLayoutGuide : UILayoutGuide로 접근 가능합니다.

 

Constraints (제약사항)

Constraints는 뷰 스스로 혹은 뷰 사이의 관계를 속성을 통해 정의하는 것입니다. constaints는 방정식으로 나타냅니다. 아래는 그 예시입니다.

 

 

• Item1: 방정식에 있는 첫 번째 아이템(B View) 입니다. 첫번째 아이템은 반드시 View 또는 Layout Guide 이어야 합니다.
• Attribute1: Item1에 대한 속성, 이 경우 B View의 leading 입니다.
• Multiiplier: Attribute2에 곱해지는 값, 이 경우 1.0
• Item2: 방정식에 있는 두번째 아이템(A View)
• Attribute2: Item2의 속성, 이 경우 A View의 trailing
• Constant: Item2의 Attribute에 더해지는 constant 값

위 방정식을 해석하면, "B View의 리딩은, A View의 트레일링의 1.0배에 8.0 을 더한 위치이다" 정도가 되겠네요 😁

 

Intrinsic Content Size (고유 컨텐츠 크기)

 뷰의 고유 컨텐츠 크기는 뷰가 갖는 원래의 크기입니다. 예를 들어 레이블의 고유 컨텐츠 크기는 레이블의 텍스트의 크기이고, 이미지의 고유 컨텐츠 크기는, 이미지 자체의 크기입니다.

 

Constraints Priorities (제약 우선도)

 Auto Layout은 View의 Intrinsic Content Size를 각 크기에 대한 한 쌍의 constraint를 사용하여 나타냅니다. 우선도가 높을수록 다른 constraints보다 우선적으로 layout에 적용하며, 같은 속성의 다른 constraint와 경합하는 경우, priority가 낮은 constraint는 무시됩니다.

 

 

1. Content Hugging Priority : Intrinsic Content Size 보다 View가 커지지 않도록 제한합니다. 다른 Constraints보다 Priority가 높으면 View가 Content Size 보다 커지지 않습니다.
2. Content Compression Priority : Intrinsic Content Size보다 View가 작아지지 않도록 제한합니다. 다른 Constraints보다 Priority가 높으면 View가 Content Size 보다 작아지지 않습니다.

Layout Margin

 뷰 안에서 컨텐츠를 레이아웃 할 때 사용하는 기본 간격 (default space) 입니다. 

[출처 - Apple Developer Document]

 

오토레이아웃을 구현하는 방법

 오토레이아웃을 구현하는 방법은 크게 보면 코드 / 인터페이스 빌더 로 나뉩니다. 코드로 구현할때는, layout anchor 사용, NSLayoutConstraint 인스턴스 생성, Visual Format Language을 사용하는 방법들이 있습니다. -> 예시

 

오토레이아웃에 대해 간단히 알아보았습니다. 부족한 부분, 추후에 더 알게되는 내용이 있다면 업데이트 하도록 할게요 😉

지적과 댓글은 감사합니다 😆

Reference

iOS) Auto Layout 정복하기 (2/5) - Safe Area란?

iOS Safe Area

Understanding ‘superview’ and ‘safe area’ to make you a better designer?