I’m attempting to show a search bar straight contained in the navigation bar (not beneath it), so it stays seen on a regular basis — much like Telegram’s design.
Once I assign the search bar to the navigation bar’s titleView, it really works effective at first.
Nevertheless, once I push one other view controller after which navigate again, the search bar’s background fades out (turns into clear) and doesn’t restore correctly.
Right here’s the minimal reproducer:
class SearchViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, UISearchResultsUpdating {
personal let tableView = UITableView()
personal var searchController: UISearchController!
personal let allItems = ["Apple", "Banana", "Orange", "Pineapple", "Mango", "Grapes", "Watermelon"]
personal var filteredItems: [String] = []
override func viewDidLoad() {
tremendous.viewDidLoad()
title = "Fruits"
view.backgroundColor = .systemBackground
definesPresentationContext = true
// MARK: - Setup TableView
view.addSubview(tableView)
tableView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
tableView.topAnchor.constraint(equalTo: view.topAnchor),
tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
tableView.dataSource = self
tableView.delegate = self
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
// MARK: - Setup Search Controller
searchController = UISearchController(searchResultsController: nil)
searchController.searchResultsUpdater = self
searchController.obscuresBackgroundDuringPresentation = false
searchController.searchBar.placeholder = "Search fruits"
navigationItem.titleView = searchController.searchBar
navigationItem.hidesSearchBarWhenScrolling = false
filteredItems = allItems
}
// MARK: - TableView Information Supply
func tableView(_ tableView: UITableView, numberOfRowsInSection part: Int) -> Int {
return filteredItems.rely
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
cell.textLabel?.textual content = filteredItems[indexPath.row]
return cell
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let fruit = filteredItems[indexPath.row]
self.navigationController?.pushViewController(FavoritesViewController(fruit: fruit), animated: true)
}
// MARK: - UISearchResultsUpdating
func updateSearchResults(for searchController: UISearchController) {
guard let textual content = searchController.searchBar.textual content, !textual content.isEmpty else {
filteredItems = allItems
tableView.reloadData()
return
}
filteredItems = allItems.filter { $0.lowercased().accommodates(textual content.lowercased()) }
tableView.reloadData()
}
}
// MARK: - One other Instance Display screen
class FavoritesViewController: UIViewController {
var fruit: String = "Favorites"
init(fruit: String) {
self.fruit = fruit
tremendous.init(nibName: nil, bundle: nil)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been applied")
}
override func viewDidLoad() {
tremendous.viewDidLoad()
title = fruit
view.backgroundColor = .systemBlue
}
}
// MARK: - Root TabBarController
class MainTabBarController: UITabBarController {
override func viewDidLoad() {
tremendous.viewDidLoad()
// Create tabs
let searchVC = SearchViewController()
let favoritesVC = FavoritesViewController(fruit: "Favooor")
// Embed in navigation controllers
let nav1 = UINavigationController(rootViewController: searchVC)
let nav2 = UINavigationController(rootViewController: favoritesVC)
// Tab bar gadgets
nav1.tabBarItem = UITabBarItem(title: "Search", picture: UIImage(systemName: "magnifyingglass"), tag: 0)
nav2.tabBarItem = UITabBarItem(title: "Favorites", picture: UIImage(systemName: "star"), tag: 1)
viewControllers = [nav1, nav2]
}
}
The problem:
When navigating again from FavoritesViewController → SearchViewController,
the searchBar’s background fades and appears like this.
Within the first picture, the search bar is white and distinct from its surrounding background whereas this differentiation is lacking within the second picture.