Add a Search Bar to Your Xamarin Apps in iOS 11

As described in the Go Large with iOS 11 post, view controllers in iOS 11 can use large titles to improve the clarity of an app’s user interface. To complement a view controller’s large title, it’s also possible to add a search bar, which allows users to quickly find content without navigating to a new screen. Widely used in iOS applications, Apple’s Human Interface Guidelines provide a good overview of search bars.

Implementing a Search Bar

Check out the Large Titles Sample to see an example of an iOS 11 view controller with a large title and a search bar. Start the app and swipe down to reveal the search bar:

Entering a term in the search bar initiates a search through the book list for relevant results. The various classes and methods that enable a search bar are described below.

Searchable View Controller

In this example, the searchable view controller is represented in code as the LargeTitlesViewController class, which is defined by partial classes in two files: LargeTitlesViewController.cs and LargeTitlesViewController+Search.cs.

UISearchController

iOS uses the UISearchController class to tie together the various bits that must cooperate to enable a search bar. UISearchController creates the search bar UI and automatically calls the method to run a search for a user’s query.

In LargeTitlesViewController+Search.cs, the ViewDidLoad method instantiates the UISearchController:

public override void ViewDidLoad()
{
    // ...
    var search = new UISearchController(searchResultsController: null)
    {
        DimsBackgroundDuringPresentation = true
    };
    // ...
}

Setting DimsBackgroundDuringPresentation to true dims the background of the primary view controller while a user interacts with the search bar. This screenshot shows the difference between a dimmed and a normal background:

Search Results View Controller

Search results can be visualized in many ways. Some data should be shown as a list, while other data might best be represented on a map. You can pass a view controller for displaying search results to the searchResultsController parameter of the UISearchController constructor or set this value to null to indicate that search results should be displayed using the searchable view controller itself.

Search Results Updater

When the UISearchController needs to kick off a search for a user’s query, it calls the UpdateSearchResultsForSearchController method on its SearchResultsUpdater. This property implements the IUISearchResultsUpdating interface, which has only one method:

void UpdateSearchResultsForSearchController (UISearchController searchController);

LargeTitlesViewController implements this interface, so it sets itself as the UISearchController‘s SearchResultsUpdater and implements the required method:

public override void ViewDidLoad()
{
    // ...
    search.SearchResultsUpdater = this;
    // ...
}

public void UpdateSearchResultsForSearchController(UISearchController searchController)
{
    var find = searchController.SearchBar.Text;
    if (!String.IsNullOrEmpty(find))
    {
        searchResults = titles.Where(t => t.ToLower().Contains(find.ToLower())).Select(p => p).ToArray();
    }
    else
    {
        searchResults = null;
    }
    TableView.ReloadData();
}

This search implementation uses LINQ to search the list of titles, saves the results in the searchResults field, and reloads the table view’s data. When this happens, the table view will display either the search results or the entire book list.

NavigationItem

Prior versions of iOS required developers to manually position the UISearchController‘s search bar in their application’s interface. In iOS 11, setting the SearchController property on a view controller’s NavigationItem places a search bar in the navigation bar. For example, in LargeTitlesViewController+Search.cs:

public override void ViewDidLoad()
{
    // ...
    NavigationItem.SearchController = search;
    // ...
}

Since SearchController is set on NavigationItem, the search bar will only appear if your searchable view controller is contained by a navigation controller. In the Large Titles sample app, Main.storyboard wraps LargeTitlesViewController in a navigation controller.

Other Useful Properties

There are a number of other properties that can help improve the in app search experience for your users. Below are a few of our favorites:

UISearchController

• HidesNavigationBarDuringPresentation hides the navigation bar during a search. Defaults to true.

UINavigationItem

• HidesSearchBarWhenScrolling hides the search bar when a user scrolls the searchable view controller. It defaults to true.

UISearchController’s SearchBar

• Placeholder contains hint text that is displayed when there is no other text in the search bar.

Wrapping Up

To complement your view controller’s large titles, add search bars that will improve the clarity of your app’s user interface. Download the LargeTitles sample from GitHub, and check out the Xamarin Developer Center for more information about iOS 11 features.

Discuss this post on the forums!