[Swift] 기기에 따른 화면 오토레이아웃 구성

iOS 화면을 만드는데 있어서 화면에 따라서  구성을 다르게 해야하는 경우가 있다.

 

특히, 아이폰과 아이패드를 동시에 만들 때, 어느 걸로 사용하냐에 따라서 화면을 만드는데 고민을 해야하는 경우가 생긴다.

 

이렇게 화면 크기에 따라 뷰를 구분해서 만드는 방법을 정리해보았다.

 

1. 사이즈 클래스로 구분해서 따로 만들기

기기별로 regular/compact 사이즈라는 것이 있다. 이것에 대해서 자세한 것을 따로 작성하겠다.

 

간단히 말해서 사이즈를 제한해놓은 크기를 compact, 사이즈를 제한하지 않은 것이 regular이다. 이것은 기기의 다양화, 아이패드의 split등 화면 크기가 변화할 수 있는 가능성이 많아짐에 따라 애플에서 구분하게 되었다.

 

그래서 화면의 높이나 너비가 compact냐 regular냐에 따라서 변화하게 만드는 것이다. 대체적으로 portrait상태일때의 iPhone은 compact Width를 가지고 있다.

 

스토리보드

Xcode 14기준

다양한 곳에 있는데, 오브젝트를 선택해서 나오는 인스펙터창에서 특성들 왼쪽에 있는 +를 누르면 Add Variation 항목이 나온다. 여기서 Width/Height를 compact를 기준으로 할 것이냐 regular를 기준으로 할 것이냐 정하면 된다.

 

Xcode 13이전에는 vary for traits라고 해서 따로 생성해야 했는데, 13이후에는 각 요소마다 따로 추가할 수 있게 바뀌었다.

 

코드

    switch UITraitCollection.current.horizontalSizeClass {
    case .compact:
        print("compact")
    case .regular:
        print("regular")
    case .unspecified:
        print("unspecified")
    }

높이는 위에 horizontalSizeClass를 verticalSizeClass로 바꿔주면 된다. 그리고 분기에 맞춰 작성하면 됨

 

2. 기기로 구분해서 따로 만들기

import UIKit

extension UIDevice {
	// 아이폰 확인
    public var isiPhone: Bool {
        if UIDevice.current.userInterfaceIdiom == .phone {
            return true
        }
        return false
    }
    
    // 아이패드 확인
    public var isiPad: Bool {
        if UIDevice.current.userInterfaceIdiom == .pad {
            return true
        }
        return false
    }
    
    // 기기 종류 확인
    public var isWhat: String {
        switch UIDevice.current.userInterfaceIdiom {
        case .pad:
            print("iPad")
            return "iPad"
        case .phone:
            print("iPhone")
            return "iPhone"
        case .carPlay:
            print("Car Play")
            return "Car Play"
        case .mac:
            print("iMac")
            return "iMac"
        case .tv:
            print("TV")
            return "TV"
        default:
            print("another device")
            return "another"
        }
    }
}

UIDevice로 지금 사용되고 있는 기기를 확인해서 스토리보드든 코드든 구분하면 된다.

 

사실 둘 다 UITraitCollection을 이용하는 것이다.