[Xcode] landscape プレビュー

⌛️ < 1 min.

Xcode13/iOS15 で追加されるプレビューの landscape モードを説明します。

Sponsor Link

環境＆対象

以下の環境で動作確認を行なっています。

macOS Big Sur 11.4
Xcode 13 beta
iOS 15 beta

概要

Xcode13 (/iOS15)になって、プレビューの landscape モードがサポートされます。

Xcode12/iOS14 までの landscape プレビュー

これまでは、landscape でのプレビューを諦めるか、自分で画面のサイズ等を調整することが必要でした。

プレビューで以下のように、.landscape 指定できるように、コードをいくつか書いていました。


struct ConfigView_Previews: PreviewProvider {
    static var previews: some View {
        ConfigView(isPresented: .constant(true))
            .landscape()
    }
}

追加したコード


struct LandscapeModifier: ViewModifier {
    let height = UIScreen.main.bounds.width
    let width = UIScreen.main.bounds.height
    
    var isPad: Bool {
        return height >= 768
    }

    var isRegularWidth: Bool {
        return height >= 414
    }
    
    func body(content: Content) -> some View {
        content
            .previewLayout(.fixed(width: width, height: height))
            .environment(\.horizontalSizeClass, isRegularWidth ? .regular: .compact)
            .environment(\.verticalSizeClass, isPad ? .regular: .compact)
    }
}

extension View {
    public func landscape() -> some View {
        self.modifier(LandscapeModifier())
    }
}

MEMO

上記の horizontalSizeClass や verticalSizeClass は、自環境で必要なように作成したので、厳密に各種デバイスを再現したものかについては検証していません。

いずれにしても、landscape モードのあるアプリを開発する時には、扱いが面倒でした。

結局、シミュレータで表示して回転させるのが早かったりもします。

Xcode13/iOS15 以降

あたらしく、previewInterfaceOrientation(_:) という ViewModifier が追加されました。

Apple のドキュメントは、こちら。

引数には、portlait, portlaitUpsideDown, landscapeLeft, landscapeRight を指定できます。

過去のバージョンとの互換性を考えると、以下のようなコードになります。(ViewModifier も #if で切り替えられるようになりましたが、以下の例では使っていません）


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(MandaraAppModel())

        if #available(iOS 15.0, *) {
            ContentView(MandaraAppModel())
                .previewInterfaceOrientation(.landscapeLeft)
        } else {
            // Fallback on earlier versions
            ContentView(MandaraAppModel())
                .landscape()
        }
    }
}

# 個人的には、とりえる値としての faceUp や faceDown があったほうが良い気がします。