UIButton: Making the hit area larger than the default hit area.

Question

Hello, I have a question dealing with UIButton and it's hit area. I am using the Info Dark button in interface builder, but I am finding that the hit area is not large enough for some people's fingers.

Is there a way to increase the hit area of a button either programmatically or in Interface Builder without changing the size of the InfoButton graphic?

Answer 1

Well, you can place your UIButton inside a transparent and slightly bigger UIView, and then catch the touch events on the UIView instance as in the UIButton. That way, you will still have your button, but with a bigger touch area. You will manually have to deal with selected & highlighted states con the button if the user touches the view instead of the button.

Other possibility involves using a UIImage instead of a UIButton.

Answer 2

I recommend placing a UIButton with type Custom centered over your info button. Resize the custom button to the size you want the hit area to be. From there you have two options:

1. Check the 'Show touch on highlight' option of the custom button. The white glow will appear over the info button, but in most cases the users finger will cover this and all they will see is the glow around the outside.

2. Set up an IBOutlet for the info button and two IBActions for the custom button one for 'Touch Down' and one for the 'Touch Up Inside'. Then in Xcode make the touchdown event set the highlighted property of the info button to YES and the touchupinside event set the highlighted property to NO.

Answer 3

I've been able to increase the hit area of the info button programmatically. The "i" graphic doesn't change scale and remains centered in the new button frame.

The size of the info button seems to be fixed to 18x19 in Interface Builder. By connecting it to an IBOutlet, I was able to change its frame size in code without any issues.

/**
 * Enlarges the info button to make it an easier target to hit.
 * @todo Figure out a way to do this in the nib.
 */
static void _resizeInfoButton( UIButton *infoButton )
{
    // increase margin around button based on width
    const CGFloat desiredWidth = 44.f;
    const CGFloat margin = 
        0.5f * ( desiredWidth - infoButton.frame.size.width );

    // add margin on all four sides of the button
    CGRect newFrame = infoButton.frame;
    newFrame.origin.x -= margin;
    newFrame.origin.y -= margin;
    newFrame.size.width  += 2.0f * margin;
    newFrame.size.height += 2.0f * margin;

    infoButton.frame = newFrame;
}

Answer 4

This works for me:

UIButton *button = [UIButton buttonWithType: UIButtonTypeCustom];
// set the image (here with a size of 32 x 32)
[button setImage: [UIImage imageNamed: @"myimage.png"] forState: UIControlStateNormal];
// just set the frame of the button (here 64 x 64)
[button setFrame: CGRectMake(xPositionOfMyButton, yPositionOfMyButton, 64, 64)];