[Xcode] landscape プレビュー

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

環境&対象

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

  • 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 があったほうが良い気がします。

Tips: Xcode13/iOS14 の組み合わせで使う landscape モード

アプリのターゲットが iOS14 でも Xcode 上のプレビューだけも landscape モードが使えると便利です。

普通に、.previewInterfaceOrientation を使うと、エラーになってしまいますが、#available を組み合わせると、アプリのターゲットが iOS 14 でも landscape プレビューを使うことができました。

PreviewWithLandscape
PreviewWithLandscape

# ちなみに、プレビューを表示するとうまく動いたり、preview がクラッシュしたりと不安定です。(landscape 表示をしなくてもクラッシュするので、Xcode 自体が不安定な気がします)

まとめ:Xcode13/iOS15 からは landscape プレビューが可能に

Xcode13/iOS15 からは landscape プレビューが可能に
  • 新しい ViewModifier "previewInterfaceOrientation(_:)" で、指定可能

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です