自定义按钮未在Interface Builder中正确显示

Question

I'm learning to develop iOS apps in XCode. I've created simple custom button (subclass of UIButton) that should have red background and green text. When running the app in iOS simulator, everything is ok. But in interface builder other colors (specified in interface builder) are used. Test project is available at https://www.dropbox.com/s/ro7i4omdbpwapi0/testapp%20%282%29.zip?dl=0 . Can somebody help?

Here is source code of custom UIbutton class:

import UIKit

@IBDesignable class DefaultButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setup()
    }

    func setup() {
        setTitleColor(UIColor.red, for: .normal)
        backgroundColor = UIColor.green
        //setBackgroundImage(UIImage.createGradient(colors:  [ UIColor.defaultGradientStartColor, UIColor.defaultGradientEndColor ], startPoint: CGPoint(x: 0, y: 0), endPoint: CGPoint(x: 1, y: 0), size: CGSize(width: 200, height: 200)), for: .normal)
        //layer.cornerRadius = 50
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        setup()
    }
}

Answer 1

The behaviour described in you answer is correct; but i think you mixes two different things.

Basically, if you want to tint your button title, and your button background, you have to use the fields availables in interface builder. You have some nice properties to set up these things easely.

Use interface builder's parameters to design your look

So, in this case, defining a titleColor and a backgroundColor in your view setup is not relevant, since it's hardcoded.

If instead, you want to display a custom look to your button - like rounded corner - in your storyboard, you could use the @IBInspectable keyword to add new properties in interface builder.

@IBDesignable
class DefaultButton: UIButton {

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    @IBInspectable var borderColor: UIColor? {
        didSet {
            layer.borderColor = borderColor?.cgColor
        }
    }
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }

    // ...
}

By doing this, you can edit and see your view with a nice render in your storyboard!

Custom properties directly in storyboard