AutoLayout

AutoLayout

Auto Layout은 뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 해당 뷰에 적용된 제약 조건에 따라 동적으로 계산한다. 예를 들어, 버튼이 이미지 view에서 수평으로 가운데에 놓이고 버튼의 위쪽 가장자리가 항상 이미지 아래쪽에서 8포인트 아래로 유지되도록 버튼을 제한할 수 있다. imageView의 크기나 위치가 변경되면 버튼의 위치가 자동으로 그에 맞게 조정된다.

 

외부 변경 사항

슈퍼뷰의 크기나 모양이 변경되면 외부 변경이 발생한다. 변경할 때마다 사용 가능한 공간을 최대한 활용하도록 view 계층 구조의 레이아웃을 업데이트해야 한다.

 

외부 변경의 몇 가지 일반적인 소스

• 사용자가 창 크기를 조정할 때(OS X).
• 사용자가 iPad(iOS)에서 Split View를 시작하거나 종료할 때
• 기기 회전할 때(iOS).
• 활성 통화 및 오디오 녹음 표시줄이 나타나거나 사라질 때(iOS).
• 다양한 크기의 클래스를 지원할 때
• 다양한 화면 크기를 지원할 때

 

이러한 변경 사항은 런타임에 발생할 수 있어 앱의 동적 응답이 필요하다. 다양한 화면 크기 지원과 같은 다른 것들은 앱이 다양한 환경에 적응하는 것을 나타낸다. 화면 크기는 일반적으로 런타임에 변경되지 않지만 적응형 인터페이스를 생성하면 iPhone 4S, iPhone 6 Plus 또는 iPad에서도 앱을 똑같이 잘 실행할 수 있다. 자동 레이아웃은 또한 iPad에서 Slide Over 및 Split View를 지원하기 위한 핵심 구성 요소이다.

 

 

내부 변경 사항

내부 변경은 사용자 인터페이스의 view 또는 control 크기가 변경될 때 발생한다.

 

내부 변경의 몇 가지 일반적인 소스

 

앱에 표시되는 콘텐츠가 변경될 때

앱의 콘텐츠가 변경되면 새 콘텐츠에 이전 콘텐츠와 다른 레이아웃이 필요할 수 있다. 이것은 일반적으로 텍스트나 이미지를 표시하는 앱에서 발생한다. 예를 들어 뉴스 앱은 개별 뉴스 기사의 크기에 따라 레이아웃을 조정해야 한다. 마찬가지로 사진 콜라주는 다양한 이미지 크기와 종횡비를 처리해야 한다.

 

앱은 국제화를 지원할

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

 

국제화는 레이아웃에 세 가지 주요 효과가 있습니다. 

 

1. 사용자 인터페이스를 다른 언어로 번역할 때 레이블에 필요한 공간이 다르다. 예를 들어 독일어는 일반적으로 영어보다 훨씬 더 많은 공간을 필요로 하고 일본어는 종종 훨씬 적게 요구한다. 

 

2. 날짜와 숫자를 나타내는 데 사용되는 형식은 언어가 변경되지 않더라도 지역마다 변경될 수 있다. 이러한 변경 사항은 일반적으로 언어 변경 사항보다 더 미묘하지만 사용자 인터페이스는 여전히 약간의 크기 변화에 적응해야 한다.

 

3. 언어를 변경하면 텍스트의 크기뿐만 아니라 레이아웃 구성에도 영향을 줄 수 있다. 다른 언어는 다른 레이아웃 방향을 사용한다. 예를 들어 영어는 왼쪽에서 오른쪽 레이아웃 방향을 사용하고 아랍어와 히브리어는 오른쪽에서 왼쪽 레이아웃 방향을 사용한다. 일반적으로 사용자 인터페이스 요소의 순서는 레이아웃 방향과 일치해야 한다. 버튼이 영어 view의 오른쪽 하단 모서리에 있는 경우 아랍어에서는 왼쪽 하단에 있어야 한다.

 

앱이 Dynamic Type을 지원할 때

마지막으로 iOS 앱이 동적 유형을 지원하는 경우 사용자는 앱에서 사용되는 글꼴 크기를 변경할 수 있다. 이것은 사용자 인터페이스에 있는 모든 텍스트 요소의 높이와 너비를 모두 변경할 수 있다. 앱이 실행되는 동안 사용자가 글꼴 크기를 변경하면 글꼴과 레이아웃이 모두 적응해야 한다.

 

 

 

Auto Layout과 Frame-Based Layout

사용자 인터페이스 레이아웃에는 세 가지 주요 접근 방식이 있다. 

 

1. 프로그래밍 방식으로 사용자 인터페이스를 레이아웃

2. 자동 크기 조정 마스크를 사용하여 외부 변경에 대한 일부 응답을 자동화

3. 자동 레이아웃 사용

 

전통적으로 앱은 view 계층 구조의 각 view에 대한 Frame을 프로그래밍 방식으로 설정하여 사용자 인터페이스를 배치했다. Frame은 슈퍼뷰의 좌표계에서 뷰의 원점, 높이 및 너비를 정의했다.

사용자 인터페이스를 배치하려면 view 계층 구조의 모든 view에 대한 크기와 위치를 계산하고 변경 사항이 발생하면 영향을 받는 모든 view에 대한 프레임을 다시 계산해야 했다.

 

view의 프레임을 프로그래밍 방식으로 정의하면 모든 변경 사항도 직접 관리해야 하기 때문에 간단한 사용자 인터페이스를 배치하려면 설계, 디버그 및 유지 관리에 상당한 노력이 필요해 진다. 더 구체적인 적응형 사용자 인터페이스를 만들면 엄청 어려워진다.

 

하지만 autoresizing masks를 사용하면 이런 문제를 해결할 수 있다. autoresizing masks는 수퍼 뷰의 프레임이 변경될 때 뷰의 프레임이 변경되는 방식을 정의한다. 이것은 외부 변화에 적응하는 레이아웃 생성을 단순화한다.

 

그러나 autoresizing masks는 레이아웃의 비교적 작은 하위 집합을 지원한다. 복잡한 사용자 인터페이스의 경우 일반적으로 고유한 프로그래밍 방식 변경으로 autoresizing masks를 보강해야 한다. 또한 autoresizing masks는 외부 변경 사항에만 적용된다.

 

autoresizing masks는 프로그래밍 방식 레이아웃의 반복적인 개선에 불과하지만 Auto Layout은 뷰의 프레임에 대해 생각하는 대신 뷰의 관계에 대해 생각한다.

 

Auto Layout은 일련의 제약 조건을 사용하여 사용자 인터페이스를 정의한다. 제약 조건은 일반적으로 두 view 간의 관계를 나타내고 이러한 제약 조건을 기반으로 각 view의 크기와 위치를 계산한다. 이렇게 하면 내부 및 외부 변경 사항에 동적으로 응답하는 레이아웃이 생성된다.

 

Auto Layout

제약 조건을 설계하는 데 사용되는 논리는 절차적 또는 객체 지향 코드를 작성하는 데 사용되는 논리와 다르다. 두 가지 기본 단계가 있습니다. 먼저 제약 조건 기반 레이아웃 논리를 이해한 다음 API를 배워야 한다.

 

 

추가로 보면 좋을 것들

 Auto Layout Without Constraints

Anatomy of a Constraint

Interface Builder에서 작업 제약 조건

프로그래밍 방식으로 제약 조건 만들기

자동 레이아웃 요리책

Debugging Auto Layout

 

 

 

참고

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html