[SwiftUI] 縦横に柔軟に配置するレイアウトを作る

⌛️ 2 min.

SwiftUI の VStack, HStack を柔軟に適用するレイアウトの作り方を説明します。

Sponsor Link

環境＆対象

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

macOS Big Sur 11.3
Xcode 12.5
iOS 14.5

作りたいレイアウト

iOS のデバイスは長方形なので、スクリーンは、Portrait 状態では縦に長く、Landscape 状態では、横に長くなります。

そこで、Portlait 状態では、縦にレイアウト(VStack) し、Landscape 状態であれば、横にレイアウト(HStack) してくれるレイアウトが欲しくなります。

そのようなレイアウトを実現する方法を説明します。

デバイスの向きに合わせて以下のようにレイアウトを変更します。

UIDecive.current.orientation

レイアウトを変更するためには、その時点でのデバイスの向きがわからないと変更することができません。

iOS/iPadOS では、UIDevice.current.orientation を参照することで、デバイスの向き情報を取得することができます。

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

この orientation は、UIDeviceOrientation として enum 定義されていて以下の７つの値をとり得ます。

unknown
portrait
portraitUpsideDown
landscapeLeft
landscapeRight
faceUp
faceDown

その名前からどういう状態を意味しているかは、自明ですね。

便利な関数も用意されています。

isPortrait: Bool
isLandscape: Bool
isFlat: Bool
isValidInterfaceOrientation: Bool

これもほぼ自明ですね。isValidInterfaceOrientation は、Portrait のいずれかの状態もしくは、Landscape のいずれかの状態だと true が返るプロパティです。

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

デバイスの向きが変更された時の検知

次に、UIDevice.current.orientation をチェックするタイミングを考えます。

デバイスの向きが変更された時に通知される notification があります。

orientationDidChangeNotification です。

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

この Notification は、NotificationCenter から通知されます。

Notification を publisher 経由で受ける

せっかくなので、Combine を使って、Notification を受け取るようにします。

NotificationCenter に、新しく追加された publisher メソッドを使うことで、SwiftUI で onReceive で受け取ることができるようになります。

NotificationCenter の publisher メソッドについての Apple のドキュメントは、こちら。

onReceive を使うと、以下のようになります。


Text("Hello, World!")
    .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
        // orientation is changed !
    }

これらを組み合わせることで、デバイスの向きが変わった時に、任意のコードを実行できるようになります。

OrientationAdaptiveStack

レイアウトを行うだけのビューを作っておくと、再利用しやすくて便利です。

orientation に応じて、受けとったビューを VStack を使って縦にレイアウトしたり、HStack を使って横にレイアウトするようにします。

以下のようなビューになります。


// (1)
struct OrientationAdaptiveStack<Content1: View, Content2: View> : View {
    // (2)
    var firstContent: Content1
    // (3)
    var secondContent: Content2
    // (4)
    @State var orientation: UIDeviceOrientation
    
    // (5)
    init(@ViewBuilder first: () -> Content1, @ViewBuilder second: () -> Content2 ) {
        self.firstContent = first()
        self.secondContent = second()
        self._orientation = State(wrappedValue: UIDevice.current.orientation)
    }

    var body: some View {
        // (6)
        ZStack {
            if orientation == .landscapeRight || orientation == .landscapeLeft {
                // (7)
                HStack {
                    firstContent
                    secondContent
                }
            } else {
                // (8)
                VStack {
                    firstContent
                    secondContent
                }
            }
        }
        // (9)
        .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
            orientation = UIDevice.current.orientation
        }
    }
}

コード解説