Issue with button on the left side of the uinavigation bar

Question

I have a button on the left side of the navigation bar. I also have a UIButton near that button.

Now when I click the button thats below the navigation bar, in many cases, the button on the nab bar gets clicked.

Any idea why this is happening? Any suggestions ?

Thanks.

image: if you click anywhere inside the red button, the top left button of the nav bar still gets pressed.

enter image description here

code for nav bar button:

UIButton *leftButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 25, 25)];
[leftButton setShowsTouchWhenHighlighted:NO];
[leftButton setImage:[UIImage imageNamed:@"deals.png"] forState:UIControlStateNormal];
[leftButton setImage:[UIImage imageNamed:@"deals_down.png"] forState:UIControlStateSelected];
[leftButton setImage:[UIImage imageNamed:@"deals_down.png"] forState:UIControlStateHighlighted];
[leftButton addTarget:self action:@selector(dealsButtonPressed:) forControlEvents:UIControlEventTouchDown || UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem =  [[[UIBarButtonItem alloc] initWithCustomView:leftButton] autorelease];
[leftButton release];

Without any code or screenshot, the best guess is that you are actually accidentally tapping the button on the navbar. — Peter Sarnowski, Feb 18 '12 at 05:23
How do you set up the button in the navbar? Please show us the code. — sosborn, Mar 09 '12 at 00:11
I agree with fbernardo's answer. And my question is, why do you want to put buttons so close to each other anyways? I find that to be bad design and believe it or not, it's very important in software development/design. For example in a email client would you want delete and reply buttons to be really close to each other? I didn't think so. Here is an excellent read on this topic: http://www.amazon.com/exec/obidos/ASIN/0465067107/codihorr-20 — C0D3, Mar 15 '12 at 18:10

score 12 · Answer 1 · edited May 23 '17 at 12:24

12

UINavigationButtons have a much larger tappable area than it's view, Apple made it this way for ease of use. If you really want to have two buttons that close to each other you have to subclass UINavigationBar, more specifically, override the touch events, get the touch coordinates and act as you see fit. More info here.

edited May 23 '17 at 12:24

Community

1
1

answered Mar 09 '12 at 00:51

fbernardo

10,016
3
33
46

"Apple made it this way for ease of use" - Best to comply with Apple here and lower your own button, really. You're just asking for people to hit the wrong button by mistake if you put your own button too close to the navbar one. – Danra Mar 15 '12 at 21:16

score 2 · Answer 2 · answered Mar 15 '12 at 18:41

2

Note that if Apple enlarged the navigationBar's left button (right one is not), it's for usability questions. It's almost the most clicked button of iphone device, so people have got the ability to tap back button in an instinctive way (i never look at the button, I just know the movement).

Have in mind that if you reduce the touch region, users may have difficulties to reach it.

My recommandation, sorry for that, would be to move down 3 or 5px down your 3 buttons.

answered Mar 15 '12 at 18:41

Martin

11,881
6
64
110

Sigh, so many upvotes to the technical answer (which deserves it) and so little for usability related answers such as yours. – Danra Mar 15 '12 at 21:18

score 1 · Answer 3 · edited May 23 '17 at 12:13

It looks like a problem with how you're initializing the UIButton instance. Typically, we would use [UIButton buttonWithType:custom]; in your situation.

From this answer, they solved a similar question with the following:

UIImage *myImage = [UIImage imageNamed:@"paw.png"];
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
[myButton setImage:myImage forState:UIControlStateNormal];
myButton.showsTouchWhenHighlighted = YES;
myButton.frame = CGRectMake(0.0, 0.0, myImage.size.width, myImage.size.height);

[myButton addTarget:self action:@selector(tapped:) forControlEvents:UIControlEventTouchUpInside];

UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithCustomView:myButton];
self.navigationItem.rightBarButtonItem = rightButton;

[rightButton release];
[myButton release];

It's not the code you're looking for, but it shows you how to correctly instantiate a UIButton instance. Hopefully that will sort out the problems you're having.

so, in other words, i need to set the type to Custom and set the frame separately. Is that what you are implying ? — Ahsan, Mar 12 '12 at 21:50
That's exactly what I'm implying - buttons should only be instantiated with `buttonWithType:`. I'm sorry to hear that wasn't your issue - good luck! — Ash Furrow, Mar 13 '12 at 01:01

Issue with button on the left side of the uinavigation bar

3 Answers3

Linked