Blog

Inside the Minds of the Machine

Building Better Systems, tvOS

tvOS Swift 2.0: Displaying Search Container Under Tab Bar

Apple released the 4th generation Apple TV on October 30, 2015, packaged with tvOS 9.0.

On December 8, 2015, tvOS 9.1 was released.

One of the most exciting things that happened during 2015 was Apple’s announcement of the new Apple TV and the public release of tvOS SDK. With the tvOS SDK being available, third-party developers can finally develop apps for Apple TV. This is a game changer for the future of television and will have a significant impact on the media and entertainment industry.

The new tvOS is similar in terms of development for iOS with a few distinctions:

  • Not all UI objects are available for tvOS.
  • Web views are not allowed for tvOS.
  • You must use tvOS specific frameworks and libraries.
  • UISearchController object is not available in the Storyboard.

One of the most exciting things for a developer is a new framework designed for a new programming language (Swift was introduced on June, 2014). However, a new framework and programming language lacks a strong online community presence. This is troublesome for a developer who is trying to get their feet wet in the new environment.

The most unpleasant experiences for a user with the new Apple TV is the native keyboard feature. Until the Siri API becomes publicly available for internal searching, we are stuck with the passive-aggressive keyboard and the horrendous user experience that comes along with it.

In this tutorial, I am going to demonstrate how to programmatically create a UISearchController displaying search results on the same UICollectionView beneath the UITabBarController in a UINavigationController in perfect harmony using Swift 2.0 and tvOS 9.1.

The native navigation menu for Apple TV apps is located on the top of the screen. This is vise-versa for IOS apps, positioned on the bottom by default.

The navigation menu allows users to interact between each view by swiping horizontally to get to the next scene.

During my development process, I’ve searched in various forums and gazed at hundred lines of sample code and documentation in hope of implementing a simple search controller to display under the tab bar. After spending countless hours pulling my hair out trying to get this functionality to work in Swift, success came during a coffee break while watching a television ad about containers. Yes, the key to getting this to work was the search container. I’ve decided to give back to the community and share this code with any poor souls who might be struggling to figure this out, too.

The end results will resemble similarly like these screen grabs:

navTabBar
searchKeyboard
appDelegate2

  1. Drag the UITabBarController object over from the storyboard and create a segue for each scene as an individual tab bar item.
  2. The destination view class name is SearchResultsViewController.
  3. In the AppDelegate.swift:
    Create a method and call it searchContainerDisplay.
 func searchContainerDisplay(){
 
        let tabBarController = self.window?.rootViewController as! UITabBarController

        let resultsController = UIStoryboard(name: "Main", bundle: nil).instantiateViewControllerWithIdentifier("SearchResultsViewController") as! SearchResultsViewController
        let searchController = UISearchController(searchResultsController: resultsController)
        searchController.searchResultsUpdater = resultsController
        
        searchController.obscuresBackgroundDuringPresentation = true
        searchController.hidesNavigationBarDuringPresentation = false
        
        //Placeholder text
        let searchPlaceholderText = NSLocalizedString("Search Title", comment: "")

        //SearchBar appearance
        searchController.searchBar.placeholder = searchPlaceholderText
        searchController.searchBar.tintColor = UIColor.blackColor()
        searchController.searchBar.barTintColor = UIColor.blackColor()
        searchController.searchBar.searchBarStyle = .Minimal
        searchController.searchBar.keyboardAppearance = UIKeyboardAppearance.Dark
        
        let searchContainerViewController = UISearchContainerViewController(searchController: searchController)
        let navController = UINavigationController(rootViewController: searchContainerViewController)

        if var tbViewController = tabBarController.viewControllers {
             
             //Append the search container to the last tab bar item
             tbViewController.append(navController)
        
             tabBarController.viewControllers = tbViewController
             self.window?.rootViewController = tabBarController
             self.window?.makeKeyAndVisible()    
        }

 }

4. Lastly, initiate the method inside the didFinishLaunchingWithOptions.

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    
    	searchContainerDisplay()
    
    }    

If initiating the search container in the AppDelegate.swift is not an option for you, you can modify the searchContainerDisplay() method and implement it in the UITabBarViewController class instead.

Revised Feb. 23rd, 2017 – Continue reading tvOS Swift 3.0: Displaying Search Container Under Tab Bar PART 2 for an updated version.

 


IEG and WNET are not responsible for your or any third party’s use of code from this tutorial. All the information on this website is published in good faith “as is” and for general information purposes only; WNET and IEG make no representation or warranty regarding reliability, accuracy, or completeness of the content on this website, and any use you make of this code is strictly at your own risk.