How do I arrange SwiftUI Toolbar items?

Question

I have a SwiftUI ToolBar with 4 buttons, however the code I implemented is not correct because the buttons end up in weird places when changing the device type in simulator.

Even worse, when viewed on iPhone 8 / 8 Plus, 2 of the buttons are on the far edges of the window.

How do I properly apply spacing/padding to ToolBar buttons so they are consistent across different iOS devices?

Thank you!

 // This code spaces the buttons but they change positions depending on the iOS device


                 ToolbarItem {
                        HStack {
                            HStack {
                                ProfileUploadMediaButton()
                            }.padding([.trailing], 85)
                            HStack {
                                ProfileUsernameButton()
                            }.padding([.trailing], 84)
                            HStack {
                                ProfileLiveButton()
                            }.padding([.trailing], 6)
                            HStack {
                                AccountButton()
                            }.padding([.trailing], 12)
                        }
                    }
                })

// I was thinking code like this but all buttons are bunched together on the right-side of  // the screen...

                    ToolbarItem {
                        HStack {
                            ProfileUploadMediaButton()
                            ProfileUsernameButton()
                            ProfileLiveButton()
                            AccountButton()
                        }
                    }

I'm not sure about this, but I think you can add some sort of spacing element in between each one. (I think it's called flexible space) Let me know if it works! — Henry Gustafson
– Henry Gustafson, Commented Feb 5, 2021 at 22:08

Vinoth · Accepted Answer · 2025-03-16 01:54:11Z

13

When you add ToolbarItems, there is an initializer where you can explicitly set the placement of each item. For your case, you would add 3 ToolbarItems, for the left, center, and right. I'd mention that the toolbar is meant to be dynamic, so it may look different on different devices on purpose.

struct ToolbarView: View {
    
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, world!")
            }
            .navigationTitle("Test")
            .toolbar(content: {
                ToolbarItem(placement: .topBarLeading) {
                    Image(systemName: "camera.fill")
                }
                ToolbarItem(placement: .principal) {
                    Text("Username")
                }
                ToolbarItem(placement: .topBarTrailing) {
                    HStack {
                        Image(systemName: "dot.radiowaves.left.and.right")
                        Image(systemName: "heart.fill")
                    }
                }
            })
        }
    }

}

Per the documentation, here are the placement options. I'm guessing that when you don't explicitly add a placement, they default to .automatic.

automatic: The item is placed automatically, depending on many factors including the platform, size class, or presence of other items.
bottomBar: The item is placed in the bottom toolbar. Applies to iOS, iPadOS, and Mac Catalyst.
cancellationAction: The item represents a cancellation action for a modal interface.
confirmationAction: The item represents a confirmation action for a modal interface.
destructiveAction: The item represents a destructive action for a modal interface.
navigation: The item represents a navigation action.
navigationBarLeading: The item is placed in the leading edge of the navigation bar. Applies to iOS, iPadOS, tvOS, and Mac Catalyst.
navigationBarTrailing: The item is placed in the trailing edge of the navigation bar. Applies to iOS, iPadOS, tvOS, and Mac Catalyst.
primaryAction: The item represents a primary action.
principal: The item is placed in the principal item section.
ToolbarItemPlacement: The item represents a change in status for the current context.

edited Mar 16 at 1:54

Vinoth

9,8193 gold badges73 silver badges75 bronze badges

answered Feb 5, 2021 at 22:30

nicksarno

4,2851 gold badge19 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roma Kavinskyi Over a year ago

This approach doesn't work anymore. On Xcode 15.2 it causes error: Static method 'buildExpression' requires that 'ToolbarItem<(), some View>' conform to 'View'

Vinoth Mar 16 at 1:55

.navigationBarLeading and .navigationBarTrailing is deprecated, so I updated the answer with a replacement one.

snowskeleton · Accepted Answer · 2024-05-01 18:54:00Z

I was able to modify nicksarno's answer slightly, essentially just converting it to use a trailing closure for content. The key for my problem was that every item in a .toolbar closure needs to be a ToolbarItem. You can't toss in a Spacer(), for example, without enclosing it in a ToolbarItem. Failure to enclose everything properly leads to failure to produce a diagnostic expression

import SwiftUI

struct ToolbarView: View {
    
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, world!")
            }
            .navigationTitle("Test")
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    Text("Left Item")
                }
                
                ToolbarItem {
                    Spacer()
                }
                
                ToolbarItem(placement: .topBarTrailing) {
                    Text("Right Item")
                }
            }
        }
    }
}

Collectives™ on Stack Overflow

How do I arrange SwiftUI Toolbar items?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related