Custom UIBarButtonItems from UIButtons with custom images - is it possible to make the tap targets larger?

Doug Smith picture Doug Smith · May 9, 2013 · Viewed 20.9k times · Source

I'm making UIBarButtons as follows:

// Create "back" UIBarButtonItem
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
backButton.frame = CGRectMake(0, 0, 28, 17);
[backButton addTarget:self action:@selector(backButtonTapped) forControlEvents:UIControlEventTouchUpInside];
backButton.showsTouchWhenHighlighted = YES;

UIImage *backButtonImage = [UIImage imageNamed:@"back-button.png"];
[backButton setBackgroundImage:backButtonImage forState:UIControlStateNormal];

UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];

[toolBarItems addObject:backBarButtonItem];

However, the tap targets are tiny. More precisely, they're the size of the custom images. (Which again, are tiny.) Is there any way to increase the size of their tap target?

(Note: altering the frame property of the UIButtons just stretches the image.)

Answer

Prasad Devadiga picture Prasad Devadiga · May 17, 2013

Small changes to your code will do the stuff

Changes needed :

  • I am assuming that the size of backButtonImage is {28,17} and setting the button frame as CGRectMake(0, 0, 48, 37) `
  • remove the backGroundImage and use setImage:
  • set the property imageEdgeInsets to UIEdgeInsetsMake(10, 10, 10, 10)

Your code will become like this:

UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
backButton.frame = CGRectMake(0, 0, 48, 37);
[backButton addTarget:self action:@selector(backButtonTapped) forControlEvents:UIControlEventTouchUpInside];
backButton.showsTouchWhenHighlighted = YES;

UIImage *backButtonImage = [UIImage imageNamed:@"back-button.png"];
[backButton setImage:backButtonImage forState:UIControlStateNormal];

backButton.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10);

UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];

[toolBarItems addObject:backBarButtonItem];

You can change the value for the frame and the imageEdgeInsets as per your requirements.
This code worked for me.