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

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

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

https://developer.apple.com/design/human-interface-guidelines/layout#iOS-iPadOS-device-size-classes

# Size Classを使用した列挙型の検討
下記の```UserInterfaceSizeClass```を使用し、列挙型を作成します。

https://developer.apple.com/documentation/swiftui/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の列挙型を作成することを考えました。

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

**Split Viewの一例**
iPadであっても、Split Viewの大きさによって縦横ごとの**compact or height**変わってくる
![11b487b02ffaee99dc5e45616da0ff1c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/e65fc262-e2d8-811b-9abf-9eae9976d037.png)
詳しくは下記のURLで確認ください。

https://developer.apple.com/design/human-interface-guidelines/layout#iOS-iPadOS-device-size-classes

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

```Swift: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の列挙型を使用している部分のコードを抜き出して紹介します。

```Swift: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を使用しているときは変わっていることがわかりました！
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/617863a8-034b-9d1e-f678-c8d6c850db02.png width=300>　<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/99a5dc2d-8185-222a-0efd-2ab06691feb0.png width=300>




# 参考文献
https://developer.apple.com/design/human-interface-guidelines/layout#iOS-iPadOS-device-size-classes

https://developer.apple.com/documentation/swiftui/userinterfacesizeclass


https://qiita.com/y-okudera/items/47566907ae8292305483