It’s quite often that a mobile app requires searching capability to query in specific data resources. No doubt a well-designed search UI is fairly important to the user experience of the app. Although Apple provides UISearchViewCotnroller for this specific use, we still want to develop our lighter version search UI with our own visual styles. This search bar UI allows you decouple it easily and reuse it anywhere in your app.
This post is intended for intermediate level Swift developers who create UI for their app programmatically without using storyboard.
Before we start, we separate this search UI development into three piece. For those who already finish this section, you can skip to Part 2.
In this article, we will implement the search bar UI with Material Design widgets and styles. The output of this post is shown below.
The following are the topics we will cover in this post.
- Include fonts and icons
- Set up Material Design widgets
- Declaration and initialization of Searchbar UI
- UI arrangement using AutoLayout
- Write a search bar protocol for delegation
- Functionality of search bar buttons
- Use in MainViewController
Include Fonts and Icons
We would like to use a different font rather than the system default one. If you don’t have any preference in mind, you can download the font here. Follow these steps to make fonts available in your app.
Here we select regular and bold fonts for our final application’s use. Let’s get started to write some code. The first script we need is Extension.swift,add the following lines to manage the fonts we use in the application.
Below are the icons we will be using for developing the search bar. Regarding dimension, we select icons in 32x32, 48x48, and 72x72 (px) dimensions as 1x, 2x and 3x.
Set up Material Design widgets
If you would like to have the Material Design visual effect that I demonstrated above, go to my Github and download all files under WidgetSource, then import them to your project. The files needed are RippleLayer.swift, MaterialButton.swift, MaterialTextField.swift, and WidgetExtensions.swift.
So far you’ve got all necessary visual elements for developing this search bar, Let’s proceed to the real coding section.
Declaration and Initialization of Search Bar UI
Our search bar consists of three main widgets, which are btnLeft(MaterialButton), textInput(MaterialTextField) and btnRight(MaterialButton). The views are aligned horizontally in the search bar, therefore we choose to use a stackView to arrange them. Besides, I add parameters such as cornerRadius, borderWidth, borderColor, foregroundColor, etc. that allow developers to customize the search bar.
All views and parameters required by the search bar are declared above, however, they’re not positioned correctly yet, you may find it a mess while running the code. Thus, we will use AutoLayout to arrange the views in the next section.
UI Arrangement Using AutoLayout
In the previous section, we apply a horizontal stackView to arrange the buttons and text field. Hence, no need to worry about horizontal constraints of them. The constraints that we primarily concern about are the stackViewitself and the width of the buttons. For the stackView, we align four sides of it to the search bar view. Regarding the width of the buttons, we make the width be 80% of its height, which is also the stackView’s height. Nonetheless, the percentage is adjustable, you can change the portion based on your preference.
Write a Search Bar Protocol for Delegation
Let’s take a look again at the below GIF of the search bar to see what are necessary UI changes in responding to user interaction. The SearchbarDelegate is used to expose search bar states for external use, which will be discussed in later topics.
We found that the UI changes have some extent of consistency with the delegate methods of textInput. Therefore, we devise the protocol based on UITextFieldDelegate. We will implement the UI changes in four delegate functions, which are textFieldDidChange, textFieldDidBeginEditing, textFieldDidEndEditing, and textFieldShouldReturn. In the search bar class, add the following code and implement UITextFieldDelegate.
Observing the above GIF, we can find that the left button changes the icon when the textInput become or resign first responder. Thus, we perform these UI changes in textFieldDidBeginEditing and textFieldDidEndEditing functions. In the below code, we use setBtnStates() method to change icons of left and right buttons. Note that I use a tag to record the state of the left button in switchLeftBtn() method so that the icon of the button animates correctly. Of course, you can simply change the icon without animating it. For those who likes the animation, I will include the code of it later.
In each delegation method, we handle the case when the textInputcontains only spaces. That case is considered to be invalid so we want to exclude it from searching. Moreover, we include the textFieldShouldReturn function, which is called when the user click return/done on the keyboard. Although this function isn’t used quite much in this search bar development, it is important later on when we integrate the search bar with search results view to present search UI.
For those who need the code of animation to move up and to move down views, here is the link to download it.
Moving on to configure the UI of the right button, we want it to be able to clear the text of textInput. To achieve that, we have to clarify when to show and hide the button first. Obviously, the button is shown when the textInput is not empty and is hidden when there’s no input. Hence, we have to add a target to the textInput to observe this event. In responder method, perform the UI changes to show/hide the button.
The above code animates the right button. One thing I’d like to mention here is that you may notice there is a DispatchWorkItem called startSearch. It will not be used until we are performing searching. If you only need the UI of this search bar, you can ignore everything relevant to startSearch.
Functionality of Search Bar Buttons
In this section, we discuss about how we enable left and right buttons’ functionality. There are two states when left button is clicked while it acts like a switch to turn on and off searching session. On the other hand, the right button is merely used for clearing the text input. In order to make both buttons functioning, you have to make them observe UITouch events. Below is the code reference.
So far, you’ve made everything of the search bar UI work. Go ahead and run the code. Also feel free to create your own style search bar.
Use in MainViewController
In order to test what we’ve got so far, we have to use the Searchbar in our view controller. The link shows how we use the Searchbar in MainViewController, for your reference.
Additionally, I attach the link to download the entire code here. Remember to checkout to the branch of dev-searchbar.
git clone https://github.com/twho/material-design-searchbar-ios.gitgit checkout dev-searchbar
This is the first article in the series of three articles talking about Search UI. If you like the article you can continue reading Create Material Design Search Results View in iOS — Search UI Part 2/3 and Material Design Search UI in iOS — Search UI Part 3/3.
Also feel free to shoot me an email or comment on the article if you have any questions or anything specific you’d like to discuss.