I am creating a user interface for a working program. I am able to lay things out with offsets but am trying as a learning experience to do the same with alignment guides. For the section heading labeled "Group 1" I am able to get the layout I want. What I cannot get to work are alignment guides for the associated rounded rectangle. It appears that the alignment guides with the rounded rectangle only affect the contents i.e. the text "Data Table". Below is a picture of the code output and the code. How, using alignment guides, can move the top rounded rectangle? To keep the picture small I just copied the left side of the output window. The top rounded rectangle is approximately centered in this window.
struct ContentView: View {
var body: some View {
NavigationStack {
Text("Group1")
.font(Font.custom("Arial", size: 16))
.alignmentGuide(HorizontalAlignment.center, computeValue: { d in
print("\(d[HorizontalAlignment.leading])")
// print leading = 0.0
// print center = 27
// print trailing = 54
return d[HorizontalAlignment.leading] + 255
})
ZStack (alignment: Alignment(horizontal: .center, vertical: .center)) {
RoundedRectangle(cornerRadius: 10)
.fill(.white)
.alignmentGuide(HorizontalAlignment.center, computeValue: { d in
return d[HorizontalAlignment.leading] + 45
})
VStack (alignment: HorizontalAlignment.leading) {
NavigationLink(value: "Table1") {
Text("Data Table")
}
.font(Font.custom("Arial", size: 14))
.buttonStyle(.link)
.underline()
.focusable(false)
} // end vstack
} // end zStack
.frame(width: 200, height: 60)
Text("Group2")
.font(Font.custom("Arial", size: 16))
.frame(width: 600, height: 20, alignment: .leading)
.padding(.leading, 35)
.padding(.top, 20)
.offset(x: 30)
ZStack {
RoundedRectangle(cornerSize: CGSize(width: 200, height: 60))
.stroke(Color(.clear), lineWidth: 1)
.frame(width: 200, height: 60, alignment: .leading)
.background(.white)
.cornerRadius(10)
.offset(x: -160)
VStack () {
NavigationLink(value: "Table2") {
Text("Data Table")
}
.font(Font.custom("Arial", size: 14))
.buttonStyle(.link)
.underline()
.padding(.leading, 8)
.frame(width: 200, height: 20, alignment: .leading)
.offset(x: -160)
.focusable(false)
}
}
Text("Group3")
.font(Font.custom("Arial", size: 16))
.frame(width: 600, height: 20, alignment: .leading)
.padding(.leading, 35)
.padding(.top, 20)
.offset(x: 30)
ZStack {
RoundedRectangle(cornerSize: CGSize(width: 200, height: 60))
.stroke(Color(.clear), lineWidth: 1)
.frame(width: 200, height: 60, alignment: .leading)
.background(.white)
.cornerRadius(10)
.offset(x: -160)
VStack () {
NavigationLink(value: "Table3") {
Text("Data Table")
}
.font(Font.custom("Arial", size: 14))
.buttonStyle(.link)
.underline()
.padding(.leading, 8)
.frame(width: 200, height: 20, alignment: .leading)
.offset(x: -160)
.focusable(false)
}
}
.padding(.bottom, 20)
.navigationDestination(for: String.self) { command in
switch command {
case "Table1":
HStack {
CustomTableView(fundName: "Table1", numYears: 1)
.frame(width: 320, height: 345, alignment: .center)
.padding(.leading, 120)
.padding(.trailing, 160)
}
case "Table2":
HStack {
CustomTableView(fundName: "Table2", numYears: 1)
.frame(width: 320, height: 345, alignment: .center)
.padding(.leading, 120)
.padding(.trailing, 160)
}
case "Table3":
HStack {
CustomTableView(fundName: "Table3", numYears: 1)
.frame(width: 320, height: 345, alignment: .center)
.padding(.leading, 120)
.padding(.trailing, 160)
}
default:
let _ = print("problem in main view switch statement")
} // end switch
} // end navigation destination
}
.frame(width: 600, height: 400, alignment: .trailing)
}
}
To utilize an alignment guide it appears that the parent container must indicate the alignment type listed in the guide. Other wise the alignment guide is not called. So I removed all of the alignments and alignment guides. Then stepped down thru the views starting with the outermost. At the outmost view and each subview I set the alignment to leading. As a result, if I set the alignment guide to be HorizontalAlignment.leading, the associated closure is run and the guide is applied. I should note that I had to insert a V Stack directly inside the Natigation Stack to get things to work, and of course set its alignment to leading. I have not yet determined how to replace the spacers with vertical alignment guides but will work on that next. Below is a view of the resutling output and the associated code. The code for sections "Group 2" and "Group 3" are essentially identical to that for "Group 1", so I did not include them. In addition, the Navigation Destination did not change so it was also not included.
struct ContentView: View {
var body: some View {
NavigationStack {
VStack (alignment: HorizontalAlignment.leading) {
Text("Group1")
.font(Font.custom("Arial", size: 16))
.alignmentGuide(HorizontalAlignment.leading, computeValue: { viewDimensions in
return viewDimensions[HorizontalAlignment.leading] - 42
})
ZStack (alignment: Alignment(horizontal: .leading, vertical: .center)) {
RoundedRectangle(cornerRadius: 10)
.fill(.white)
.alignmentGuide(HorizontalAlignment.leading, computeValue: { viewDimensions in
return viewDimensions[HorizontalAlignment.leading] - 30
})
VStack (alignment: HorizontalAlignment.leading) {
NavigationLink(value: "vooTable") {
Text("Data Table")
.alignmentGuide(HorizontalAlignment.leading, computeValue: { viewDimensions in
return viewDimensions[HorizontalAlignment.leading] - 55
})
}
.font(Font.custom("Arial", size: 14))
.buttonStyle(.link)
.underline()
.focusable(false)
} // end vstack
} // end zStack
.frame(width: 200, height: 60, alignment: .leading)
Spacer()
.frame(width: 200, height: 25, alignment: .leading)
} // end navigation destination
} // end v stack
} // end navigtion stack
.frame(width: 750, height: 550, alignment: Alignment(horizontal: .leading, vertical: .center))
}