Viewのフレームサイズを指定する方法を解説します。
フレームはレイアウトの基準となる枠で、実際のView表示サイズとは異なる事があります。
具体的な例を示すと、下の図の青背景の部分が元々のTextView、回りの赤枠がこのViewに設定されたフレームです。
VStackやHStackなどのレイアウトコンテナでは、このフレームを基準にViewの配置が行われます。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.2
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.2
基本的な使い方
|
1 2 3 |
.frame(width: 100, height: 100, alignment: .center） |
引数（width、height）ではフレームの縦幅、横幅を指定します。デフォルトはnil。
引数（alignment）では、フレーム内での対象Viewの配置位置を指定します。デフォルト値は.center。
いずれもデフォルト値が設定されているので、明示的に変更したい引数の指定だけでもOKです。
なお、alignmentには次の値が使用可能です。
| 値 | 意味 |
|---|---|
| .center | 中央寄せ |
| .leading | 左寄せ |
| .trailing | 右寄せ |
| .top | 上寄せ |
| .bottom | 下寄せ |
| .topLeading | 左上寄せ |
| .topTrailing | 右上寄せ |
| .bottomLeading | 左下寄せ |
| .bottomTrailing | 右下寄せ |
使用例
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { var body: some View { Text("カピ通信") .font(.largeTitle) .background(Color.blue) // Text Viewの背景を青に .frame(width: 200, height:100, alignment: .bottomTrailing) // フレームの設定 .border(Color.red, width: 2) // フレームに枠線をつけて可視化 } } |
フレームサイズを最大にする
.frame()の引数を次のように指定すると、他のViewに関与しない最大サイズに設定する事ができます。
|
1 2 3 |
.frame(maxWidth: .infinity, maxHeight: .infinity) |
次のサンプルは、表示可能なセーフエリアいっぱいまでフレームサイズを広げた例です。
フレームの範囲がわかりやすいように、背景をオレンジ色にしています。
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { var body: some View { Text("カピ通信") .font(.largeTitle) .background(Color.blue) // Text Viewの背景を青に .frame(maxWidth: .infinity, maxHeight: .infinity) // フレームを最大サイズに設定 .background(Color.orange) // フレーム範囲をオレンジ色に } } |
フレームサイズをセーフエリア外まで広げる
|
1 2 3 |
.edgesIgnoringSafeArea(.all) |
このModifierを追加すると、フレームサイズをセーフエリア外まで広げられます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
struct ContentView: View { var body: some View { Text("カピ通信") .font(.largeTitle) .background(Color.blue) .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.orange) .edgesIgnoringSafeArea(.all) // フレームをセーフエリア外まで広げる } } |
最後に
Modifierの適用順番によって動きが変わる事がありますので、期待通りの表示にならない時は、Modifierの記述順を変えてみると良いです。
【SwiftUI】Modifierの適用順
Viewに様々な変更を適用するModifierですが、適用する順番によって挙動が変わる事があります。これはModifierが既存のViewのプロパティを変更しているのでは無く、変更を適用した新しいViewを毎回作成している事に関係します。...
capibara1969.com
2019.11.10
