SwiftUI Centering Image between Views

Question

I have an HStack that I am using as a tool bar. The HStack contains a button on the left, image in the middle, and then another HStack containing 2 buttons. Everything looks fine except for the image in the middle, it's slightly to the left. How can I get the image centered?

var toolbar: some View {
        HStack(alignment: .center) {
            Button {
                UIImpactFeedbackGenerator(style: .light).impactOccurred()
                presentationMode.wrappedValue.dismiss()
            } label: {
                Image(systemName: "xmark")
                    .tint(.black)
            }
            Spacer()
            Image("nav_logo")
                .resizable()
                .frame(width: 30, height: 30)
            
            Spacer()
            optionsButton
        }
        .frame(height: 30)
    }

var optionsButton: some View {
        HStack {
            Button {
                UIPasteboard.general.string = viewModel.take.shareLinkString
                self.buildBottomAlert(type: .linkCopied)
            } label: {
                 Image("shareIcon")
            }
            .padding(.trailing, 10)
            
            Button {
                showingAlert = true
            } label: {
                Image("moreMenu")
            }
}

burnsi · Accepted Answer · 2022-10-12T22:56:17.243

The image in the middle is offset because the first button and optionsButton do not have the same width. But the Spacer´s inside the containing Stack do have equal width.

To solve this you could wrap them in to a container that is big enough so both have the same width.

e.g.:

//GeometryReader to get the size of the container this is in
GeometryReader{proxy in
    HStack(alignment: .center) {
        //Hstack to wrap the button
        HStack(){
            Button {
                UIImpactFeedbackGenerator(style: .light).impactOccurred()
                presentationMode.wrappedValue.dismiss()
            } label: {
                Image(systemName: "xmark")
                    .tint(.black)
            }
            // Spacer to move the button to the left
            Spacer()
        }
        // depending on the use case you would need to tweak this value
        .frame(width: proxy.size.width / 4)
        Spacer()
        Image(systemName: "square.and.arrow.up.trianglebadge.exclamationmark")
            .resizable()
            .frame(width: 30, height: 30)
        
        Spacer()
        HStack(){
            Spacer()
            optionsButton

        }
        .frame(width: proxy.size.width / 4)
    }
    .frame(height: 30)
}

SwiftUI Centering Image between Views

1 Answers1