SwiftUI: How to force a specific view in an HStack to be in the centre

Question

Given an HStack like the following:

        HStack{
            Text("View1")

            Text("Centre")

            Text("View2")

            Text("View3")
        }

How can I force the 'Centre' view to be in the centre?

score 6 · Answer 1 · answered Jun 15 '20 at 14:32

Here is possible simple approach. Tested with Xcode 11.4 / iOS 13.4

struct DemoHStackOneInCenter: View {
    var body: some View {
        HStack{
            Spacer().overlay(Text("View1"))

            Text("Centre")

            Spacer().overlay(
                HStack {
                    Text("View2")
                    Text("View3")
                }
            )
        }
    }
}

The solution with additional alignments for left/right side views was provided in Position view relative to a another centered view

that's an interesting approach. It does rather mess up the spacing between the views, but you can fix that with more spacers in the left/right HStacks and explicit spacing. — Confused Vorlon, Jun 15 '20 at 14:42

score 3 · Answer 2 · answered Jun 15 '20 at 14:19

the answer takes a handful of steps

wrap the HStack in a VStack. The VStack gets to control the horizontal alignment of it's children
Apply a custom alignment guide to the VStack
Create a subview of the VStack which takes the full width. Pin the custom alignment guide to the centre of this view. (This pins the alignment guide to the centre of the VStack)
align the centre of the 'Centre' view to the alignment guide

For the view which has to fill the VStack, I use a Geometry Reader. This automatically expands to take the size of the parent without otherwise disturbing the layout.

import SwiftUI


//Custom Alignment Guide
extension HorizontalAlignment {
    enum SubCenter: AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            d[HorizontalAlignment.center]
        }
    }

    static let subCentre = HorizontalAlignment(SubCenter.self)
}

struct CentreSubviewOfHStack: View {
    var body: some View {
        //VStack Alignment set to the custom alignment
        VStack(alignment: .subCentre) {
            HStack{
                Text("View1")

                //Centre view aligned
                Text("Centre")
                .alignmentGuide(.subCentre) { d in d.width/2 }

                Text("View2")

                Text("View3")
            }

            //Geometry reader automatically fills the parent
            //this is aligned with the custom guide
            GeometryReader { geometry in
                EmptyView()
            }
            .alignmentGuide(.subCentre) { d in d.width/2 }
        }
    }
}

struct CentreSubviewOfHStack_Previews: PreviewProvider {
    static var previews: some View {
        CentreSubviewOfHStack()
            .previewLayout(CGSize.init(x: 250, y: 100))
    }
}

SwiftUI: How to force a specific view in an HStack to be in the centre

2 Answers2