PreviewDevice - SwiftUI의 미리보기 장치를 위한 우아한 구문이 포함된 라이브러리입니다.

가장 먼저 떠오르는 질문은,

SwiftUI 미리보기를 위해 타사 라이브러리를 사용해야 하는 이유는 무엇입니까?

답변을 위해 이 질문은 미리 보기용 Apple API를 PreviewDevice 라이브러리와 비교합니다. 프로젝트의 실제 사례를 살펴보겠습니다.

사례:

기기에서 미리보기 미리보기 장치 이름으로 iPhone SE 2 Generation(4.7인치 화면 크기)에서 미리보기를 보고 싶다고 가정해 보겠습니다.

애플 방식:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)"))
            .previewDisplayName("iPhone SE (2nd generation)")
    }
}

미리보기 장치 lib:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(device: .iphoneSE_2Gen)
    }
}

표준 Apple 방식을 사용할 때 iPhone 장치 이름에서 실수하기 쉽습니다. 또한 올바른 iPhone 이름을 알고 기억해야 합니다. PreviewDevice 라이브러리는 미리 보기 장치에 대해 형식이 안전한 방법을 제공합니다. 라이브러리에는 모든 장치 유형(모든 iphone, 모든 ipad, 모든 apple watch, ipod, mac)이 포함된 열거형Device이 있습니다.

결과:

사례:

일부 장치에서 미리보기를 만드십시오. 예를 들면:

아이폰8

아이폰 8 플러스

아이폰12 프로

아이폰 12

애플 방식:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 8"))
                .previewDisplayName("iPhone 8")

            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 8 Plus"))
                .previewDisplayName("iPhone 8 Plus")

            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro"))
                .previewDisplayName("iPhone 12 Pro")

            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
        }
    }
}

미리보기 장치 lib:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevices(devices: [.iphone8, .iphone8Plus, .iphone12Pro, .iphone12])
    }
}

라이브러리 어메이징이 이 사건을 관리했습니다! 단일 회선 솔루션 💪

결과:

사례:

조명 및 야간 모드를 위해 장치에서 미리보기를 만드십시오.

애플 방식:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
                .preferredColorScheme(.light)

            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
                .preferredColorScheme(.dark)
        }
    }
}

미리보기 장치 lib:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(device: .iphone12, colorSchemes: [.light, .dark])
    }
}

라이브러리의 단일 회선 솔루션 💪 💪

결과:

사례:

다양한 인터페이스 방향(세로, 가로 왼쪽, 가로 오른쪽)으로 장치에서 미리보기를 만듭니다.

애플 방식:

@available(iOS 15.0, *)
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
                .previewInterfaceOrientation(.portrait)

            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
                .previewInterfaceOrientation(.landscapeLeft)

            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
                .previewInterfaceOrientation(.landscapeRight)
        }
    }
}

미리보기 장치 lib:

@available(iOS 15.0, *)
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(device: .iphone12, orientations: [.portrait, .landscapeLeft, .landscapeRight])

    }
}

결과:


한 줄 코드 💪 💪 💪

설치 라이브러리

Requearements Xcode13

코코아팟

Podfile에서 다음 줄을 지정합니다.

pod PreviewDevice

스위프트 패키지 관리자

Xcode, File -> Swift Packages -> Add Packages..를 열고 라이브러리 git url을 붙여넣습니다.

https://github.com/Toni77777/PreviewDevice.git

요약

PreviewDevice는 SwiftUI의 미리보기 장치를 위한 유형 안전 구문 설탕입니다.

미리보기에 대한 멋진 아이디어가 있습니까? contribute에 오신 것을 환영합니다!
읽어 주셔서 감사합니다! 곧 봐요. 👋