Adjust position of bar button item when using large titles with iOS 11

Question

I am using the large title navbar with iOS 11, but when I add a bar button item it looks weird positioned in the same location as the original title navbar. I would like to move

Answer 1

I made some digging and I finally came up with quite the same behavior as in the Messages app (meaning the button goes under the navigationBar and not above). The only missing part is the nice animation/blur thing which happens when the UIBarButtonItem appears…

Fair Warning : my current solution is using a private class (named _UINavigationBarLargeTitleView) and Apple could reject your app for this very reason…

// Make sure you have a `navigationBar`
guard let navigationBar = navigationController?.navigationBar else {
    return
}
// Make sure you get the correct class from the string, the class itself is not exposed…
guard let UINavigationBarLargeTitleView = NSClassFromString("_UINavigationBarLargeTitleView") else {
    return
}
// Then, you need to find the subview of type `_UINavigationBarLargeTitleView` :
navigationBar.subviews.forEach { subview in
    if subview.isKind(of: UINavigationBarLargeTitleView.self) {
        // If you have it, add whatever button you want (some example below)
        subview.addSubview(largeTitleViewRightBarButton)

        // Constrain it as you want
        NSLayoutConstraint.activate([
            largeTitleViewRightBarButton.bottomAnchor.constraint(equalTo: subview.bottomAnchor, constant: -10),
            largeTitleViewRightBarButton.trailingAnchor.constraint(
                equalTo: subview.trailingAnchor,
                constant: -view.directionalLayoutMargins.trailing
            )
        ])
    }
}

// Finally, the magic happens with one scrollView delegate method :
override func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView.contentOffset.y >= -103 { // Moving up
        navigationItem.rightBarButtonItem = rightBarButtonItem
    } else { // Moving down
        navigationItem.rightBarButtonItem = nil
    }
}

Here is how I made my buttons :

private(set) lazy var image: UIImage? = {
    let config = UIImage.SymbolConfiguration(pointSize: 28, weight: .semibold, scale: .default)
    let image = UIImage(systemName: "magnifyingglass.circle.fill", withConfiguration: config)

    return image
}()

private(set) lazy var largeTitleViewRightBarButton: UIButton = {
    let button = UIButton(type: .custom)

    button.translatesAutoresizingMaskIntoConstraints = false
    button.imageView?.tintColor = R.color.appDodgerBlue()
    button.setImage(image, for: .normal)
    button.addTarget(presenter, action: #selector(presenter.onSearchRequested), for: .touchUpInside)

    return button
}()

private(set) lazy var rightBarButtonItem: UIBarButtonItem = {
    let barButtonItem = UIBarButtonItem(
        image: image,
        style: .plain,
        target: presenter,
        action: #selector(presenter.onSearchRequested)
    )
    return barButtonItem
}()

Demo