title: Subclassing UIButton and make it IBDesignable
body: <p>I have an app that uses custom buttons, the buttons should simply have a background image. Instead of adding the background image to all buttons, I'd rather have a UIButton subclass. It would be great if the custom button also rendered properly in Interface Builder. This is my attempt so far:</p>
  
  <pre><code>import UIKit
  
  @IBDesignable
  class STACPatientButton: UIButton {
  
      override init(frame: CGRect) {
          NSLog("initWithFrame");
          super.init(frame: frame)
          _setup()
      }
  
      required init(coder: NSCoder) {
          NSLog("initWithCoder");
          super.init(coder: coder)
          _setup()
      }
  
      override func prepareForInterfaceBuilder() {
          _setup()
      }
  
      private func _setup() {
          if let image = UIImage(named:"patientButton.png") {
              let insets = UIEdgeInsetsMake(8.0, 8.0, 8.0, 8.0)
              let strechableImage = image.resizableImageWithCapInsets(insets)
              self.setBackgroundImage(strechableImage, forState: UIControlState.Normal)
              self.contentEdgeInsets = UIEdgeInsetsMake(16.0, 16.0, 16.0, 16.0)
              self.sizeToFit()
          }
      }
  
  }
  </code></pre>
  
  <p>Where this is patientButton.png </p>
  
  <p><img src="https://i.stack.imgur.com/QntBb.png" alt="enter image description here"></p>
  
  <p>Two problems:</p>
  
  <ol>
  <li>the button doesn't render properly in Interface Builder. It just shows as a System button</li>
  <li>the title doesn't display unless I resize the button in Interface Builder to allow space for the image; i.e., the <code>contentEdgeInsets</code> property and <code>sizeToFit</code> seem to have no effect</li>
  </ol>
  
  <p>I guess it's a pretty basic question, but I can't any solution. Any advise?</p>
  
  <p>EDIT 1 as per discussion with Matt below:</p>
  
  <p>What I'm trying to achieve is to get some space around the title of the button. That was my understanding of <code>contentEdgeInsets</code> but it looks like I'm wrong. Without <code>contentEdgeInsets</code> this is the rendering of the button</p>
  
  <p><img src="https://i.stack.imgur.com/Svyg7.png" alt="enter image description here"></p>
  
  <p>which looks horrible. I want to programmatically get something like this, without having to resize the button in IB</p>
  
  <p><img src="https://i.stack.imgur.com/GNrHR.png" alt="enter image description here"></p>