【SwiftUI】画面サイズに応じて広告数を変化させる

はじめに

かなり限定的なお題ですが同じ事をする方がいると思うので記事にしておきます。

やりたい事

iPhone12	iPadPro11(縦)	iPadPro11(横)

このように画面の横幅によって横に並ぶ広告数を増やしていきたい。

条件

• 左右にpaddingが20
• HStackのspacingは5
• 広告の横幅は355以上408以下

全てのiPhoneとiPadで上記の条件をクリアしたい

実装

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geo in
            HStack(alignment: .center, spacing: 5) {
                ForEach(0..<Int(geo.size.width)/355, id: \.self) { _ in
                    SmallNativeView()
                        .frame(minWidth: 355, maxWidth: 408, maxHeight: 76)
                        .cornerRadius(10)
                }
            }
            .padding(.horizontal, 20)
            .frame(width: geo.size.width, height: geo.size.height, alignment: .center)
        }
        .background(Color.yellow)
    }
}

ポイント
GeometryReaderを使用して動的な画面サイズを取得しています。

ポイント
frame(minWidth: 355, maxWidth: 408, maxHeight: 76)
minWidthとmaxWidthを指定する事で自動でサイズ調整をしてくれます

ポイント
広告の横幅の基準は、
iPhoneの横幅から左右のpaddingの20を引いた数値を基準としています。

最大はiPhone13 Pro Maxで428
最小はiPhoneSEで375

よって、
広告1つの横幅は、最大408最小355となります。

ポイント
Int(geo.size.width)/355
画面サイズを広告の最小サイズで割る事で画面内に何個広告が表示できるかを計算しています。

おわり

広告を横に並べることはよくあると思うのでこの方法はかなり使えるのではないでしょうか。