iOS ) Autolayout3 - Adaptive Layout, Size Class

Adaptive Layout

iOS는 다양한 종류의 기기가 있고, 사용자는 세로 화면, 가로 화면, 아이패드의 스릿 뷰, 멀티태스킹 등을 통해 앱을 사용할 수 있습니다. 그런 다양한 화면에 대응할 수 있는 Adaptive Layout 대해서 알아보도록 해요.

1. Size class
2. Trait collection

Adaptive Layout에서 알아야할 핵심적인 두가지의 개념입니다.

Size Class

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

• Regular Class - interface의 너비 혹은 높이가 비교적 크다
• Compact Class - interface의 너비 혹은 높이가 비교적 작다

글로만 봐서는 이해가 잘 안될텐데 아래 그림을 함께 보도록 해요.

Regular, Compact

위와 같이 화면 크기에 따라, 가로, 세로방향에 따라 Size class를 조합해서 표현할 수 있습니다.

 

 

Human Interface Guidelines 에서 캡쳐해온 이미지인데요! 살펴보면 기기별로 어떻게 Size Class를 활용해서 표현할 수 있는지 확인할 수 있습니다.

제가 쓰는 iPhone Xs는 세로방향(Portrait orientation)에선 wC hR 즉 가로는 Compact class, 세로는 Regular class이고 가로방향(Landscape orientation)에선 wC hC 가로, 세로 모두 Compact class로 표현되네요.

 

 

 

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

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

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

 

iOS는 콘텐츠 영역의 Size Class에 따라 동적으로 레이아웃을 조정합니다. 기본 레이아웃을 먼저 빌드한 후에 각 size class에 따라서 디자인을 조절할 수 있습니다.

 

스토리보드에서 라벨을 하나 추가한 후 Attributes Inspector를 보면 저렇게 +버튼이 있는게 보이죠?! 저렇게 Width, Height에 사이즈를 지정해서 Add Variation 버튼을 눌러주면 다양한 인터페이스 환경에 대한 디자인을 추가할 수 있습니다.

 

 

UITraitCollection

UITraitCollection은 가로 및 세로의 size class, display scale 등과 같은 특성을 포함하는 앱의 iOS 인터페이스 환경을 말합니다.

 

UIScreen, UIWindow, UIViewController, UIPresentationController, 그리고 UIView는 UITraitEnvironment 프로토콜을 따르는 데 이 프로토콜은 Required인 traitCollection프로퍼티를 가지고 있습니다.

 

따라서 우리가 보통 사용하는 뷰와, 뷰컨트롤러는 traitCollection 프로퍼티를 디폴트로 가지고 있습니다.

 

• horizontal Size Class
• vertical Size Class
• displayScale
• userInterfaceIdiom

traitCollection 프로퍼티에서 위와 같은 특정 특성값에 접근할 수 있습니다. 특성값은 UIUserInterfaceIdiom 과 UIUserInterfaceSizeClass 열거형에 정의되어 있습니다.

 

 

iOS 인터페이스 환경이 변경될 때 traitCollectionDidChange(_:) 메서드를 재정의해서 변경사항에 대한 응답을 할 수 있습니다.

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)


    if (self.traitCollection.verticalSizeClass != previousTraitCollection?.verticalSizeClass || self.traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass) {
        print("Device traitCollection이 변경됨")
    }

    switch traitCollection.horizontalSizeClass {
    case .compact:
          print("가로가 compact인 경우!")
    case .regular:
        print("가로가 regular인 경우!")
    case .unspecified:
        break
    }

    switch traitCollection.verticalSizeClass {
    case .compact:
          print("세로가 compact인 경우!")
    case .regular:
        print("세로가 regular인 경우!")
    case .unspecified:
        break
    }

}

위와 같이 traitCollectionDidChange(_:) 메소드와 traitCollection 프로퍼티를 사용해서 다양한 인터페이스 환경에서 UI를 재구성할 수 있습니다.

 

 

 

 

1. Frame-based layout
   • Auto resizing Mask
2. Auto Layout
3. Adaptive Layout
   • Auto Layout
   • Size Class
   • Trait Collection
   • Universal Storyboard

 

이렇게 세 포스팅으로 나눠서 오토레이아웃을 설명해봤습니다.

 

정리하자면!!

태초에 Frame(위치, 크기)를 지정하는 레이아웃방식이 있었고, 현재에는 Auto resizing Mask로 빠르게 프로토타입을 만들 때 사용하고 있습니다.

두번째로는 뷰들간의 관계에 제약을 추가하는 Auto Layout을 알아봤고

세번째로 Size Class로 표현되는 다양한 인터페이스 환경에 대응할 수 있는 Adaptive Layout에 대해 알아봤습니다.

 

도움이 됐다면 공감을 눌러주세요...Ღ

 

2021.10.02 - [IOS] - AutoLayout1 - Frame-based Layout Autoresizing Mask

AutoLayout1 - Frame-based Layout Autoresizing Mask

2021.10.04 - [IOS] - AutoLayout2 - Content Hugging, Compression Resistance

AutoLayout2 - Content Hugging, Compression Resistance

 

 

출처

• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
• https://developer.apple.com/documentation/uikit/uitraitcollection
• https://www.raywenderlich.com/1343912-adaptive-layout-tutorial-in-ios-12-getting-started
• https://medium.com/@Alpaca_iOSStudy/uitraitcollection-공부-c85f2a9901ef
• https://velog.io/@minni/Size-class