今回は, Viewのレイアウト調整について初歩的なものを扱っていきます.
環境は,
- macOS Catalina 10.15.7
- Xcode 12.0.1
- Swift 5.3
- iOS 14.0
です.
目次
padding
paddingはViewの周囲に余白を作ります. top, bottom, leading, trailingでそれぞれ上下左右の余白のみ指定できます. これ以外にも, horizontal(左右の余白), vertical(上下の余白)の指定もできます.
値 | 説明 |
---|---|
top | 上方向に余白を作る |
bottom | 下方向に余白を作る |
leading | 左方向に余白を作る |
trailing | 右方向に余白を作る |
vertical | 上下に余白を作る |
horizontal | 左右に余白を作る |
all | 全方向に余白を作る |
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing: 40.0){
Text("ABC")
.font(.title)
.foregroundColor(Color.white)
.background(Color.blue)
Text("ABC")
.font(.title)
.foregroundColor(Color.white)
.padding(10.0)
.background(Color.blue)
Text("ABC")
.font(.title)
.foregroundColor(Color.white)
.padding(.top, 10.0)
.background(Color.blue)
Text("ABC")
.font(.title)
.foregroundColor(Color.white)
.padding(.bottom, 10.0)
.background(Color.blue)
Text("ABC")
.font(.title)
.foregroundColor(Color.white)
.padding(.leading, 10.0)
.background(Color.blue)
Text("ABC")
.font(.title)
.foregroundColor(Color.white)
.padding(.trailing, 10.0)
.background(Color.blue)
}
}
}

verticalとhorizontalの余白は次のようになります.
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing: 40.0){
Text("ABC")
.font(.title)
.foregroundColor(Color.white)
.background(Color.yellow)
Text("ABC")
.font(.title)
.foregroundColor(Color.white)
.padding(.vertical,10.0)
.background(Color.yellow)
Text("ABC")
.font(.title)
.foregroundColor(Color.white)
.padding(.horizontal, 10.0)
.background(Color.yellow)
}
}
}

offset
offsertはViewの位置をx軸方向とy軸方法に動かすことができます.
View().offset(x: x軸方向の移動量, y: y軸方向の移動量)
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack{
ContainerRelativeShape()
.fill(Color.blue)
.frame(width: 120, height: 120)
ContainerRelativeShape()
.fill(Color.yellow)
.frame(width: 80, height: 80)
ContainerRelativeShape()
.fill(Color.green)
.frame(width: 40, height: 40)
}
}
}

import SwiftUI
struct ContentView: View {
var body: some View {
ZStack{
ContainerRelativeShape()
.fill(Color.blue)
.frame(width: 120, height: 120)
ContainerRelativeShape()
.fill(Color.yellow)
.frame(width: 80, height: 80)
.offset(x:50)
ContainerRelativeShape()
.fill(Color.green)
.frame(width: 40, height: 40)
.offset(y:-30)
}
}
}

position
positionはViewの位置を指定できます. 指定されるのはView()の中心部分です.
View().positon(x: x軸方向の位置, y: y軸方向の位置)
(0, 0)は左上を指します. デバイスによって最大幅が違うので, offsetと同様マルチデバイス対応のアプリを考えている場合は使い方が難しいかもしれません.
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack{
ContainerRelativeShape()
.fill(Color.blue)
.frame(width: 120, height: 120)
ContainerRelativeShape()
.fill(Color.yellow)
.frame(width: 80, height: 80)
.position(x: 200, y: 500)
ContainerRelativeShape()
.fill(Color.green)
.frame(width: 40, height: 40)
.position(x: 100, y: 100)
}
}
}

指定するのはViewの中心部分ですので, (x, y)=(0, 0)を指定した場合は画面からはみ出してしまいます.
import SwiftUI
struct ContentView: View {
var body: some View {
Image("cat")
.border(Color.gray)
}
}

import SwiftUI
struct ContentView: View {
var body: some View {
Image("cat")
.border(Color.gray)
.position(x: 0, y: 0)
}
}

コメント