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

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

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

スポンサーリンク

環境

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

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.2

基本的な使い方

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

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

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

使用例

図:使用例

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

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

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

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

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

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

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

最後に

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

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

コメント