IBInspectable UIEdgeInsets not shown in IBOutlet

Question

I am creating a custom class for UIButton to increase the tap area. I need that user can enter the padding in storyboard itself. So I make a IBInspectable property.

@IBDesignable class UIIconButton: UIButton {
    @IBInspectable var touchPadding:UIEdgeInsets = UIEdgeInsetsZero
}

But it is not shown in storyboard. However if a replace the same with CGRect then it is visible in storyboard.

score 28 · Accepted Answer · answered Aug 24 '16 at 16:04

As of Xcode 7, Interface Builder doesn't understandUIEdgeInsetsZero as an @IBInspectable (bummer!).

You can work around this, however, by using CGFloat properties to set edge insets indirectly:

public class UIIconButton: UIButton {

  @IBInspectable public var bottomInset: CGFloat {
    get { return touchPadding.bottom }
    set { touchPadding.bottom = newValue }
  }
  @IBInspectable public var leftInset: CGFloat {
    get { return touchPadding.left }
    set { touchPadding.left = newValue }
  }
  @IBInspectable public var rightInset: CGFloat {
    get { return touchPadding.right }
    set { touchPadding.right = newValue }
  }
  @IBInspectable public var topInset: CGFloat {
    get { return touchPadding.top }
    set { touchPadding.top = newValue }
  }

  public var touchPadding = UIEdgeInsetsZero    
}

This will correctly show the bottomInset, leftInset, etc within Interface builder.

Took me a couple of hours to get to this solution. – Urban Oct 28 '16 at 22:24 — Urban, Oct 28 '16 at 22:24

IBInspectable UIEdgeInsets not shown in IBOutlet

1 Answers1