DeviceKit 이용해서 기기별 레이아웃 적용

최근 프로젝트를 구상하면서 카메라 화면을 구성해보고 싶다는 생각이 들었습니다.

그런데 카메라는 비율을 보통 4:3 , 16: 9 이렇게 고정된 값으로 많이들 사용하기 때문에

아이폰 기기별 UI의 차이가 컸습니다..

 

때문에 이것을 오토레이아웃으로 구현할지, 기기별로 따로 UI를 만들지 고민하다가 이번에 기기별로 따로 대응을 해보고자 했습니다!

 

그래서 어떻게 해볼 수 있을까 고민을 하다가 좀 더 쉽게 접근을 해보고자 

DeviceKit을 사용해봤습니다!

https://github.com/devicekit/DeviceKit

GitHub - devicekit/DeviceKit: DeviceKit is a value-type replacement of UIDevice.

DeviceKit을 이용하면 쉽게 어떤 기기를 사용하고 있는지 알 수 있습니다.

 

우선 싱글톤으로 어떤 파일에서든 쉽게 접근할 수 있도록 만들어주었습니다.

(싱글톤으로 구현하는 아이디어는 이 분의 블로그를 참고했습니다!)

https://hanulyun.medium.com/swift-iphone-%ED%95%B4%EC%83%81%EB%8F%84%EB%B3%84-%EC%98%A4%ED%86%A0%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%9D%84-%ED%95%98%EB%8A%94-2%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-5ef1f3726d0d

(Swift) iPhone 해상도별 오토레이아웃을 하는 2가지 방법

import DeviceKit

public enum DeviceGrounp {
    case homeButtonDevice
    public var rawValue : [Device] {
        switch self {
        case .homeButtonDevice:
            return [.iPhone8, .iPhone8Plus, .iPhoneSE2, .iPhoneSE3]
        }
    }
}

class DeviceManager {
    static let shared : DeviceManager = DeviceManager()
    func isHomeButtonDevice() -> Bool {
        return Device.current.isOneOf(DeviceGrounp.homeButtonDevice.rawValue)
    }
}

저는 iOS 16을 기준으로 개발을 해보고 있기 때문에 iOS16에서 지원하는 홈버튼이 있는 4가지 기종만 구분하면 됐습니다. 

https://support.apple.com/ko-kr/guide/iphone/iphe3fa5df43/16.0/ios/16.0

iOS 16과 호환 가능한 iPhone 모델

(이 홈페이지에서 iOS 별 호환 모델들을 확인할 수 있습니다.)

 

이제 나머지는 간단합니다. 

    @objc func cameraButtonTapped() {
        if DeviceManager.shared.isHomeButtonDevice() {
            print("홈버튼이 있는 기종")
            let homeButtonLessVC = HomeButtonLessVC()
            homeButtonLessVC.modalTransitionStyle = .coverVertical
            homeButtonLessVC.modalPresentationStyle = .automatic
            present(homeButtonLessVC, animated: true)
        }
        else {
            print("홈 버튼이 없는 기종")
            let homeButtonVC = HomeButtonVC()
            homeButtonVC.modalTransitionStyle = .coverVertical
            homeButtonVC.modalPresentationStyle = .automatic
            present(homeButtonVC, animated: true)
        }
    }

다음과 같이 디바이스 별로 분류를 하고 해당 뷰컨을 만들어 각각의 화면을 만들어 줄 수 있습니다. 

 

모든 기기를 한번에 다 처리할 수 없다면 다음과 같이 VC를 분리해서 따로 처리해도 좋은 방법이 될 수 있을 것 같습니다!