ビューのフレームサイズ指定する方法を解説します。
フレームサイズはレイアウトの基準となる枠で、実際のViewの表示サイズとは異なる事があります。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】11.1
【Swift】5.1
【iOS】13.1.3
【macOS】Catalina バージョン 10.15
【Swift】5.1
【iOS】13.1.3
【macOS】Catalina バージョン 10.15
数値によるフレームサイズの指定
ビューのフレームサイズ変更にはView修飾子.frame()を使います。
以下にTextビューのフレームサイズを200✕200に変更する例を示します。
フレームのサイズがわかりやすいようにビューの背景を青くしています。
|
1 2 3 4 5 6 7 8 9 10 11 |
import SwiftUI struct Sample1View: View { var body: some View { Text("カピ通信") .frame(width: 200, height: 200) .background(Color.blue) } } |
フレームサイズを最大にする
次のように.frame()を指定すると他のViewに関与しない最大サイズに設定されます。
この例では、表示可能なセーフエリアいっぱいに枠が広がります。
|
1 2 3 4 5 6 7 8 9 10 11 |
import SwiftUI struct ContentView: View { var body: some View { Text("カピ通信") .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.blue) } } |
フレームサイズをセーフエリア外まで広げる
セーフエリア外まで枠を広げる場合は、次のように.edgesIgnoringSafeArea(.all) を付加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import SwiftUI struct ContentView: View { var body: some View { Text("カピ通信") .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.blue) .edgesIgnoringSafeArea(.all) } } |
最後に
View修飾子の適用順番によって動きが変わる事がありますので、期待通りの表示にならない時は、View修飾子に記述順を変えてみると良いです。
【SwiftUI】View修飾子の適用順
ビューに様々な変更を適用するView修飾子ですが、適用する順番によって挙動が変わる事があります。これはView修飾子が既存のビューのプロパティを変更しているのでは無く、変更を適用した新しいビューを毎回作成している事に関係します。
capibara1969.com
2019.11.10
コメント