（2022/03/26 更新）
Viewのフレームサイズを指定する方法を解説します。
環境
この記事の情報は次のバージョンで動作確認しています。
【Swift】5.6
【iOS】15.4
【macOS】Monterey バージョン 12.3
フレームの概要
フレームはレイアウトの基準となる枠で、デフォルトでは「Viewのサイズ＝フレームのサイズ」ですが、frameモディファイアを使ってフレームサイズを変更できます。
具体的な例を示すと、下の図の青背景の部分がTextView、周りの赤枠がこのViewに設定されたフレームです。
VStackやHStackなどのレイアウトコンテナでは、このフレームを基準にViewの配置が行われます。
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { var body: some View { Text("カピ通信") .font(.largeTitle) .background(Color.blue) .frame(width: 200, height: 100) // フレームの設定 .border(Color.red, width: 2) // フレームに枠線を付けて可視化 } } |
基本的な使い方
|
1 2 3 |
.frame(width: CGFloat, height: CGFloat, alignment: Alignment) |
【引数】
※各引数は各々省略可能ですが、少なくとも１つ以上の指定が必要です。
width（省略可）
フレームの横幅をCGFloat型で設定します。省略した場合（=nil）、元のサイズから変わりません。
height（省略可）
フレームの高さをCGFloat型で設定します。省略した場合（=nil）、元のサイズから変わりません。
alignment（省略可）
フレーム内での元Viewの配置をAlignmentで指定します。
使用例
|
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) // フレームに枠線を付けて可視化 } } |
フレームサイズを可変にする
以下のイニシャライザをつかってフレームサイズに制約を設定すると、固定サイズではなく周りのViewに合わせてフレキシブルにサイズを調整できます。
|
1 2 3 |
.frame(minWidth: CGFloat, maxWidth: CGFloat, minHeight: CGFloat, maxHeight: CGFloat, alignment: Alignment) |
【引数】
※各引数は各々省略可能ですが、少なくとも１つ以上の指定が必要です。また、矛盾が生じる制約（例：minWith > maxWidth）を指定した場合、実行エラーとなります。
minWidth（省略可）
フレームの最小幅をCGFloat型で指定します。
親Viewがより少ないスペースを指定しても、この幅を下回る事はありません。
maxWidth（省略可）
フレームの最大幅をCGFloat型で指定します。
親Viewがより広いスペースを提供しても、この幅を上回る事はありません。
逆に親Viewがこれより少ないスペースを指定した場合は、親の指定した範囲までとなります。
minHeight（省略可）
フレームの最小高をCGFloat型で指定します。
親Viewがより少ないスペースを指定しても、この高さを下回る事はありません。
maxHeight（省略可）
フレームの最大高をCGFloat型で指定します。
親Viewがより広いスペースを提供しても、この高さを上回る事はありません。
逆に親Viewがこれより少ないスペースを指定した場合は、親の指定した範囲までとなります。
alignment（省略可）
フレーム内での元Viewの配置をAlignmentで指定します。
使用例
親Viewのサイズに合わせて対象Viewのサイズは変わりますが、最小サイズと最大サイズは固定となっている例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
struct ContentView: View { @State private var parentWidth: CGFloat = 600 @State private var parentHeight: CGFloat = 200 var body: some View { ZStack { VStack { Text("カピ通信") .font(.largeTitle) .frame(minWidth: 200, maxWidth: 500, minHeight: 50, maxHeight: 100) .background(Color.green) } .frame(width: parentWidth, height: parentHeight) .border(Color.red, width: 2) HStack { VStack { Spacer() Text("横幅:\(parentWidth, specifier: "%.0f")") Slider(value: $parentWidth, in: 0...600) } .padding() VStack { Spacer() Text("高さ:\(parentHeight, specifier: "%.0f")") Slider(value: $parentHeight, in: 0...200) } .padding() } } } } |
フレームサイズを最大にする
maxWidth、maxHeightにCGFloat型の最大値を示すプロパティ.infinityを指定すると、他のViewに干渉しない最大サイズにできます。
|
1 2 3 |
.frame(maxWidth: .infinity, maxHeight: .infinity) |
次の例は、表示可能なセーフエリアいっぱいまでフレームサイズを広げた例です。
|
1 2 3 4 5 6 7 8 9 |
struct ContentView: View { var body: some View { Rectangle() .fill(Color.orange) .frame(maxWidth: .infinity, maxHeight: .infinity) // フレームを最大サイズに設定 } } |
フレームサイズをセーフエリア外まで広げる
|
1 2 3 |
.ignoresSafeArea() |
フレームサイズをセーフエリア外まで広げるには、このモディファイアを追加します。
|
1 2 3 4 5 6 7 8 9 10 |
struct ContentView: View { var body: some View { Rectangle() .fill(Color.orange) .frame(maxWidth: .infinity, maxHeight: .infinity) .ignoresSafeArea() // セーフエリア外にViewを拡大する } } |
.ignoresSafeArea() モディファイアの詳しい解説は【SwiftUI】Viewをセーフエリア外に拡張する（ignoresSafeArea）を参照してください。
あわせて読みたい記事
