iOS 11 - UINavigationItem titleView when using Lar

Question

I'm trying to understand either it's a bug or it's the expected behavior.

On iOS 10 and earlier we could set up a custom title, using navigationItem.titleView.
On iOS 11, when setting our navigationItem.largeTitleDisplayMode = .always and setting navigationItem.titleView = <Some cool UIButton> it's displaying both the normal navigation title bar and the large navigation title.

Illustration:

To sum up:

How can we use custom titleView on our Large Navigation Title?

EDIT : This is the expected result:

Answer 1

I can't find any documentation on this, so I played a bit. It seems in iOS 11, you won't be able to get that title to be a button and display large at the left.

I don't know if this is a bug or the expected result, as it seems to be a new feature. The latest (iOS 11) Human Interface Guidelines (HIG) discuss the larger title label as being a way to give the user clear context. The HIG also discuss space between buttons. However, there's no discussion of using a button as the title.

---

To recreate, I set up a Single View project. I embedded the view controller in a navigation controller.

In ViewController.swift's viewDidLoad, I added this code:

    let titleButton = UIButton(type: .roundedRect)
    titleButton.setTitle("Hello Button!", for: UIControlState.normal)

    let navController = parent as! UINavigationController

    navController.navigationBar.topItem!.title = "Hello???"
    navController.navigationBar.topItem!.titleView = titleButton
    navController.navigationBar.prefersLargeTitles = true

This ends up looking something like your example.

IF I:

• set .title to empty string, or remark the line out: navbar is stretched, and no title text shows (or title text set in Interface Builder shows)

• remark out .prefersLargeTitles, or set it to false: the navbar is the normal height, the button displays, but no title text displays.

• remark out the titleView line, AND:

  • leave the .prefersLargeTitles set to true: the title text displays large at the left, and the navbar's height is stretched.
  • set the .prefersLargeTitles to false: the title text displays in the top center, and the navbar is normal height.

Update: link to sample project on GitHub