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

この記事からわかること

  • Swift UIignoresSafeArea使い方
  • セーフエリアとは?
  • セーフエリア外までビュー拡張する方法

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

iOSデバイスのセーフエリアまでビューを拡張させる方法をまとめていきます。

セーフエリアとは?

セーフエリアとはiOSデバイス画面の中でもナビゲーションバーやツールバーなどが表示されない領域のことです。セーフエリアにはアプリのビュー部分が表示され、ナビゲーションバーなどで隠されることがないのでコンテンツを描画する上で安全な領域ということになります。

また画面の両端にはマージン幅が確保されており、上部と下部は基本的には何も表示されないフリーのエリアになります。

Swift UIでは基本的にビューはセーフエリア内に描画されます。なので以下のようなビューの場合、上部と下部には反映されず隙間が生まれてしまいます

struct ContentView: View {
    var body: some View {
        Rectangle().fill(.cyan)
    }
}
Swift UIでセーフエリアのみに広がるビュー

この隙間を防ぐにはignoresSafeAreaを使用します。

ignoresSafeArea

ignoresSafeAreaとはビューがセーフエリアを無視して広がるようにできるモディファイアの1つです。

struct ContentView: View {
    var body: some View {
        Rectangle().fill(.cyan).ignoresSafeArea()
    }
}

使用する際はビューに対して呼び出して使用します。これでビューがセーフエリアを無視して画面いっぱいまで広がり、上部と下部にも色が反映されるようになりました。

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

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index