On the iPhone Duo the standard "Edit" button for navigation bars is a text-based button, and text-based buttons are not pushed to the vertical toolbars on the Duo. This looks sometimes silly, if it is the only remaining button that can not be placed in the vertical toolbar and which has the result that an almost empty horizontal navigation bar must be kept visible as well.
So I guess it would be good idea to have an icon-based replacement for the Editor button to avoid having two toolbars on the Duo. Is there a best practice for the icon to pick for such an edit button? Would be "square.and.pencil" (SF Symbols) a good choice? Or better the "pencil .circle", because the "square" one is often used for text-based input? Anything better?
Hello @elementarteilchen,
With 27.1, a toolbar item with an icon goes vertical, a text-only item stays horizontal, and custom or complex views stay horizontal by default.
You can override this behavior with .axisBehavior(.verticalPreferred), which lets a custom view go vertical, or .axisBehavior(.horizontalOnly) – which keeps an item horizontal. For example, one that swaps between a symbol and text, like a custom edit button.
As for best practices when selecting icons, see Standard icons. That table doesn't list an Edit icon, however it does list square.and.pencil as Compose and pencil as Rename.
The Toolbars HIG says to prefer symbols over text "except for actions like edit that aren't well-represented by symbols," and to prefer symbols without borders, so pencil.circle runs against that guidance.
However if you want to make a custom edit button, here is the pencil / checkmark suggestion by @RickMaddy, it is pinned to the horizontal toolbar using .axisBehavior(.horizontalOnly):
struct RootView: View {
@State private var editMode: EditMode = .inactive
var body: some View {
NavigationStack {
ContentView()
.environment(\.editMode, $editMode)
.toolbar {
ToolbarItem {
customEditButton
}
.axisBehavior(.horizontalOnly)
}
}
}
// Custom pencil edit button
private var customEditButton: some View {
Button(role: editMode.isEditing ? .confirm : nil) {
withAnimation {
editMode = editMode.isEditing ? .inactive : .active
}
} label: {
if editMode.isEditing {
Label("Done", systemImage: "checkmark")
} else {
Label("Edit", systemImage: "pencil")
}
}
}
}
For a full deep dive on toolbars on the iPhone Duo, see Raise the bar with iPhone Duo Feel free to experiment with the configurations.
@RickMaddy, Try this code and let me know how it works for you.
As for enhancement requests towards EditButton, please file an enhancement request using Feedback Assistant. Its a good suggestion and I'm curious what the relevant engineering teams take on the matter is. Once filed, reply with the FB number, I will make sure that report is routed to that team.
I hope this information is helpful.
Travis
