How to change the selection area of a UIBarButtonItem?

Question

I'm trying to change the selection area of a UIBarButtonItem within the navigation controller. Basically I'm trying to change the allowable area that will make that UIBarButtonItem selectable. Right now, the size of my UIBarButtonItem is 40x40, but I can easily select it even if my finger is not touching the button at all.

Here's to illustrate what I mean:

The green represents the size of the UIBarButtonItem. The red represents the allowable area that makes the UIBarButtonItem selectable.

How can I change the width of the red area?

Here's a snippet of code if helpful:

changeMuscleMap = UIButton(frame: CGRect(x: 0, y: 0, width: 40, height: 40) )
changeMuscleMap.setImage(UIImage(named: "change"), forState: .Normal)
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: changeMuscleMap)

Thanks!

score 0 · Answer 1 · edited May 01 '17 at 09:11

0

You can use the following code to increase or decrease UIBarButtonItem button width.

changeMuscleMap = UIButton(frame: CGRect(x: 0, y: 0, width: 120, height: 40) )
changeMuscleMap.setImage(UIImage(named: "change"), forState: .Normal)
changeMuscleMap.contentHorizontalAlignment = .left
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: changeMuscleMap)

edited May 01 '17 at 09:11

Fattaneh Talebi

727
1
16
42

answered Apr 27 '17 at 07:34

Moon Technolabs Pvt Ltd

51
7

nathanwhy · Answer 2 · 2017-04-27T15:05:00.740

If you want larger click area than required, try the below code, then making a UIBarButtonItem With custom button:

@implementation CustomButton

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event
{
    UIEdgeInsets extendTouchInsets = UIEdgeInsetsMake(20, 0, 20, 0);
    CGRect bounds = self.bounds;
    bounds.origin.x -= extendTouchInsets.left;
    bounds.origin.y -= extendTouchInsets.top;
    bounds.size.width += extendTouchInsets.left + extendTouchInsets.right;
    bounds.size.height += extendTouchInsets.top + extendTouchInsets.bottom;
    return CGRectContainsPoint(bounds, point);
}

@end

mshrestha · Answer 3 · 2016-05-10T04:44:11.780

-1

It can be achieved by making a UIBarButtonItem with custom item as UIImageView instead of UIButton. Try the below code. I hope this will solve it now.

changeMuscleMap = UIImageView(image:UIImage(named: "change"))
imageView.frame = CGRectMake(0, 0, 40, 40)
let leftBarBtn = UIBarButtonItem(customView: imageView)
self.navigationItem.leftBarButtonItem = leftBarBtn

edited May 10 '16 at 04:44

answered May 09 '16 at 06:34

mshrestha

788
5
14

1

you are suggesting a workaround, not a solution, and it's irrelevant to my issue regardless – Pangu May 10 '16 at 00:37
Sorry for misinterpreting your question. I have now edited my answer to solve the problem. I hope this helps. – mshrestha May 10 '16 at 04:47

score -3 · Accepted Answer · edited May 23 '17 at 12:18

I was able to achieve what I wanted by using @Damien Romito's provided answer here:

UINavigationBar UIBarButtonItems much larger click area than required

Updated for Swift 3.0:

let buttonContainer: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 27, height: 30) )

let barButton: UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30) )

buttonContainer.addSubview(barButton)

barButton = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

barButton(#imageLiteral(resourceName: "image"), for: UIControlState.normal)

self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: buttonContainer)

barButton(self, action: #selector(ViewController.doSomething), for: UIControlEvents.touchUpInside)

How to change the selection area of a UIBarButtonItem?

4 Answers4