Custom controls to set properties and show in real time and preview in Xib

Key words:

@IBDesignable: See the effects of xib settings in real time

@IBInspectable: Provide the settings property to Xib, you can see this property in Xib

Scene:

Customize a Uitextfield, and provide BorderColor, BorderWidth, cornerradius three attributes;

Requirements: These three properties can be displayed in Xib, change the attribute value, can preview the effect in real time.

1, we first customize the class:

1 Import UIKit2 3 //@IBDesignable: See the effects of xib settings in real time4 @IBDesignable5 classYstextfield:uitextfield {6     7     //@IBInspectable: Provide the settings property to Xib, you can see this property in Xib8@IBInspectable var bordercolor:uicolor?{9 didset{TenSelf.layer.borderColor = bordercolor?. Cgcolor One         } A     } -      -     //@IBInspectable: Provide the settings property to Xib, you can see this property in Xib the@IBInspectable var borderwidth:cgfloat =0{ - didset{ -Self.layer.borderWidth =BorderWidth -         } +     } -      +     //@IBInspectable: Provide the settings property to Xib, you can see this property in Xib A@IBInspectable var cornerradius:cgfloat =0{ at didset{ -Self.layer.cornerRadius =Cornerradius -Self.layer.masksToBounds =true -         } -     } -}

2. Create a new xib, drag into a uitextfield, and change its class counterpart to the class we just customized: Ystextfield

3, in the property bar we can see the properties we have defined

Custom controls to set properties and show in real time and preview in Xib