Search code examples
iosstoryboardxcode7xibibinspectable

IBInspectable UIEdgeInsets not shown in IBOutlet


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.


Solution

  • 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.