【Swift UI】ignoresSafeAreaの使い方!セーフエリア外に色をつける方法
この記事からわかること
- Swift UIのignoresSafeAreaの使い方
- セーフエリアとは?
- セーフエリア外までビューを拡張する方法
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
posted withアプリーチ
iOSデバイスのセーフエリアまでビューを拡張させる方法をまとめていきます。
セーフエリアとは?
セーフエリアとはiOSデバイス画面の中でもナビゲーションバーやツールバーなどが表示されない領域のことです。セーフエリアにはアプリのビュー部分が表示され、ナビゲーションバーなどで隠されることがないのでコンテンツを描画する上で安全な領域ということになります。
また画面の両端にはマージン幅が確保されており、上部と下部は基本的には何も表示されないフリーのエリアになります。
Swift UIでは基本的にビューはセーフエリア内に描画されます。なので以下のようなビューの場合、上部と下部には反映されず隙間が生まれてしまいます。
struct ContentView: View {
var body: some View {
Rectangle().fill(.cyan)
}
}
この隙間を防ぐにはignoresSafeArea
を使用します。
ignoresSafeArea
ignoresSafeArea
とはビューがセーフエリアを無視して広がるようにできるモディファイアの1つです。
struct ContentView: View {
var body: some View {
Rectangle().fill(.cyan).ignoresSafeArea()
}
}
使用する際はビューに対して呼び出して使用します。これでビューがセーフエリアを無視して画面いっぱいまで広がり、上部と下部にも色が反映されるようになりました。
部分ごとに指定する
定義を見てみるとセーフエリアを無視する箇所を指定できるようになっています。
func ignoresSafeArea(
_ regions: SafeAreaRegions = .all,
edges: Edge.Set = .all
) -> some View
指定できる値は以下の通りです。
@frozen struct Set {
static let top: Edge.Set
static let bottom: Edge.Set
static let leading: Edge.Set
static let trailing: Edge.Set
static let horizontal: Edge.Set
static let vertical: Edge.Set
}
例えば下部のみセーフエリアを無視してビューを拡張する場合は以下の通りです。
struct ContentView: View {
var body: some View {
Rectangle().fill(.cyan).ignoresSafeArea(edges: [.bottom])
}
}
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
私がSwift UI学習に使用した参考書
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。