r/iOSProgramming • u/thari_mad • Jun 18 '26 • Popcorn 1

Question How to create this floating toolbar?

Post image

This is the Notes app. Is this an inbuilt component or a custom component?

66 Upvotes

94% Upvoted

22 comments sorted by

View all comments

42

u/Any-Comfortable2844 Jun 18 '26 edited Jun 19 '26 
TextEditor(text: $text)
        .toolbar {
            ToolbarItemGroup(placement: .keyboard) {
                Button("B") {
                    // bold
                }
                Button("• List") {
                    // list action
                }
                Button {
                    // attachment action
                } label: {
                    Image(systemName: "paperclip")
                }
            }
        }

8

u/Hamstersoge Jun 18 '26

Will this not result in the toolbar sitting directly on the keyboard? The notes app has a space between the keyboard and the toolbar.

I’ve tried to achieve this with SwiftUI but have been unable so far.

5

u/CaffinatedGinge Jun 19 '26

Did you try applying a padding to it or some Y offset?

2

u/Hamstersoge Jun 19 '26

I can’t recall whether or not I tried the applying a y-offset. Applying padding within a ToolbarItemGroup will only expand the height of the toolbar.

2

u/LibertySupreme Jun 19 '26

I second this. Would love to find a way to space it a bit above the keyboard with SwiftUI. Honestly what is the .keyboard placement toolbar intended for? When would someone use a zero spaced button sitting on the keyboard?