IB_DESIGNABLE  設計UIView子類  和IBInspectable 設置UIView自定義屬性, storyboard,xib中加圓角


  • 情景:在很多中情況下我們需要設置UIView或者UIImageView的圓角以及邊框等,我們通常的做法是:

    • 1.代碼創建的控件:利用代碼設置cornerRadius(別忘記設置裁剪哦masksToBounds = YES)和borderWidth屬性;
    • 2.在xib中你還有一種做法就是設置Key Paht;(注意:這里雖然設置了我們並不能立即在xib中看到設置后圓角效果,這是本文重點)

      設置Key Paht
    • 3.設置圓形圖片的話,還可以畫一個圓形圖片,詳情可以移步這里;
  • 下面以在xib中設置圓角為例,說明IB_DESIGNABLEIBInspectable的神奇之處:

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



在進一步,對UIView,   直接使用 Catrgory 來實現!

//UIView+O2CornerRadius.h
@interface UIView (O2CornerRadius)

@property (nonatomic, assign) IBInspectable CGFloat cornerRadius;

@end
//UIView+O2CornerRadius.m@implementation UIView (O2CornerRadius)

- (void)setCornerRadius:(CGFloat)cornerRadius

{

    self.layer.cornerRadius = cornerRadius ;

    self.clipsToBounds = YES ;

}

- (CGFloat)cornerRadius

{

    return self.layer.cornerRadius;

}

@end

導入全局的pch中, 然后你發現, 世界變了。


Xcode6之后運行時屬性升級到了 @IBInspectable ,利用這個我們可以給 UIView 添加一個屬性,然后就可以在IB中進行設置.




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com