Handy Guideline On Implementing Search Bar In iOS7 Using Storyboard

Handy Guideline On Implementing Search Bar In iOS7 Using Storyboard

0 25090
Search Bar In iOS7

Unlike a wide range of Android and BlackBerry apps, iOS apps have been successful in grabbing the attention of a larger target audience. iOS app developers are making continuous efforts to come up with something or the other that can serve as a handy tool for effective business promotion for entrepreneurs who’ve chosen iOS for building their mobile business applications. Search bar is an indispensable component of every mobile app and the same holds true even for the iPhone apps. While the concept of adding/implementing a Search bar in iOS7 appears to be quite simple, in practice it can actually serve as a huge pain for the iOS7 app developers. It is because of this that I decided to take out time and share with you some easy-to-follow steps that would allow you to implement the search bar using a storyboard.

Search Display Controller – What it’s all about?

Search Display Controller i.e. the UISearchDisplayController class allows you to manage the search functionality within the iOS7 application. Whether it’s about managing the display of the search bar or the table view, Search Display Controller serves as a handy tool for performing both the tasks efficiently. For your iOS7 app, you can either choose to create the search display controller programmatically or opt for adding it into your app using Storyboard. Here’s how the latter approach can be followed:

Step 1 – Go to Storyboard option, drag and add the “Search Bar” and Search Display Controller” that’s available right below the navigation bar of the same app’s View Controller.

Step 2 – Try running the app to see how it functions. Thus, without implementing any code, you’ve already added a search bar. You can further choose to tap on this search bar to get to the search interface.

Delegates that allow you to interact with search bar and the displayed search results

You must already be familiar with the fact that the search results obtained as a result of search functionality are displayed in a table view format, which is being created by the search display controller. Here’s a list of delegates that allow you to interact with the search bar as well as the search result:

  • The search result table view’s delegate that’s used for responding to the user’s selection of a search item.
  • Search results table view’s data source that’s needed for providing the data for search result table
  • The search bar’s delegate that’s responsible for responding to changes in the search criteria.
  • The search display controller’s delegate that responds to the events such as when the search has started or when it ends or when the search interface is displayed or not shown.

Incorporating a Search bar into an existing mobile application

There might be situations wherein you may want to add a search bar into an existing table view based mobile app. In this post, I’ll be taking the example of a WorldFacts app that would be used for creating dynamic prototype table view cells with storyboards. This app would display the list of countries along with some related data including the population etc. These additional details would be displayed using the table view controller class called UYLCountryTableViewController that would be implemented within the storyboard. Here’s the stepwise procedure for adding a search bar into an existing app:

Step 1– Alter the UYLCountryTableViewController class to ensure that it conforms to the UISearchDisplayDelegate and UISearchBarDelegate protocols. The code used for the same is mentioned below:

@interface UYLCountryTableViewController () <NSFetchedResultsControllerDelegate, UISearchDisplayDelegate, UISearchBarDelegate>

Step 2-Find the combined Search Bar and Search Display Controller objects in the available object library

Step 3– Now, drag the objects onto the table view in order to position the search bar above the prototype cells as shown in the below screen-shot(The search bar is being displayed in red):

Step 4– Let the Interface builder take care of connecting all the outlets from both, the search bar as well as the search display controller with the help of delegate called the table view controller.

Search Bar Configuration- How to go ahead with it?

It is recommended to use a scope bar for configuring the search bar that needs to be included within the application. In addition to this, there’s also a segmented control that can be effectively used for controlling the scope of search. All you need to do is simply enable the scope bar and the two entered scopes into the Interface Builder.

UISearchDisplayDelegate methods implementation- How to do it?

In order to trigger the search, you need to implement two individual methods of the UISearchDisplayDelegate protocol for detecting as to when both the search text as well as the search scope will get modified. Here’s how the first method works:

Method No.1-It deals with making changes to the search text

Here’s the code snippet used for the same:

- (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString
  UYLWorldFactsSearchScope scopeKey = controller.searchBar.selectedScopeButtonIndex;
  [self searchForText:searchString scope:scopeKey];
  return YES;

You can call this method along with the search string that has been entered by the user. Moreover, you can even retrieve the search bar scope via the search display controller, followed by calling the searchForText:scope: method. On calling this method, you’ll receive a “YES” that would indicate that the search results table view must be reloaded in order to display the new search results.

Method No.2- It deals with making changes to the search scope

Here’s the code snippet that needs to be used:

- (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchScope:(NSInteger)searchOption
  NSString *searchString = controller.searchBar.text;
  [self searchForText:searchString scope:searchOption];
  return YES;

From the above coding, it’s visible that we’ve passed the search scope in the searchOption parameter and also need to retrieve the search term from the respective search bar. Similar to the method No.1, the value returned here is a “YES” indicating that the results table needs to be reloaded.

Wrapping Up

So, that was a bit long post describing the technique of implementing a Search bar in iOS7 using Storyboard. I’m sure if you’re an app developer then each and every detail mentioned within this blog would encourage you to delve into the implementation of search bar within the apps that are compatible with iOS7 mobile platform.

Author Bio: Victoria Brinsley is a skilled application developer working with Appsted Ltd – one of the renowned mobile apps development services providing company. In case, you are willing to avail a detailed information about the related technology, feel free to clear you queries with her.



Leave a Reply