Align bottom alignment for views using verticalAlighment and alignmentGuide

Question

I watched WWDC's Building Custom Views with SwiftUI video about some advanced technique using SwiftUI, but I am not able to align the bottom elements which is not in the same HStack, see the image below:

Basically I want to align the profile image to the bottom of the Text view but it doesn't work, I followed the same code from the video using .alignmentGuide modifier, but it just doesn't work. Thanks!

    struct MessageView : View {
    var body: some View {
        HStack {
            HStack(alignment: .center) {
                RoundImage(image: Image("turtlerock"))
                    .frame(width: 35)
                    .alignmentGuide(.bottomImageAndText) { d in
                        d[.bottom]
                    }
                VStack(alignment: .leading) {
                    Text("AR demo from Apple site 🤣 AR demo from Apple site 🤣 AR demo from Apple site 🤣 AR demo from Apple site 🤣")
                        .fontWeight(.regular)
                        .padding(EdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10))
                        .lineLimit(5)
                        .border(Color.gray, width: 1, cornerRadius: 15)
                        .layoutPriority(2)
                        .alignmentGuide(.bottomImageAndText) { d in
                            d[.bottom]
                        }
                    HStack {
                        Image(systemName: "heart.fill")
                            .foregroundColor(.red)
                        RoundImage(image: Image("turtlerock"))
                            .frame(height: 16)
                    }
                    .padding(.leading)
                }
            }.padding(EdgeInsets(top: 0, leading: 10, bottom:0 , trailing: 0))
            .layoutPriority(1)
            Spacer()} }
}

extension VerticalAlignment {
    private enum BottomImageAndText : AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> Length {
            return d[.bottom]
        }
    }

    static let bottomImageAndText = VerticalAlignment(BottomImageAndText.self)
}

Solution 1

Note: Unless custom alignment matches the Container Alignment parameter value, custom alignment guide will be ignored during layout.

Changes I made to your code:

struct MessageView : View {
var body: some View {
    HStack {
        HStack(alignment: .bottomImageAndText) {
            Image("turtlerock")
                .frame(width: 35, height: 35, alignment: .bottom)
                .alignmentGuide(.bottomImageAndText) { d in
                    d[.bottom]
            }
....

For more information on alignment guide you can go through this article.

Solution 2

In order to make an alignment guide working you need to attach it to a stack. E.g:

HStack {
    HStack (alignment: .bottomImageAndText) {

Comments

[Andy Heard]

I'm having the same issue, I'm thinking that this isn't working in the current build of Xcode we have right now.

[lorixx]

@AndyHeard Thanks for confirming! Let's wait and see to validate