Split Viewを考慮したSize Classを使用したiPad対応

Size Classとは

Size Classは、regularまたはcompactのいずれかの値で、regularはより大きな画面または横向きの画面を指し、compactはより小さな画面または縦向きの画面を指します。画面サイズに応じて、異なるサイズクラスの組み合わせが異なるデバイスでフルスクリーン表示に適用されます。

下記のHuman Interface GuidelinesのLayoutにAppleが提供している端末の縦向き・横向きの一覧が載っています。

Size Classを使用した列挙型の検討

下記のUserInterfaceSizeClassを使用し、列挙型を作成します。

先ほどのHuman Interface GuidelinesのLayoutを見てみると、基本的には
iPhoneの縦画面は　Compact width, regular height
iPhoneの横画面は　Compact width, compact height
大きいiPhoneの横画面は　Regular width, compact height
iPadの縦・横画面は　Regular width, regular height

※大きいiPhoneとは、iPhone 16 Pro Max、iPhone 16 Plus等々

まず最初に上記のことから下記のコードのように端末ごとのSizeClassの列挙型を作成することを考えました。

DeviceTraitStatus.swift

enum DeviceTraitStatus {
    case iPhoneHeight
    case iPhoneWidth
    case iPhoneLargeWidth
    case iPad

    init(hSizeClass: UserInterfaceSizeClass?, vSizeClass: UserInterfaceSizeClass?) {

        switch (hSizeClass, vSizeClass) {
        case (.regular, .regular):
            self =　.iPad
        case (.compact, .regular):
            self = .iPhoneHeight
        case (.regular, .compact):
            self = .iPhoneLargeWidth
        case (.compact, .compact):
            self = .iPhoneWidth
        default:
            self = .iPhoneHeight
        }
    }
}

再検討
iPadでもSplit Viewを使って分割して狭くすると、Compact width, regular heightになる場合があるので、端末ごとではなく、縦横ごとにcompact or regularかを検討する方が適切だと考え、下記の列挙型に修正しました。

Split Viewの一例
iPadであっても、Split Viewの大きさによって縦横ごとのcompact or height変わってくる

詳しくは下記のURLで確認ください。

再検討して下記のような列挙型を採用することにしました。

DeviceTraitStatus.swift

enum DeviceTraitStatus {
    case wRhR
    case wChR
    case wRhC
    case wChC

    init(hSizeClass: UserInterfaceSizeClass?, vSizeClass: UserInterfaceSizeClass?) {

        switch (hSizeClass, vSizeClass) {
        case (.regular, .regular):
            self = .wRhR
        case (.compact, .regular):
            self = .wChR
        case (.regular, .compact):
            self = .wRhC
        case (.compact, .compact):
            self = .wChC
        default:
            self = .wChR
        }
    }
}

呼び出し側使用例
使用例としてDeviceTraitStatusの列挙型を使用している部分のコードを抜き出して紹介します。

HomeView.swift

struct HomeView: View {
    @Environment(\.horizontalSizeClass) var hSizeClass
    @Environment(\.verticalSizeClass) var vSizeClass
    
    ............
    VStack {
             let deviceTraitStatus = DeviceTraitStatus(hSizeClass: hSizeClass, vSizeClass: vSizeClass)
             switch deviceTraitStatus {
                        case .wChR, .wRhC, .wChC:
                            Button(action: {
                                showCreatePostView.toggle()
                            }, label: {
                                Image(systemName: "plus")
                                    .foregroundStyle(.white)
                                    .padding(20)
                                    .background(.orange)
                                    .clipShape(RoundedRectangle(cornerRadius: 100))
                            }).frame(maxWidth: .infinity,
                                     maxHeight: .infinity,
                                     alignment: .bottomTrailing)
                        case .wRhR:
                            Button(action: {
                                showCreatePostView.toggle()
                            }, label: {
                                Image(systemName: "plus")
                                    .foregroundStyle(.white)
                                    .font(.title)//ボタンを大きくする
                                    .padding(20)
                                    .background(.orange)
                                    .clipShape(RoundedRectangle(cornerRadius: 100))
                            }).frame(maxWidth: .infinity,
                                     maxHeight: .infinity,
                                     alignment: .bottomTrailing)
                        }
                    }
                    .padding(10)
             
            }
     ............
    

iPad対応

同じiPad端末を使用していても、左の全画面の方がplussボタンは大きくなっており、右のSplit Viewのplussボタンは小さくなっています。
このことからもcompactとregularの組み合わせが、Split Viewを使用しているときは変わっていることがわかりました！
　

参考文献