Add padding to a UIButton that has no text

Question

I have a UIButton that is 36x36 and I want to add padding (in essence like CSS) so that the touchable area is the recommended 44x44.

I've tried adding edge inserts through the Interface Builder and also with the code below but nothing I've tried increases the touchable area.

resetButton.contentEdgeInsets.top = 50
resetButton.contentEdgeInsets.left = 50

Does an edge inset only work with buttons that include text?

Update:

I've tried setting contentEdgeInsets, imageEdgeInsets, and titleEdgeInsets to no avail.
I could expand touchable area by editing the actual image and increasing the border around the icon. (This wouldn't be the preferred way but I'll probably go this route if I can't find another solution.)

Check this http://stackoverflow.com/questions/808503/uibutton-making-the-hit-area-larger-than-the-default-hit-area — schmidt9, Mar 30 '16 at 18:12

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

I overwrote in Swift this answer and it works:

import UIKit
import ObjectiveC

private var KEY_HIT_TEST_EDGE_INSETS: String = "HitTestEdgeInsets"

extension UIButton {

    public func setHitTestEdgeInsets(inout hitTestEdgeInsets: UIEdgeInsets) {
        let value = NSValue(&hitTestEdgeInsets, withObjCType:NSValue(UIEdgeInsets: UIEdgeInsetsZero).objCType)
        objc_setAssociatedObject(self, &KEY_HIT_TEST_EDGE_INSETS, value, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
    }

    private func hitTestEdgeInsets() -> UIEdgeInsets {
        let value = objc_getAssociatedObject(self, &KEY_HIT_TEST_EDGE_INSETS)
        if (value != nil) {
            var edgeInsets: UIEdgeInsets = UIEdgeInsetsZero
            value.getValue(&edgeInsets)
            return edgeInsets
        } else {
            return UIEdgeInsetsZero
        }
    }

    override public func pointInside(point: CGPoint, withEvent event: UIEvent?) -> Bool {

        if UIEdgeInsetsEqualToEdgeInsets(self.hitTestEdgeInsets(), UIEdgeInsetsZero) || !self.enabled || self.hidden  {
            return super.pointInside(point, withEvent: event)
        }

        let relativeFrame = self.bounds
        let hitFrame = UIEdgeInsetsInsetRect(relativeFrame, self.hitTestEdgeInsets());

        return CGRectContainsPoint(hitFrame, point)
    }

}

Use:

var insets: UIEdgeInsets = UIEdgeInsetsMake(-20, -20, -20, -20)
button.setHitTestEdgeInsets(&insets)

Add padding to a UIButton that has no text

1 Answers1