SwiftUIを使ってiOSアプリを開発していると、iPhoneで問題なく表示されていたレイアウトが、iPadで崩れてしまうことがあります。この記事では、iPadでも正常に表示されるようにするための基本的なアプローチを紹介します。

1. NavigationViewのスタイルを変更する

SwiftUIでは、NavigationViewはiPhoneではデフォルトで1カラム表示されますが、iPadでは2カラム（Split View）として表示されます。これが原因で、iPadで表示が崩れる場合があります。

解決策: NavigationViewのスタイルをStackNavigationViewStyleに設定し、iPadでも1カラム表示に固定します。

swiftコードをコピーするNavigationView {
    // コンテンツ
}
.navigationViewStyle(StackNavigationViewStyle())

2. ボタンやテキストのレイアウト調整

iPadでは、画面が広いため、iPhoneと同じコードではコンテンツが中央に表示されなかったり、ボタンが小さく見えることがあります。この問題を解決するために、ボタンの幅や余白を調整することが重要です。

解決策: ボタンの幅をデバイスに応じて調整するために、maxWidthやpaddingを使用します。

swiftコードをコピーするButton(action: {
    // アクション
}) {
    Text("ボタンテキスト")
        .padding()
        .frame(maxWidth: .infinity, minHeight: 50)
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
        .padding(.horizontal, 20)
}

• frame(maxWidth: .infinity, minHeight: 50)：ボタンの幅をデバイスの幅に合わせて最大限に広げます。
• padding(.horizontal, 20)：左右に適切な余白を持たせることで、ボタンが中央に表示されるようにします。

3. 画像のサイズを調整する

iPadの広い画面に対して、画像が小さく見えることがあります。この場合、画像のサイズをデバイスに応じて調整します。

解決策: frameを使って、画像の最大サイズを指定します。

swiftコードをコピーするImage("shibatop")
    .resizable()
    .scaledToFit()
    .frame(maxWidth: 400, maxHeight: 400)

これにより、画像は指定された最大幅と高さを超えないように拡大され、iPadでも適切なサイズで表示されます。

4. デバイスごとのプレビューで確認

SwiftUIのプレビュー機能を使って、iPhoneとiPadでの表示を確認します。これにより、デバイスごとの違いを事前にチェックでき、修正が必要な箇所をすぐに見つけることができます。

swiftコードをコピーするstruct ReviewView_Previews: PreviewProvider {
    static var previews: some View {
        ReviewView()
            .previewDevice("iPad (10th generation)") // iPad 10世代のプレビューを表示
        ReviewView()
            .previewDevice("iPhone 15") // iPhone 15のプレビューを表示
    }
}