Create Material Design Search Bar in iOS — Search UI Part 1/3

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.

1. Include fonts and icons
2. Set up Material Design widgets
3. Declaration and initialization of Searchbar UI
4. UI arrangement using AutoLayout
5. Write a search bar protocol for delegation
6. Functionality of search bar buttons