Instagram like Animated Searchbar in SwiftUI
Whenever I was using Instagram I used to think I want to make the animated searchBar like that. Finally, I set down and did it.
Let's dive into the code and see how it works.
The first thing we do is create a SearchBarView
struct. This view has three state variables: searchText
, isEditing
, and currentPlaceholderIndex
. searchText
stores the user input text, isEditing
tracks whether the user is currently editing the search bar, and currentPlaceholderIndex
keeps track of which placeholder text to display.
swiftCopy codestruct SearchBarView: View {
@State private var searchText = ""
@State private var isEditing = false
@State private var currentPlaceholderIndex = 0
Next, we create an array called placeholders
that contains the different placeholder texts that we want to display.
swiftCopy codelet placeholders = ["Search for Books", "Search for Dress", "Search for Place", "Search for Food"]
We then create a timer that will fire every 3 seconds and switch to the next placeholder text.
swiftCopy codeprivate let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
Now, let's move on to the body of the view. We start by creating a ZStack
that will hold our search bar.
swiftCopy codevar body: some View {
ZStack(alignment: .leading) {
We create a Rectangle
that will act as the background of the search bar. We give it a gray color and round the corners with a corner radius of 10.
swiftCopy codeRectangle()
.foregroundColor(Color(UIColor.systemGray6))
.frame(height: 40)
.cornerRadius(10)
Next, we create an HStack
that will hold the magnifying glass icon and the TextField
. We start by adding the magnifying glass icon, which is an SF Symbol. We color it gray to match the color of the text field.
swiftCopy codeHStack {
Image(systemName: "magnifyingglass")
.foregroundColor(Color(UIColor.systemGray2))
We then add the TextField
. We pass in the current placeholder text as the default text, bind it to the searchText
state variable, and set the isEditing
state variable based on whether the user is currently editing the text field. We also set the text color to primary.
swiftCopy codeTextField(placeholders[currentPlaceholderIndex], text: $searchText, onEditingChanged: { isEditing in
self.isEditing = isEditing
})
.foregroundColor(.primary)
Finally, we add an onReceive
modifier to the TextField
that listens to the timer we created earlier. Whenever the timer fires, we switch to the next placeholder text with a simple modulo operation. We wrap the operation with a withAnimation
block to animate the transition between placeholder texts.
swiftCopy code.onReceive(timer) { _ in
withAnimation {
currentPlaceholderIndex = (currentPlaceholderIndex + 1) % placeholders.count
}
}
Lastly, we add some padding to the HStack
and the ZStack
to give the search bar some breathing room.
swiftCopy code.padding(.horizontal, 24)
}
.padding(.horizontal)
}
And that's it! With just a few lines of code, we've created an animated search bar that will keep your users engaged and entertained. So go ahead and add this to your app and watch your users smile!
Final Result -
Check the full code here - raaulc/AnimatedSearchBar (github.com)