As you guys know that you can test your views directly in your interface builder, then think should't you have a way to edit attributes related to your hand created objects directly in you Interface Builder. Well there is a way which will let you edit different attributes of you objects in Interface Builder. This feature allows the view to be tested without running your application again and again. The attribute that you want to edit/change should be marked as "@IBInspectable" && class is marked with "@IBDesignable", also class should extend UIView class. Let us understand it with an example in which we want to create a label programmatically && the check different changes that we will make:
Now open the attribute Inspector by pressing "command + option + 4" you will see that all the properties that you marked as "@IBInspectable" appeared in Attribute Inspector, now you can edit it && see the effect accordingly in the view in Main.storyboard' view...here is the picture for proof:
1. The very first thing you do is to create a Xcode project by usual setting of Single View Application & selecting the language Swift.
3. Now Create a new Cocoa Touch Class file call it testingIBDesignable & make it a subclass of UIView. Now open the testingIBDesignable.swift file. Now open the Main.Storyboard file && click on the View not the document outline && change the custom class to testingIBDesignable. Then add the following sort of code to testingIBDesignable.swift file...
import UIKit
@IBDesignable class testingIBDesignable: UIView {
//attributes of label to be edited are marked with @IBInspectable
//attributes of label to be edited are marked with @IBInspectable
@IBInspectable var text : String = ""
@IBInspectable var x: CGFloat = 50
@IBInspectable var y: CGFloat = 50
@IBInspectable var width: CGFloat = 200
@IBInspectable var height: CGFloat = 30
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
designingLable()
}
override init(frame: CGRect) {
super.init(frame: frame)
designingLable()
}
override func layoutSubviews() {
designingLable()
}
func designingLable() {
var label = UILabel()
label.frame = CGRectMake(x, y, width,height)
label.backgroundColor = UIColor.greenColor()
label.textColor = UIColor.whiteColor()
label.textAlignment = NSTextAlignment.Left
label.text = text
addSubview(label)
}
}
Notice that the class is extending its super class UIView && the attribute "@IBDesignable" is also add to its declaration. Function init(frame:) is the initializer function that is calling user defined function "designingLabel()", which is doing the main task of programmatically drawing the label on the screen. And init(coder:) is the function to deserializer of out label view. The "layoutSubviews()" is used here so that view will load properly even if we are checking the changes made by us in Interface Builder File. Also the attributes of UIObject Label that are to be edited are marked as "@IBInspectable" && when you first time compile your app they will appear in Attribute Inspector in Xcode. Now that all is set go ahead && compile you app as usual simulator will show up && present a label with green color, what else anew, now go to Main.Storyboard file && click on one and only View then you will see the same label with green color. This is what @IBDesignable does. Here is figure that will display the result:
In above image you can clearly see that all the properties appeared in Attribute Inspector. So now withe the help of attributes "@IBDesignable && @IBInspectable" you can test your view without compiling your app again && again. That's a good news, isn't it?
