View
内のImage
(HStack
)を水平方向に中央揃えするにはどうすればよいですか?ボタンを左揃えにし、画像をビューの水平方向の中央に配置したい。
現在私はこの構造を持っています:
VStack {
HStack {
Button(action: {
print("Tapped")
}, label: {
Image("left-arrow")
.resizable()
.frame(width: 30, height: 30, alignment: .leading)
}).padding(.leading, 20)
Spacer()
Image("Twitter-logo")
.resizable()
.frame(width: 30, height: 30, alignment: .center)
}
Spacer()
}
これは私にこれを与えています:
しかし、私はこれを達成したいです:
更新:
ボタンサイズをプロパティに保存し、画像に負のパディングを追加するのはどうですか?画像の後にある追加のスペーサーに注意してください。
struct ContentView: View {
var buttonSize: Length = 30
var body: some View {
VStack {
HStack {
Button(action: {
print("Tapped")
}, label: {
Image(systemName: "star")
.resizable()
.frame(width: buttonSize, height: buttonSize, alignment: .leading)
})
Spacer()
Image(systemName: "star")
.resizable()
.frame(width: 30, height: 30, alignment: .center)
.padding(.leading, -buttonSize)
Spacer()
}
Spacer()
}
}
}
結果:
2つのHStack
をZStack
に埋め込み、それに応じてスペーサーを水平方向の間隔に配置できます。これらすべてをVStack
にSpacer()
で埋め込んで、すべてを上に押し上げます。
_struct ContentView : View {
var buttonSize: Length = 30
var body: some View {
VStack {
ZStack {
HStack {
Button(action: {
}, label: {
Image(systemName: "star")
.resizable()
.frame(width: CGFloat(30), height: CGFloat(30), alignment: .leading)
}).padding(.leading, CGFloat(20))
Spacer()
}
HStack {
Image(systemName: "star")
.resizable()
.frame(width: CGFloat(30), height: CGFloat(30), alignment: .center)
}
}
Spacer()
}
}
_
}
注:2番目のHStack
では、画像は自動的に中央揃えになりますが、そうでない場合は、画像の前後にSpacer()
を配置できます。
編集:VStack
とSpacer()
を追加して、必要なOPのようにすべてを最上部に移動しました。
編集2:画像が中心からわずかにオフセットされるため、画像のパディングを削除しました。独自のHStack
であり、中央揃えであるため、パディングは必要ありません。
編集3:コメントの@Chris Princeのおかげで、左、中央、および右の引数を提供してOPが望む効果を作成できるシンプルなNavigationBar風のカスタムビューを作成することにしました(各ビューのセットが整列されています)互いに独立して):
_struct CustomNavBar<Left, Center, Right>: View where Left: View, Center: View, Right: View {
let left: () -> Left
let center: () -> Center
let right: () -> Right
init(@ViewBuilder left: @escaping () -> Left, @ViewBuilder center: @escaping () -> Center, @ViewBuilder right: @escaping () -> Right) {
self.left = left
self.center = center
self.right = right
}
var body: some View {
ZStack {
HStack {
left()
Spacer()
}
center()
HStack {
Spacer()
right()
}
}
}
}
_
使用方法:
_struct ContentView: View {
let buttonSize: CGFloat = 30
var body: some View {
VStack {
CustomNavBar(left: {
Button(action: {
print("Tapped")
}, label: {
Image(systemName: "star")
.resizable()
.frame(width: self.buttonSize, height: self.buttonSize, alignment: .leading)
}).padding()
}, center: {
Image(systemName: "star")
.resizable()
.frame(width: 30, height: 30, alignment: .center)
}, right: {
HStack {
Text("Long text here")
Image(systemName: "star")
.resizable()
.frame(width: 30, height: 30, alignment: .center)
.padding(.trailing)
}.foregroundColor(.red)
})
Spacer()
Text("Normal Content")
Spacer()
}
}
}
_
あなたは位置プロパティを使用してビューを中央に配置しますこのコードを試してください
Group{ // container View
Image("Twitter-logo")
.resizable()
.frame(width: 30, height: 30, alignment: .center)
}.position(x: UIScreen.main.bounds.width/2)