• 2022/9/13
• 3分

【Swift UI】ignoresSafeAreaの使い方！セーフエリア外に色をつける方法

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

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学習に使用した参考書

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。