【SwiftUI】Viewのフレームサイズ指定(frame)

(2021/09/12 更新)

Viewのフレームサイズを指定する方法を解説します。
フレームはレイアウトの基準となる枠で、実際のView表示サイズとは異なる場合があります。
具体的な例を示すと、下の図の青背景の部分が元々のTextView、回りの赤枠がこのViewに設定されたフレームです。
VStackやHStackなどのレイアウトコンテナでは、このフレームを基準にViewの配置が行われます。

図:Viewのフレームサイズ指定

スポンサーリンク

環境

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

【Xcode】12.5RC
【Swift】5.4
【iOS】14.5
【macOS】Big Sur バージョン 11.5.2
スポンサーリンク

基本的な使い方

Viewに対するModifierとして使用します。
引数(width、height)ではフレームの縦幅、横幅を指定します。デフォルトはnil。
引数(alignment)では、フレーム内での対象Viewの配置位置を指定します。デフォルト値は.center。
いずれもデフォルト値が設定されているので、明示的に変更したい引数の指定だけでもOKです。

なお、alignmentには次の値が使用可能です。

意味
.center 中央寄せ
.leading 左寄せ
.trailing 右寄せ
.top 上寄せ
.bottom 下寄せ
.topLeading 左上寄せ
.topTrailing 右上寄せ
.bottomLeading 左下寄せ
.bottomTrailing 右下寄せ

使用例

図:使用例

スポンサーリンク

フレームサイズを最大にする

.frame()の引数を次のように指定すると、他のViewに関与しない最大サイズにできます。

次のサンプルは、表示可能なセーフエリアいっぱいまでフレームサイズを広げた例です。
フレームの範囲がわかりやすいように、背景をオレンジ色にしています。

図:フレームサイズを最大にする

スポンサーリンク

フレームサイズをセーフエリア外まで広げる

このModifierを追加すると、フレームサイズをセーフエリア外まで広げられます。

フレームサイズをセーフエリア外まで拡張する

.ignoresSafeArea() モディファイアの詳しい解説はこちらの記事を参照してください。

【SwiftUI】Viewをセーフエリア外に拡張する(ignoresSafeArea)
Viewをセーフエリア外に拡張する .ignoresSafeArea() モディファイアについて解説します。iOS14から使えるようになったモディファイアで、以前からあった .edgesIgnoringSafeArea() は depre...
スポンサーリンク

最後に

Modifierの適用順番によって動きが変わる事がありますので、期待通りの表示にならない時は、Modifierの記述順を変えてみると良いです。

【SwiftUI】Modifierの適用順
Viewに様々な変更を適用するModifierですが、適用する順番によって挙動が変わる事があります。これはModifierが既存のViewのプロパティを変更しているのでは無く、変更を適用した新しいViewを毎回作成している事に関係します。...