Alignmentの位置
Published by @SoNiceInfo at 6/24/2020
Alignmentで指定できる位置は左上から右下まで9つの箇所に分類されます。
図で表すとこのようになっています。
ここではVStackとHStackを使って文字を赤枠、フレームを青枠で囲ってAlignmentの位置をわかりやすく表示したものを紹介します。
AligmentはVStack(alignment: .leading)やframe(alignment: .top)のように指定する場面があります。
上がTop, 下がbottomo, 左がLeading, 右がTrailingさえ覚えてしまえばあとは直感で使えるようになります。
| topLeading | top | topTrailing |
|---|---|---|
| leading | center | trailing |
| bottomLeading | bottom | bottomTrailing |
//
// ContentView.swift
//
import SwiftUI
struct ContentView: View {
var body: some View {
VStack() {
HStack() {
Text("topLeading")
.border(Color.red)
.frame(width: 100, height: 100, alignment: .topLeading)
.border(Color.blue)
Text("top")
.border(Color.red)
.frame(width: 100, height: 100, alignment: .top)
.border(Color.blue)
Text("topTrailing")
.border(Color.red)
.frame(width: 100, height: 100, alignment: .topTrailing)
.border(Color.blue)
}
HStack() {
Text("leading")
.border(Color.red)
.frame(width: 100, height: 100, alignment: .leading)
.border(Color.blue)
Text("center")
.border(Color.red)
.frame(width: 100, height: 100, alignment: .center)
.border(Color.blue)
Text("trailing")
.border(Color.red)
.frame(width: 100, height: 100, alignment: .trailing)
.border(Color.blue)
}
HStack() {
Text("bottomLeading")
.border(Color.red)
.frame(width: 100, height: 100, alignment: .bottomLeading)
.border(Color.blue)
Text("bottom")
.border(Color.red)
.frame(width: 100, height: 100, alignment: .bottom)
.border(Color.blue)
Text("bottomTrailing")
.border(Color.red)
.frame(width: 100, height: 100, alignment: .bottomTrailing)
.border(Color.blue)
}
}.border(Color.blue)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
