IBInspectable and IB_DESIGNABLE-Storyboad Dynamic Refresh

IBInspectable and IB_DESIGNABLE-Storyboad Dynamic Refresh

 

Preface:
During the uidesign of the application, if the attribute can be set on the GUI of the Interface Builder and the effect is dynamically previewed, the development efficiency of the application will be greatly improved. XCode provides us with the following method: IBInspectable and IB_DESIGNABLE.

User Defined Rumtime Attributes

You can use User Defined Rumtime Attributes to set values of some KVC Attributes in Interface Builder. For example
Set rounded corner to 50

In this way, running the simulator will have the following effect:

However, this has obvious drawbacks.

Not easy to debug and post-Maintenance

IB_DESIGNABLE

The Macro function of IB_DESIGNABLE is to allow XCode to dynamically render this type of graphical interface.
Add the macro to the front of the custom class.

#import 
  
   IB_DESIGNABLE@interface IBDesigbableImageview : UIImageView@end
  

Then, set imageview as the inheritance class and set the rounded corner.

We can see that the imageview on the storyboard is dynamically refreshed.

IBInspectable

Enables attributes that support KVC to be configured in Attribute Inspector.
If you are not familiar with KVC, read this article.
KVC for ios SDK

Add the attribute and Set method. If it is an existing class, use Category.

For example, set cornerRadius for the inheritance class of imageView
Add attributes to header files

@property (nonatomic) IBInspectable CGFloat cornerRadius;

. M file implementation corresponding set Method

-(void)setCornerRadius:(CGFloat)cornerRadius{    _cornerRadius = cornerRadius;    self.layer.cornerRadius = cornerRadius;    self.layer.masksToBounds = cornerRadius > 0?true:false;}

In this way, the Attribute Inspector will have an additional configuration option.

By setting this option, you can set the layer rounded corner.
Each time you set a rounded corner, a rumtime KVC variable is changed in Identity Inspector.

However, it still cannot be refreshed dynamically.

You can use IB_DESIGNABLE and IBInspectable to dynamically refresh data.

The implementation method is very simple. You just need to add this macro definition to the header file of the custom class. Set the corresponding class to a custom class.

. H file

#import 
  
   IB_DESIGNABLE@interface IBDesigbableImageview : UIImageView@property (nonatomic) IBInspectable CGFloat cornerRadius;@end
  

. M file

#import IBDesigbableImageview.h@implementation IBDesigbableImageview-(void)setCornerRadius:(CGFloat)cornerRadius{    _cornerRadius = cornerRadius;    self.layer.cornerRadius = cornerRadius;    self.layer.masksToBounds = cornerRadius > 0?true:false;}@end

The effect is the initial Demo.

If you cannot Refresh the page dynamically, restart XCode. If you cannot Refresh the page, for example, RefreshingAllViews, we recommend that you enable Automatically Refresh Views.