iOS IB_DESIGNABLE 和 IBInspectable 用法簡介

場景

在開發中，經常會遇到設定 UIView 或者 UIImageView 等控制元件圓角的情況，在 xib 和 storyboard 裡面，我們一般使用 Runtime Attributes 的方式，通過 layer.cornerRadius 和 layer.masksToBounds 設定圓角半徑和邊緣裁剪。如下圖

雖然執行起來能夠實現，但是我們並不能在 xib 馬上看到效果，要能實時在 Xcode 顯示介面效果，就需要用到 IB_DESIGNABLE 和 IBInspectable 特性了。

用法

從 Xcode 6 開始，蘋果就提供了 IB_DESIGNABLE 和 IBInspectable 特性，用法如下表

特性	用途	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 ）

然後再試試 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，已經實現了我們想要的效果。