How can I centre a view when using a large nav title? - swift

Question

I have a search view controller, I'd like to show a loading indicator in the centre of the screen, but as I'm using large title navigation, it appears to be offset but the height of the large nav?
How can I offset this so it is in the true centre of the screen?
I am setting it currently using
tableView.addSubview(searchingView)
searchingView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
searchingView.centerXAnchor.constraint(equalTo: tableView.centerXAnchor),
searchingView.centerYAnchor.constraint(equalTo: tableView.centerYAnchor)
])
My view controller is below
final class SearchViewController: UITableViewController {
private var searchLoadingController: SearchLoadingController?
private var searchController: UISearchController?
convenience init(searchLoadingController: SearchLoadingController, searchController: UISearchController) {
self.init(nibName: nil, bundle: nil)
self.searchLoadingController = searchLoadingController
self.searchController = searchController
}
override func viewDidLoad() {
super.viewDidLoad()
configureUI()
}
}
extension SearchViewController: UISearchResultsUpdating {
func updateSearchResults(for searchController: UISearchController) {
guard let text = searchController.searchBar.text, !text.isEmpty else { return }
searchLoadingController?.search(query: text)
}
}
extension SearchViewController: SearchErrorView {
func display(_ viewModel: SearchErrorViewModel) { }
}
private extension SearchViewController {
func configureUI() {
navigationController?.navigationBar.prefersLargeTitles = true
navigationItem.searchController = searchController
tableView.tableFooterView = UIView(frame: .zero)
searchController?.searchBar.searchBarStyle = .minimal
searchController?.searchResultsUpdater = self
searchController?.obscuresBackgroundDuringPresentation = false
if let searchingView = searchLoadingController?.view {
tableView.addSubview(searchingView)
searchingView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
searchingView.centerXAnchor.constraint(equalTo: tableView.centerXAnchor),
searchingView.centerYAnchor.constraint(equalTo: tableView.centerYAnchor)
])
}
}
}

Answer 1

If you really want the activity indicator in the center of the screen you need to do some calculations:
func addActivityIndicatorToCenterOfScreen() {
let screenHeight = UIScreen.main.bounds.size.height
let activityIndicatorHeight = searchingView.bounds.size.height
let safeAreaBottomInset = tableView.safeAreaInsets.bottom
let yOffset = (screenHeight - activityIndicatorHeight) / 2 - safeAreaBottomInset
tableView.addSubview(searchingView)
searchingView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
searchingView.centerXAnchor.constraint(equalTo: tableView.centerXAnchor),
searchingView.bottomAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.bottomAnchor, constant: -yOffset),
])
}
Also ensure that you configure the constraints after your views are laid out. viewDidAppear is a good place for that. This is necessary because we need to know the size of the tableView and the safe area.
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
addActivityIndicatorToCenterOfScreen()
}
Now for some explanation. tableView.safeAreaLayoutGuide includes the portion of the tableView between the navigation bar and the notch at the bottom of the screen. tableView.safeAreaInsets.bottom gives us the height of the notch at the bottom of the screen. The yOffset is the center of the screen minus half the height of the activity indicator minus the height of notch of the bottom of the screen. We will offset the bottom of the activity indicator from the bottom of the safe area. That will place the center of the activity indicator at the center of the screen.
If I were you, I would center the activity indicator between the navigation bar and the top of the notch. It's way cleaner and you can do this in viewDidLoad:
func addActivityIndicatorCenteredBetweenNavBarAndSafeAreaBottom() {
tableView.addSubview(searchingView)
searchingView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
searchingView.centerXAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.centerXAnchor),
searchingView.centerYAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.centerYAnchor),
])
}