iPhone Application 적응형 UI

  1.  애플리케이션 작성 시에 기기의 종류마다 특화된 레이아웃이 반영이 되는데 이에 맞추어서 자동 적용될 수 있는 레이아웃 작성이 필요하다. 이를 적응형(Adaptive) UI 라고 한다.
    1. 사이즈 클래스 : 기기마다 가로/세로 방향 시에 대해서 적용되는 레이아웃으로 Regular와 Compact가 있으며 아래 그림은 이를 나타낸 것이다.

    2. Regular는 채워진 형태를 의미하고, Compact는 일부만 채워진 형태를 의미한다.
    3. 표현법 : w(가로), h(세로), C(Compact), R(Regular)
    4. 아이폰의 사이즈 클래스는 아래와 같다.

    5. 아이패드의 사이즈 클래스는 아래와 같다.
  2. Any 사이즈
    1. Compact, Regular 가 모두 적용된 상태이다.
    2. 표현법 : wAny hAny
    3. 모든 기기와 모든 방향이 반영된다.
  3. Storyboard에서 작성
    1. 뷰에 사이즈 클래스를 적용하는 방법은 씬 UI 요소 Installed에서 표시하며 조건이 맞지 않으면, 씬에 나타나지 않는다.
    2. 설정 방법은 아래와 같다. (+ 버튼을 눌러서 추가, 기본은 Any-Any 설정)

  4. 코드에서 작성
    1. 코드에서 작성 시에는 Traits 클래스를 통해서 기기에 대한 정보를 얻을 수 있으며 이를 활용하여 기기마다 가로, 세로 방향 사이즈 클래스를 반영한다.
    2. Traits 모음 클래스 : UITraitCollection
    3. Traits 정보를 가진 클래스 : UITraitEnviroment
    4. Traits 정보 얻는 방법은 아래와 같다.
      Traits 정보를 얻는 방법

      // UIView 에서 얻는 방법

      // 가로 사이즈 클래스

      self.traitCollection.horizontalSizeClass

      // 세로 사이즈 클래스

      self.traitCollection.vericalSizeClass

    5. Traits 변경 정보 얻는 메소드 : func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?)
    6. 코드로 제약조건 활성화/비활성화
      1. 활성화하는 메소드 : class func activate(_ constraints: [NSLayoutConstraint])
      2. 비활성화하는 메소드 : class func deactivate(_ constraints: [NSLayoutConstraint])
      3. Traits와 제약조건 사용하는 예제코드는 아래와 같다.
        Traits와 제약조건 사용하는 예제코드

        var verticalConstraints : [NSLayoutConstraint]!

        var horizontalConstratins : [NSLayoutConstraint]!

        override func viewDidLoad() {
        verticalConstraints = [ NSLayoutConstraint        (...), NSLayoutConstraint(...) ] horizontalConstratins = [ NSLayoutConstraint(...), NSLayoutConstraint(...) ] // 가로 상태

        self.view.addConstraints(verticalConstraints)

        self.view.addConstraints(horizontalConstratins) 

        }

        override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { switch (self.traitCollection.horizontalSizeClass, self.traitCollection.verticalSizeClass) { case (.compact, .regular): // wC hR

        NSLayoutConstraint.deactivate(horizontalConstratins)

        NSLayoutConstraint.activate(verticalConstraints)
        case (.compact, .compact), (.regular, .compact): 

        // wR hC

        NSLayoutConstraint.activate(horizontalConstratins) NSLayoutConstraint.deactivate(verticalConstraints)

        }