Skip to content

UIkit의 Adaptive Layout을 설명하시오 #91

@kmh5038

Description

@kmh5038

1. Adaptive Layout

Adaptive Layout은 iOS의 다양한 종류의 기기가 있고, 사용자는 세로화면, 가로화면, 아이패드의 스플릿 뷰, 멀티태스킹 등을 통해 앱을 사용할 수 있는데, 이런 다양한 화면에 대응할 수 있게 목표를 하는 개념입니다.

주요 요소로는 Auto Layout , Size Classes , Trait Collection 이 있습니다.


2. Size Classes

Size Classes는 iOS 기기를 사용해 나타낼 수 있는 다양한 화면 영역을 분류하고 인터페이스의 너비,높이를 Compact class , Regular class 두가지로 나누어 표현합니다.

title

  • Regular class : 인터페이스의 너비 혹은 높이가 비교적 크다.
  • Compact class : 인터페이스의 너비 혹은 높이가 비교적 작다.

title

horizontalSizeClass와 verticalSizeClass는 아래 나올 traitCollection인데 각각 가로, 세로를 의미합니다.

  • Regular width, regular height
  • Regular width, compact height
  • Compact width, regular height
  • Compact width, compact height

따라서 가로, 세로에서 R, C 두가지씩 해서 위와 같이 네가지의 조합을 만들 수 있습니다.

title

Human Interface Guidelines 에서 각 기기별 Size class를 확인할 수 있습니다.


3. TraitCollection

3-1. 정의

Trait Collection은 다양한 기기와 화면 크기에서 UI를 조정하는데 사용됩니다.
UIScreen, UIWindow, UIViewController, UIPresentationController, UIView는 UITraitEnvironment 프로토콜을 따르는데 이 프로토콜의 Required인 traitCollection 프로퍼티를 가지고 있습니다. 그래서 우리가 보통 사용하는 뷰와 뷰컨트롤는 traitCollection 프로퍼티를 디폴트로 가지고 있습니다.

title
title

title

이런 Trait Collection은의 주요 요소로는
1. Horizontal Size Class: 수평 크기 클래스
2. Vertical Size Class: 수직 크기 클래스
3. User Interface Idiom: 사용자 인터페이스 형태
4. Display Scale: 디스플레이 배율
5. User Interface Style: 사용자 인터페이스 스타일 (라이트 모드, 다크 모드)
등 의 특정 특성값에 접근할 수 있습니다.


3-2. 사용 예제

  • Trait Collection 조회

title

위 코드 예시처럼 현재 뷰 컨트롤러의 Trait Collection을 조회해 볼 수 있습니다.


  • Trait Collection 변경 감지

title

위에서 설명 드린 UITraitEnviroment 프로토콜의 traitCollectionDidChange 메서드를 사용하여 뷰 컨트롤러의 Trait Collection이 변경될 때 UI를 업데이트할 수 있습니다.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions