【SwiftUI】Viewをセーフエリア外に拡張する(ignoresSafeArea)

(2022/03/27 更新)

Viewをセーフエリア外に拡張する .ignoresSafeArea() モディファイアについて解説します。
iOS14から使えるようになったモディファイアで、以前からあった .edgesIgnoringSafeArea() は deprecated(非推奨)となっています。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】13.3
【Swift】5.6
【iOS】15.4
【macOS】Monterey バージョン 12.3
スポンサーリンク

セーフエリア(Safe Area)とは

iOS11以降では、特定機種に存在するノッチや画面の角丸、あるいは、OSのナビゲーションやステータスバーなどと干渉しない安全な領域を示すセーフエリアの概念があります。
開発者が作成するアプリの操作部は、原則セーフエリア内に配置する必要があります。

Image

SwiftUIの標準の動作では、ほとんどのViewが自動でセーフエリア内に配置されますが、.backgroundと.overlayモディファイアは独自に拡張指定できます。詳しくは、【SwiftUI】Viewの背景指定(background)【SwiftUI】Viewの重ね合わせ(overlay)を参照してください。

ソフトウェアキーボードの扱い

iOS14からソフトウェアキーボードがセーフエリア外の扱いになりました。
これによりキーボードがアプリのコントロールと重なった時に自動で再配置されるようになっています。

セーフエリアについて1

セーフエリアについて2

セーフエリアについて3

スポンサーリンク

基本的な使い方

【引数】
edges(省略可)
セーフエリアを拡張するエッジ(端)を、下記のいずれかで指定します。
引数無しの場合、.all(全方向に拡張) と同じになります。
複数の方向をコレクション形式で[.top, .trailing]のように指定可能です。

プロパティ 意味
.top 上方向に拡張
.bottom 下方向に拡張
.leading 左方向に拡張
.trailing 右方向に拡張
.vertical 垂直方向(上下)に拡張
.horizontal 縦方向(上下)に拡張
.all 全方向(上下左右)に拡張
(デフォルト)

使用例

基本的な使い方

スポンサーリンク

拡張領域の指定

第一引数に下記プロパティのいずれかを指定すると、"拡張可能な範囲"を変更できます。

.container
拡張範囲をデバイスのエッジのみに限定します。
表示領域を拡張するけどソフトウェアキーボードとは重ならないようにしたい場合に指定します。

.keyboard
拡張範囲をソフトウェアキーボードのみに限定します。
ソフトウェアキーボードが出ても画面がずれなくなります。
(具体的なユースケースが思いつきません)

.all
デバイスのエッジとソフトウェアキーボードの両方を拡張範囲とします。
未指定時のデフォルト値と同じです。

使用例

拡張領域の指定は文章にすると大変わかりにくいので、次のサンプルを使って実際に動作を確認してみると良いでしょう。

拡張領域の指定

スポンサーリンク

あわせて読みたい記事

【SwiftUI】Viewのフレームサイズ指定(frame)
(2022/03/26 更新) Viewのフレームサイズを指定する方法を解説します。
(アーカイブ)【SwiftUI】Viewの背景設定と重ね合わせ
本記事の説明はiOS14以前の使用方法です、iOS15以降の情報は、またはを参照してください。 Viewの背景設定と、別のViewを重ねる方法を解説します。
(アーカイブ)【SwiftUI】TextFieldの使い方
(2020/09/26 更新) 本記事で使用しているTextFieldの使い方はiOS14以前の仕様を元に解説しています。 最新の情報はこちらの記事を御覧ください。 テキスト入力に使うTextField()の使い方を解説します。