Recognize tap on navigation bar title

Question

Could someone please help me recognise a tap when a user taps on the Title in the Navigation Bar?

I would like to recognise this tap and then animate the tableHeaderView appearing. Possibly sliding the TableView down.

The idea being that the user can then select a quick option (from the tableViewHeader) to re-populate the TableView.

However I cannot recognise any taps. I'm using Swift.

score 66 · Accepted Answer · edited May 24 '17 at 12:07

UINavigationBar does not expose its internal view hierarchy. There is no supported way to get a reference to the UILabel that displays the title.

You could root around in its view hierarchy “manually” (by searching through its subviews), but that might stop working in a future iOS release because the view hierarchy is private.

One workaround is to create a UILabel and set it as your view controller's navigationItem.titleView. It's up to you to match the style of the default label, which may change in different versions of iOS.

That said, it's pretty easy to set up:

override func didMove(toParentViewController parent: UIViewController?) {
    super.didMove(toParentViewController: parent)

    if parent != nil && self.navigationItem.titleView == nil {
        initNavigationItemTitleView()
    }
}

private func initNavigationItemTitleView() {
    let titleView = UILabel()
    titleView.text = "Hello World"
    titleView.font = UIFont(name: "HelveticaNeue-Medium", size: 17)
    let width = titleView.sizeThatFits(CGSize(width: CGFloat.greatestFiniteMagnitude, height: CGFloat.greatestFiniteMagnitude)).width
    titleView.frame = CGRect(origin:CGPoint.zero, size:CGSize(width: width, height: 500))
    self.navigationItem.titleView = titleView

    let recognizer = UITapGestureRecognizer(target: self, action: #selector(YourViewController.titleWasTapped))
    titleView.userInteractionEnabled = true
    titleView.addGestureRecognizer(recognizer)
}

@objc private func titleWasTapped() {
    NSLog("Hello, titleWasTapped!")
}

I'm setting the size of the label to its natural width (using sizeThatFits:), but I'm setting its height to 500. The navigation bar will keep the width but shrink the height to the bar's own height. This maximizes the area available for tapping (since the natural height of the label might be only ~22 points but the bar is 44 points high).

Perfect solution. I fully agree with not searching through the view hierarchy, like the other examples I found, as might not work in future. Thank you very much. — Richard, Oct 10 '14 at 06:04
I was almost there by myself, but didn't suspect `userInteractionEnabled`. +1. — Ahmed Khalaf, Sep 28 '16 at 08:59
I have a problem with this solution. On later updates of the text in the uilabel, the label itself jumps to x 0 (far left of screen) for some reason. Seems like a bug in UIKit. Anyway around? (iOS 10.1.1) — Jonny, Nov 04 '16 at 02:28
I could not reproduce the above problem 100%, however it seems to be gone for now if I do this AFTER I changed the text of said UILabel: `[self.navigationItem.titleView.superview setNeedsLayout];`. It indeed stopped the label from jumping to X 0. — Jonny, Nov 04 '16 at 02:32
I just tried my app on iOS11 and the height of 500 doesn't work well: it doesn't get resized so the label may not appear or it may appear in the middle of the screen. I changed it to the nav bar height: 44. — Ferran Maylinch, Sep 20 '17 at 10:21

Zia · Answer 2 · 2019-09-17T17:48:38.343

From the answers, we can tell there are two approaches to do this.

Add a UITapGestureRecognizer to the titleView. This does not seem elegant and requires you to manually set the navigation bar title font so I would not recommend it.
Add a UITapGestureRecognizer to the navigationBar. This seems pretty elegant but the problem with the posted answers that take this approach is that they all result in preventing controls within the navigation bar from working. Here is my implementation of this method that allows your controls to continue working.

// Declare gesture recognizer
var tapGestureRecognizer: UITapGestureRecognizer!

override func viewDidLoad() {

    // Instantiate gesture recognizer
    tapGestureRecognizer = UITapGestureRecognizer(target:self, action: #selector(self.navigationBarTapped(_:)))
}

override func viewWillAppear(_ animated: Bool) {

    // Add gesture recognizer to the navigation bar when the view is about to appear
    self.navigationController?.navigationBar.addGestureRecognizer(tapGestureRecognizer)

    // This allows controlls in the navigation bar to continue receiving touches
    tapGestureRecognizer.cancelsTouchesInView = false
}

override func viewWillDisappear(_ animated: Bool) {

    // Remove gesture recognizer from navigation bar when view is about to disappear
    self.navigationController?.navigationBar.removeGestureRecognizer(tapGestureRecognizer)
}

// Action called when navigation bar is tapped anywhere
@objc func navigationBarTapped(_ sender: UITapGestureRecognizer){

    // Make sure that a button is not tapped.
    let location = sender.location(in: self.navigationController?.navigationBar)
    let hitView = self.navigationController?.navigationBar.hitTest(location, with: nil)

    guard !(hitView is UIControl) else { return }

    // Here, we know that the user wanted to tap the navigation bar and not a control inside it 
    print("Navigation bar tapped")

}

I didn't know about `sender.location(in` It's a smart way. I can't vote it enough. — bibscy, Sep 11 '18 at 18:59
Nice solution. I like the viewWillDisappear which removes it for child views. Nice! — SmileBot, Jul 20 '21 at 17:50
This is nice but stop working as expected with iOS 16 because titleView now goes as _UINavigationBarTitleControl which is also a UIControl. — Pavel Vavilov, Oct 21 '22 at 12:45

score 24 · Answer 3 · answered Oct 09 '14 at 21:55

24

This is a solution, albeit not super elegant. In the storyboard just place a regular UIButton over the title and attach it to an IBAction in your ViewController. You may need to do this for each view.

answered Oct 09 '14 at 21:55

Steve Rosenberg

19,348
7
46
53

2

This is great solution, actually, works perfect and easy to implement. – Evgenii Jun 29 '15 at 23:58

score 8 · Answer 4 · answered Feb 02 '17 at 12:40

8

A simple approach may be just creating the tap gesture recognizer and attaching it to your navigation bar element.

// on viewDidLoad
let tapGestureRecognizer = UITapGestureRecognizer(target:self, action: #selector(YourViewController.somethingWasTapped(_:)))
self.navigationController?.navigationBar.addGestureRecognizer(tapGestureRecognizer)

func somethingWasTapped(_ sth: AnyObject){
    print("Hey there")
}

answered Feb 02 '17 at 12:40

Bruno Cunha

1,680
1
17
15

2

Best way to do it. – Federico Malagoni Feb 10 '17 at 15:02
3

In my case this broke the functionality of the back button after another viewcontroller was pushed onto the stack. – The Lone Coder Mar 10 '17 at 15:59
4

It will break the functionality of of other buttons in navigation bar – Ghulam Rasool May 18 '17 at 14:20
Please see my answer. It takes this approach but keeps the buttons in the navigation bar functional. – Zia May 03 '18 at 17:24
1

Million dollars answer (Y) – Umair_UAS Dec 10 '19 at 11:51

megaBreezy · Answer 5 · 2017-04-03T21:04:00.500

Bruno's answer was 90% there for me. One thing I noted, though, was that UIBarButtonItem functionality for the Navigation Controller stopped working in other View Controllers, once this gesture recognizer was added to it. To fix this, I just remove the gesture from the Navigation Controller when the view is preparing to disappear:

var tapGestureRecognizer : UITapGestureRecognizer!

override func viewWillAppear(_ animated: Bool) {

  tapGestureRecognizer = UITapGestureRecognizer(target:self, action: #selector(self.navBarTapped(_:)))

  self.navigationController?.navigationBar.addGestureRecognizer(tapGestureRecognizer)

}

override func viewWillDisappear(_ animated: Bool) {

  self.navigationController?.navigationBar.removeGestureRecognizer(tapGestureRecognizer)

}

func navBarTapped(_ theObject: AnyObject){

  print("Hey there")

}

that's a much easier solution if it's primarily about tapping on the navigation bar and not just on the title in particular! It also reuses an existing UIView and doesn't require the introduction of a new view. — Karsten, Jul 08 '18 at 18:56

score 5 · Answer 6 · answered Jun 16 '18 at 20:35

Regarding navigationItem.titleView is a UIView indeed, I ended up using a UIButton which gives all the flexibility out-of-box.

override func viewDidLoad() {

    // Create title button
    let titleViewButton = UIButton(type: .system)
    titleViewButton.setTitleColor(UIColor.black, for: .normal)
    titleViewButton.setTitle("Tap Me", for: .normal)

    // Create action listener
    titleViewButton.addTarget(self, action: #selector(YourViewController.titleViewButtonDidTap), for: .touchUpInside)

    // Set the title view with newly created button
    navigationItem.titleView = titleViewButton
}

@objc func titleViewButtonDidTap(_ sender: Any) {
    print("Title did tap")
}

score 4 · Answer 7 · answered Sep 12 '16 at 09:37

4

There is a simpler and more elegant solution using gesture recognisers (at least for iOS 9 and above).

UITapGestureRecognizer * titleTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(titleTapped)];
[self.navigationItem.titleView addGestureRecognizer:titleTapRecognizer];

Then add the title tapped method:

-(void) titleTapped {
    // Called when title is tapped
}

answered Sep 12 '16 at 09:37

James Andrews

3,257
3
31
45

4

Don't forget to define `self.navigationItem.titleView` as in the accepted answer. Default is nil. – Jonny Nov 04 '16 at 02:37

score 0 · Answer 8 · answered Dec 18 '18 at 23:16

Zia: Your guard !(hitView is UIControl) solution has been working well for me while running under iOS 9 but when I run the same code in newer iOS versions it fails to see the hitView as a UIControl when the tapped barButton is disabled.

I have a number of UIBarButtonItems in my navigation bar. When these barButtons are enabled the (hitView is UIControl) in my UITapGestureRecognizer action works correctly and the action function exits. But if the UIBarButtonItem is disabled and the user taps on the button, the (hitView is UIControl) is false and the code proceeds as if the user has tapped the navigation bar.

The only way I have found to work around this problem is to obtain the UIView object for all my barButtons in viewWillAppear with:

button1View = button1Item.value(forKey: "view") as? UIView

etc...

And then in my UITapGestureRecognizer action function I test:

if [button1View, button2View, button3View, button4View].contains(hitView)
{
  return
}

This is an ugly workaround! Any idea why (hitView is UIControl) should return false on a disabled bar button?

Update: my workaround only seems to work in iOS 9. In iOS 12 the hitView is not recognized as my barButton. I do not have an iOS 12 development device so unable to debug this. But I am guessing that in iOS 12 a disabled barButton is not seen as a UIControl or the returned hitView is the underlying navigationBar. — WholeCheese, Dec 20 '18 at 21:29

score 0 · Answer 9 · edited Oct 09 '21 at 00:26

0

Just put a Transparent UIButton on custom titleview.

let maskButton = UIButton(frame: .zero)
// ....
// your views...
// add Transparent button at last
addSubview(maskButton)
maskButton.snp.makeConstraints({
    $0.edges.equalToSuperview()
})
// listener tap event 
maskButton.addTarget(self,action:#selector(buttonClicked)....

edited Oct 09 '21 at 00:26

pkamb

33,281
23
160
191

answered May 13 '21 at 10:19

GYOTO

103
5

Recognize tap on navigation bar title

9 Answers9

Linked