Custom title view as large title in iOS 11 new navigation bar

Question

I am using a button as a title view for my UITableViewController which opens a dropdown list of categories. Selecting a category filters content of the table view by the selected category.

The button shows the name of the selected category plus a small arrow, similar to how iBooks used to look (or maybe still looks? I haven't used it in a while). I would therefore like it to have the same behaviour as a standard title and have it be large at first and collapse when the table view is scrolled.

Is there a way to do this?

Thanks

Charentemaritime

Did you solved it some how? – Elwin

Answer 1

It seems because of the new large titles, IOS11 requires the constraints on the custom view in the navigationItem.titleView to be set.

Do this for example:

customView.widthAnchor.constraint(equalToConstant: 200).isActive = true
customView.heightAnchor.constraint(equalToConstant: 44).isActive = true

self.navigationItem.titleView = customView

Note this must be done for both width and height.

It should work. No need to add a button, at least in my case...

This was suggested by Apple to ensure that you don't have zero-size custom views. See slide 33 in https://developer.apple.com/videos/play/wwdc2017/204/

Scout

Answer 2

Looks like touches are broken for navigationItem.titleView. Gestures, tap events and buttons - nothing works

Dap

I just ran into this. Have you discovered a fix yet? – Hulda

Yes, specifically for iOS11 you'll have to add a button above your title view for touches to work. Handle button event same way you've handled gestures – Dap

Thanks for your reply. I'm not sure I follow you. By "title view" do you mean a title navigation item? I don't think you can place a UIButton above a nav item because it is the parent of the bar button items. – Hulda

No, u assign a view to navigationItem.titleView, then add a button that view and make call sendSubviewToFront – Dap

To the record, the right method is bringSubviewToFront – Saltzman

Answer 3

Seems like a bug in iOS 11: https://forums.developer.apple.com/thread/82466

I provisionally implemented this workaround:

    private lazy var navBarActionButtonIOS11: UIButton = {
        button.addTarget(self.navTitleView, action: #selector(self.navTitleView.didTapView), for: .touchUpInside)
        return button
    }()

[...]

        navigationItem.titleView = navTitleView
        if #available(iOS 11.0, *), let navBar = navigationController?.navigationBar {
            navBarActionButtonIOS11.removeFromSuperview()
            navBar.addSubview(navBarActionButtonIOS11)
            navBarActionButtonIOS11.center.x = navBar.center.x
        }

Another solution could be to just assign a UIButton to navigationItem.titleView directly.

I hope Apple fixes this soon!

Chatelaine

Juan, does the expected behavior would be that when I'm using Large Titles, and setting titleView, the titleView would display at the Large Title and not on the regular right? Or Apple meant to separate between the two? In other words, we can't assign TitleView to Large Titles (replacing the Large Title with our own title)? – Elwin

Answer 4

Well, I had same problem. I have UIButtons in UINavigationItem.titleView and those were not reacting to touches at all. Problem is that the view where those buttons are where of size (0,0) because of auto layout. So to fix this problem you need to add additional view into your custom view, lets call it "contentView" and put all your controls inside that contentView. Also, contentView must have defined size with constraints. Quick test is to add width and height constraint to contentView. And all works again.

Hope that this helps someone.

Heder

I had a UIButton in the titleView and touches stopped with iOS 11. Adding a view to the titleView and putting the button inside did the trick for me. Thanks. – Broida