iOS IB_DESIGNABLE 和 IBInspectable 用法简介

·  阅读 635

场景

在开发中,经常会遇到设置 UIView 或者 UIImageView 等控件圆角的情况,在 xib 和 storyboard 里面,我们一般使用 Runtime Attributes 的方式,通过 layer.cornerRadiuslayer.masksToBounds 设置圆角半径和边缘裁剪。如下图

Runtime Attributes

虽然运行起来能够实现,但是我们并不能在 xib 马上看到效果,要能实时在 Xcode 显示界面效果,就需要用到 IB_DESIGNABLEIBInspectable 特性了。

用法

Xcode 6 开始,苹果就提供了 IB_DESIGNABLEIBInspectable 特性,用法如下表

特性 用途 OC 使用 swift 使用
IB_DESIGNABLE 动态渲染该类图形化界面 IB_DESIGNABLE 写在 @interface @IBDesignable 写在 class 前
IBInspectable 可视化编辑该类的属性 IBInspectable 写在属性类型前 @IBInspectable 写在变量前

直接上代码。创建一个UIView子类,加上 IB_DESIGNABLE 特性

#import <UIKit/UIKit.h>

IB_DESIGNABLE

@interface LCBaseView : UIView

@end
复制代码

这时候已经能在设计器直接看到效果了(不要忘了设置 CustomClass

IB_DESIGNABLE

然后再试试 IBInspectable,给 View 加一个 cornerRadius 属性用来设置圆角半径

#import <UIKit/UIKit.h>

IB_DESIGNABLE

@interface LCBaseView : UIView

/** 圆角半径 */
@property (nonatomic, assign) IBInspectable CGFloat cornerRadius;

@end
复制代码

然后在 .m 文件中重写 set 方法设置圆角

#import "LCBaseView.h"

@implementation LCBaseView

- (void)setCornerRadius:(CGFloat)cornerRadius {
    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = YES;
}

@end
复制代码

回到设计器,会发现刚刚我们自定义的属性神奇的出现在了面板上。把之前设置的 Runtime Attributes 属性全部删了,在这里设置一个100,已经实现了我们想要的效果。

IBInspectable

收藏成功!
已添加到「」, 点击更改