{"id":35307,"date":"2018-02-12T15:00:25","date_gmt":"2018-02-12T23:00:25","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=35307"},"modified":"2019-04-04T08:37:03","modified_gmt":"2019-04-04T15:37:03","slug":"add-search-bar-xamarin-ios-11","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/add-search-bar-xamarin-ios-11\/","title":{"rendered":"Add a Search Bar to Your Xamarin Apps in iOS 11"},"content":{"rendered":"

\t\t\t\tAs described in the Go Large with iOS 11<\/a> 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<\/a> provide a good overview of search bars.<\/p>\n

Implementing a Search Bar<\/h2>\n

Check out the Large Titles Sample<\/a> 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:<\/p>\n

\"A<\/p>\n

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.<\/p>\n

Searchable View Controller<\/h3>\n

In this example, the searchable view controller is represented in code as the LargeTitlesViewController<\/code> class, which is defined by partial classes<\/a> in two files: LargeTitlesViewController.cs<\/strong><\/a> and LargeTitlesViewController+Search.cs<\/strong><\/a>.<\/p>\n

UISearchController<\/h3>\n

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

In LargeTitlesViewController+Search.cs<\/strong>, the ViewDidLoad<\/code> method instantiates the UISearchController<\/code>:<\/p>\n

\npublic override void ViewDidLoad()\n{\n    \/\/ ...\n    var search = new UISearchController(searchResultsController: null)\n    {\n        DimsBackgroundDuringPresentation = true\n    };\n    \/\/ ...\n}\n<\/code><\/pre>\n
Setting DimsBackgroundDuringPresentation<\/code><\/a> to true<\/code> 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:<\/p>\n
\"Dimming<\/p>\n
Search Results View Controller<\/h3>\n
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<\/code> parameter of the UISearchController<\/code> constructor<\/a> or set this value to null<\/code> to indicate that search results should be displayed using the searchable view controller itself.<\/p>\n
Search Results Updater<\/h3>\n
When the UISearchController<\/code> needs to kick off a search for a user’s query, it calls the UpdateSearchResultsForSearchController<\/code><\/a> method on its SearchResultsUpdater<\/code><\/a>. This property implements the IUISearchResultsUpdating<\/code><\/a> interface, which has only one method:<\/p>\n
\nvoid UpdateSearchResultsForSearchController (UISearchController searchController);\n<\/code><\/pre>\n
LargeTitlesViewController<\/code> implements this interface, so it sets itself as the UISearchController<\/code>‘s SearchResultsUpdater<\/code> and implements the required method:<\/p>\n
\npublic override void ViewDidLoad()\n{\n    \/\/ ...\n    search.SearchResultsUpdater = this;\n    \/\/ ...\n}\n\npublic void UpdateSearchResultsForSearchController(UISearchController searchController)\n{\n    var find = searchController.SearchBar.Text;\n    if (!String.IsNullOrEmpty(find))\n    {\n        searchResults = titles.Where(t => t.ToLower().Contains(find.ToLower())).Select(p => p).ToArray();\n    }\n    else\n    {\n        searchResults = null;\n    }\n    TableView.ReloadData();\n}\n<\/code><\/pre>\n
This search implementation uses LINQ<\/a> to search the list of titles, saves the results in the searchResults<\/code> 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.<\/p>\n
NavigationItem<\/h3>\n
Prior versions of iOS required developers to manually position the UISearchController<\/code>‘s search bar in their application’s interface. In iOS 11, setting the SearchController<\/code><\/a> property on a view controller’s NavigationItem<\/code><\/a> places a search bar in the navigation bar. For example, in LargeTitlesViewController+Search.cs<\/strong>:<\/p>\n
\npublic override void ViewDidLoad()\n{\n    \/\/ ...\n    NavigationItem.SearchController = search;\n    \/\/ ...\n}\n<\/code><\/pre>\n
Since SearchController<\/code> is set on NavigationItem<\/code>, the search bar will only appear if your searchable view controller is contained by a navigation controller. In the Large Titles<\/em> sample app, Main.storyboard<\/strong> wraps LargeTitlesViewController<\/code> in a navigation controller.<\/p>\n
Other Useful Properties<\/h2>\n
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:<\/p>\n
UISearchController<\/h3>\n