神奇的IB_DESIGNABLE和IBInspectable

原文链接

http://www.jianshu.com/users/244aa1f48d1c/latest_articles

• 情景:在很多中情况下我们需要设置UIView或者UIImageView的圆角以及边框等,我们通常的做法是:

  • 1.代码创建的控件:利用代码设置cornerRadius(别忘记设置裁剪哦masksToBounds = YES)和borderWidth属性;
  • 2.在xib中你还有一种做法就是设置Key Paht;(注意:这里虽然设置了我们并不能立即在xib中看到设置后圆角效果,这是本文重点)
    
    
    

    设置Key Paht
  • 3.设置圆形图片的话,还可以画一个圆形图片,详情可以移步这里;

• 下面以在xib中设置圆角为例,说明IB_DESIGNABLE和IBInspectable的神奇之处:

IB_DESIGNABLE 的具体使用方法:

• IB_DESIGNABLE的宏的功能就是让XCode动态渲染出该类图形化界面;
• 使用IB_DESIGNABLE的方式，把该宏加在自定义类的前面;

• 1.自定义一个UIview---YCCustomView

#import <UIKit/UIKit.h>

// 在定义类的前面加上IB_DESIGNABLE宏
IB_DESIGNABLE

@interface YCCustomView : UIView

@end

• 2.在xib中拖一个UIView,并修改类名为YCCustomView

  • 这里还是利用key Paht设置圆角,即可动态刷新我们的自定义View,效果图如下:
    

    
    

    IB_DESIGNABLE

  • 说明:别忘记设置view的class为我们自定义的哦

说明

IBInspectable 的具体使用方法:

• 我们在上面已经知道了IB_DESIGNABLE的使用,我们能立即看到设置的圆角效果(动态刷新),但是有一个问题,我们通过设置Key Path来设置是不是很麻烦~,下面我们通过一种更加直观的方式来设置,如下:

默认是没有这些选项的,不信你瞅瞅你的~.~

废话不多说,直接上代码:

#import <UIKit/UIKit.h>

IB_DESIGNABLE  // 动态刷新

@interface YCCustomView : UIView

// 注意: 加上IBInspectable就可以可视化显示相关的属性哦
/** 可视化设置边框宽度 */
@property (nonatomic, assign)IBInspectable CGFloat borderWidth;
/** 可视化设置边框颜色 */
@property (nonatomic, strong)IBInspectable UIColor *borderColor;

/** 可视化设置圆角 */
@property (nonatomic, assign)IBInspectable CGFloat cornerRadius;

@end

重写set方法,根据可视化设置的值设置相关的属性

#import "YCCustomView.h"

@implementation YCCustomView

/**
 *  设置边框宽度
 *
 *  @param borderWidth 可视化视图传入的值
 */
- (void)setBorderWidth:(CGFloat)borderWidth {

    if (borderWidth < 0) return;

    self.layer.borderWidth = borderWidth;
}

/**
 *  设置边框颜色
 *
 *  @param borderColor 可视化视图传入的值
 */
- (void)setBorderColor:(UIColor *)borderColor {

    self.layer.borderColor = borderColor.CGColor;
}

/**
 *  设置圆角
 *
 *  @param cornerRadius 可视化视图传入的值
 */
- (void)setCornerRadius:(CGFloat)cornerRadius {

    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = cornerRadius > 0;
}

@end

• 效果演示
  
  
  

  IBInspectable