SwiftUI and Custom Toolbar in iOS Development with Swift

iOS Guru
2 min readAug 17, 2023

SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms. It allows developers to quickly build user interfaces for iOS, iPadOS, macOS, watchOS, and tvOS. With SwiftUI, developers can create custom toolbars to take advantage of the platform’s powerful features. This article will discuss how to create a custom toolbar in iOS development with Swift.

Creating a Custom Toolbar with SwiftUI

Creating a custom toolbar with SwiftUI is easy and straightforward. To do this, first create a new SwiftUI view and give it a name. Then, add the following code to the view:

struct Toolbar: View {
var body: some View {
HStack {
Text("Toolbar")
.font(.title)
.padding(.leading)
Spacer()
Image(systemName: "gear")
.padding(.trailing)
}
.frame(height: 50)
.background(Color.blue)
}
}

This code creates a toolbar with a title and an image. The title is set to “Toolbar” and the image is set to a gear icon. The toolbar is given a height of 50 and a blue background color.

The toolbar can be customized further by adding additional elements. For example, a search bar can be added by adding the following code to the view:

HStack {
Text("Toolbar")
.font(.title)
.padding(.leading)
Spacer()
Image(systemName: "gear")
.padding(.trailing)
SearchBar()
}

The SearchBar() view is a custom view that can be created by adding the following code to the view:

struct SearchBar: View {
@State private var searchText = ""

var body: some View {
HStack {
TextField("Search", text: $searchText)
.padding(.leading)
Button(action: {
// Perform search
}) {
Image(systemName: "magnifyingglass")
}
.padding(.trailing)
}
.frame(height: 50)
.background(Color.blue)
}
}

This code creates a search bar with a text field and a search button. When the search button is tapped, the searchText state variable is used to perform the search.

The toolbar can also be customized further by adding additional elements such as buttons, sliders, and other views. The possibilities are endless.

Conclusion

SwiftUI makes it easy to create custom toolbars for iOS apps. With SwiftUI, developers can quickly create custom toolbars with text, images, and other views. The possibilities are endless.

--

--