Swift・SwiftUI

【SwiftUI】セーフエリアまで表示領域を広げる方法

セーフエリアまで表示領域を広げる方法

通常、画面いっぱいに矩形で背景設定するとこんな感じになります。

ZStack {
    Rectangle().foregroundColor(Color.yellow)
    Text("ContentView").padding()
        .background(Color.yellow)
}

アプリの起動画面などの、ユーザーインプレッションを重視したい画面では、上下の余白まで表示領域を広げたい場合もあると思います。

その場合は edgesIgnoringSafeArea プロパティを設定します。

ZStack {
    Rectangle().foregroundColor(Color.yellow)
    Text("ContentView").padding()
        .background(Color.yellow)
}
.edgesIgnoringSafeArea(.all)

.edgesIgnoringSafeArea(.all) で上下余白（セーフエリア）まで塗りつぶすことができます。

.edgesIgnoringSafeArea(.top) で上側だけ、

.edgesIgnoringSafeArea(.bottom) で下側だけ広げるということもできます。

.bottom の場合

ちなみに、.leading、.trailing という指定方法もありますが、これは端末を横向きにした場合の指定になります。

例えば、.edgesIgnoringSafeArea(.leading) として横向きにすると以下のようになります。

.leading の場合

あまり、このような使い方をすることは稀かと思いますが一応こういったこともできます。

縦横両方に対応しておきたい場合は大人しく .all としておけばよいでしょう。

最後に、Rectangle に限らず、画像（Image）なども同様のことができます。

Image("background")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .edgesIgnoringSafeArea(.all)

以上