> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/view/layout/alignment.md).
# Alignment
{% tabs %}
{% tab title="📘 手冊" %}
* SwiftUI ⟩ View ⟩ [Layout](https://developer.apple.com/documentation/swiftui/view-layout) ⟩
* [Aligning Views Within a Stack](https://developer.apple.com/documentation/swiftui/aligning-views-within-a-stack)
* [Aligning Views Across Stacks](https://developer.apple.com/documentation/swiftui/aligning-views-across-stacks) - align views across **multiple** stacks
* [alignmentGuide(\_:computeValue)](https://developer.apple.com/documentation/swiftui/view/alignmentguide\(_:computevalue:\)-330fz)
* [ViewDimensions](https://developer.apple.com/documentation/swiftui/viewdimensions)
{% endtab %}
{% tab title="📗 參考" %}
* SwiftUI Lab ⟩ [Alignment Guides in SwiftUI](https://swiftui-lab.com/alignment-guides/)
* Swift with Majid ⟩ [Alignment guides in SwiftUI](https://swiftwithmajid.com/2020/03/11/alignment-guides-in-swiftui/)
{% endtab %}
{% endtabs %}
## Align Within a Stack
{% tabs %}
{% tab title="cases" %}
1. default alignment
2. built-in alignments
3. adjust alignment guide of indivisual views
{% endtab %}
{% tab title="1" %}
```swift
ZStack {
/// ⭐️ 1. default alignment: `.center`
HStack {
Image(systemName: "mic")
Text("Connecting").font(.caption)
Text("Bryan").font(.title)
}
.padding()
.border(Color.blue, width: 1)
.overlay(HLine(color: .orange))
}
```
{% endtab %}
{% tab title="2" %}
{% hint style="danger" %}
注意：一般的 Image **不支援** .**firstTextBaseline**，但 [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols/) 支援。
{% endhint %}
```swift
ZStack {
/// ⭐️ 2. built-in alignment:
HStack(alignment: .firstTextBaseline) {
Image(systemName: "mic")
Text("Connecting").font(.caption)
Text("Bryan").font(.title)
}
.padding()
.border(Color.blue, width: 1)
.overlay(HLine(color: .orange), alignment: Alignment(
horizontal: .center,
vertical: .firstTextBaseline
))
}
```
{% endtab %}
{% tab title="3" %}
```swift
ZStack {
/// ⭐️ 3. adjust alignment guide of indivisual views
HStack(alignment: .firstTextBaseline) {
Image(systemName: "mic")
/// ⭐️ 3.1
/// When using `.alignmentGuide()`, make sure to specify an
/// **active alignment** of the **stack** (`.firstTextBaseline`
/// in this case). Otherwise, SwiftUI doesn’t invoke the closure
/// to offset the view.
.alignmentGuide(.firstTextBaseline) { dim in
/// ⭐️ 3.2 將對齊線(alignment guide)調到 image 正中央
dim[VerticalAlignment.center] // = dim[.bottom] - 0.5 * dim.height
}
Text("Connecting").font(.caption)
Text("Bryan").font(.title)
}
.padding()
.border(Color.blue, width: 1)
.overlay(HLine(color: .orange), alignment: Alignment(
horizontal: .center,
vertical: .firstTextBaseline
))
}
```
{% endtab %}
{% endtabs %}
## Align Across Stacks
{% hint style="info" %}
By default, the **alignment** you specify for a **stack** applies only to that stack’s **child views**.
{% endhint %}
{% tabs %}
{% tab title="cases" %}
1. use **custom** alignment
2. use **built-in** alignment
{% endtab %}
{% tab title="1" %}
```swift
/// ⭐️ 1. Define a Custom Alignment
extension VerticalAlignment {
/// ⭐️ 1.1 define custom alignment for image titles.
private struct ImageTitleAlignment: AlignmentID {
static func defaultValue(in context: ViewDimensions) -> CGFloat {
// default to bottom alignment if no guides are set.
context[VerticalAlignment.bottom]
}
}
/// ⭐️ 1.2 define a convenience alignment guide name
static let imageTitle = VerticalAlignment(
ImageTitleAlignment.self
)
}
struct AcrossStacks: View {
var body: some View {
/// ⭐️ 2. Assign custom alignment to parent view
/// When you assign an alignment on a stack,
/// it projects through enclosed child views.
HStack(alignment: .imageTitle, spacing: 32) {
VStack {
Image(systemName: "bell")
.resizable().scaledToFit().padding().foregroundColor(.red)
Text("Bell Peppers").font(.title)
/// ⭐️ 3. Within each nested stack, apply `.alignmentGuide()`
/// to the view you want to align with.
.alignmentGuide(.imageTitle) { dim in
dim[.firstTextBaseline]
}
}
VStack {
Image(systemName: "memorychip")
.resizable().scaledToFit().padding().foregroundColor(.green)
Text("Chili Peppers").font(.title)
/// ⭐️ 3.
.alignmentGuide(.imageTitle) { dim in
dim[.firstTextBaseline]
}
Text("Higher levels of capsicum").font(.caption)
}
}.overlay(HLine(), alignment: Alignment(horizontal: .center, vertical: .imageTitle))
}
}
```
{% endtab %}
{% tab title="2" %}
```swift
/// ⭐️ parent stack
HStack(alignment: .firstTextBaseline) {
// nested stack
HStack(alignment: .firstTextBaseline) {
image
text
}
// nested stack
HStack(alignment: .firstTextBaseline) {
image
// ⭐️ 對齊線 (alignment guide) 往下 (+) 會讓 image 往上飄
.alignmentGuide(.firstTextBaseline) { d in
d[.bottom] + d.height
}
text
}
// nested stack
HStack(alignment: .firstTextBaseline) {
image
// ⭐️ 對齊線 (alignment guide) 往上 (-) 會讓 image 往下沈
.alignmentGuide(.firstTextBaseline) { d in
d[.bottom] - d.height
}
text
}
}.baseLine()
```
{% endtab %}
{% tab title="extensions" %}
```swift
import SwiftUI
extension View {
/// ⭐️ left border
func borderLeft(color: Color = .red, width: CGFloat = 1) -> some View {
overlay(VLine(color: color, width: width), alignment: .leading)
}
/// ⭐️ bottom border
func borderBottom(color: Color = .red, width: CGFloat = 1) -> some View {
overlay(HLine(color: color, width: width), alignment: .bottom)
}
/// ⭐️ base line
func baseLine() -> some View {
overlay(HLine(), alignment: Alignment(
horizontal: .center,
vertical: .firstTextBaseline
))
}
}
/// ⭐️ horizontal line
struct HLine: View {
var color: Color = .red
var width: CGFloat = 1
var body: some View {
Rectangle().fill(color).frame(height: width)
}
}
/// ⭐️ vertical line
struct VLine: View {
var color: Color = .red
var width: CGFloat = 1
var body: some View {
Rectangle().fill(color).frame(width: width)
}
}
```
{% endtab %}
{% endtabs %}