V V
V V

Reputation: 822

TVOS : Adjust the position of searchbar in UISearchViewController

I am developing an TVOS app. I use below code to implement search feature in UITabBarController. The issue when tabbar is displayed then search bar is covered by tabbar. See below screenshots. is it possible to move searchBar position down if tabbar gets displayed?

enter image description here

let searchViewController = VVSearchViewController()
    let searchController = UISearchController(searchResultsController: searchViewController)
    searchViewController.searchViewController = searchController

    searchController.searchResultsUpdater = searchViewController

    searchController.obscuresBackgroundDuringPresentation = true

    let searchPlaceholderText = "Search"
    searchController.searchBar.placeholder = searchPlaceholderText
    searchController.searchBar.tintColor = UIColor.black
    searchController.searchBar.barTintColor = UIColor.black
    searchController.searchBar.searchBarStyle = .minimal
    searchController.searchBar.keyboardAppearance = .dark

    searchController.view.backgroundColor = UIColor.black
    searchController.definesPresentationContext = true;
    UISearchContainerViewController(searchController: searchController)

Upvotes: 2

Views: 1649

Answers (2)

spasbil
spasbil

Reputation: 279

It is possible. It took me a while but my idea was to add the search controller into a "container" controller with constraint at the top. Nothing will appear if you try adding UISearchController as child view controller into the container. UISearchContainerViewController doesn't work as well. But a navigation controller with UISearchContainerViewController as root works. Here is my code:

// Create the search controller and it's results controller
        let resultsController = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "SearchResultsViewController") as! SearchResultsViewController
        let searchController = UISearchController(searchResultsController: resultsController)
        searchController.searchResultsUpdater = resultsController
        
// Customize it
        UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).defaultTextAttributes = [.foregroundColor: UIColor.text]

        searchController.searchBar.placeholder = NSLocalizedString("Search", comment: "")
        searchController.searchBar.tintColor = .text
        searchController.searchBar.barTintColor = .text
        searchController.searchBar.searchBarStyle = .minimal
        searchController.searchBar.keyboardAppearance = .dark

// Embed it in UISearchContainerViewController
        let searchContainerViewController = UISearchContainerViewController(searchController: searchController)
// Make UISearchContainerViewController root controller of a navigation controller
        let navController = UINavigationController(rootViewController: searchContainerViewController)
// And a container to hold everything
        let containerViewController = UIViewController()
            
// Do a standard child add of navController into containerViewController
        navController.loadViewIfNeeded()
        navController.viewWillAppear(false)
        navController.willMove(toParent: containerViewController)
        
        containerViewController.view.addSubview(navController.view)
        navController.view.frame = containerViewController.view.bounds

// Add your constraints. In this case I just want the search bar to be 150 px down.
        NSLayoutConstraint.activate([
            navController.view.topAnchor.constraint(equalTo: containerViewController.view.safeAreaLayoutGuide.topAnchor, constant: 150),
            navController.view.leftAnchor.constraint(equalTo: containerViewController.view.safeAreaLayoutGuide.leftAnchor),
            navController.view.bottomAnchor.constraint(equalTo: containerViewController.view.safeAreaLayoutGuide.bottomAnchor),
            navController.view.rightAnchor.constraint(equalTo: containerViewController.view.safeAreaLayoutGuide.rightAnchor)
        ])        containerViewController.addChild(navController)

        containerViewController.addChild(navController)
        navController.didMove(toParent: containerViewController)
        navController.viewDidAppear(false)

// And from here use the containerViewController as normal to display a search into your app.

Note: Without passing the viewDidAppear on the navController this will not work. Note 2: I tested this on tvOS 13 and 14 only.

Upvotes: 2

David Cordero
David Cordero

Reputation: 816

You can find exactly the same case in the tab Search of the application "App Store".

This is because in tvOS the content of a viewController is not supposed to react to the visibility of the tab bar. The tab bar is presented instead on top of it, overlapping.

tvOS Human Interface GuideLines for Tab Bars: https://developer.apple.com/tvos/human-interface-guidelines/interface-elements/tab-bars/

Upvotes: 0

Related Questions