使用“IBInspectable”XIB設置圓角、邊框、陰影

iOS開發(fā)中使用xib和storyboard可以節(jié)約大量的寫UI代碼的時間。這也是蘋果官方比較推薦的方式。不過使用IB的方式來布局頁面難免遇到一些需要設置圓角(cornerRadius)、陰影(shadowRadius)、邊框(borderColor、borderWidth)這些不能直接在xib中設置的參數(shù)。還有一些自定義的view的一些參數(shù)。
原來呢,我是把這些控件拖到代碼里面,在合適的時機用代碼來設置這些參數(shù),這樣的話既要IB又要代碼,感覺不舒服。或者是在identity inspector中設置user defined runtime attributes 。如下圖:


EFDBF843-245C-49A1-B976-A6F98A16BD93.png

感覺還是很不方便,每個控件都要單獨設置一次,麻煩!!!

接下來說重點 IBInspectable

舉個例子,好多控件都可能會設置圓角,UIView、UIButton、UILable、UIImageView等等。
我們可以寫一個這樣的分類

//
//  UIView+ForXIB.h
//  OTTPos
//
//  Created by Lipengxuan on 3/12Tuesday.
//  Copyright ? 2019 OTTPay. All rights reserved.
//

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface UIView (ForXIB)

@property (nonatomic, assign) IBInspectable CGFloat fx_radius;
@property (nonatomic, assign) IBInspectable CGFloat fx_borderWidth;
@property (nonatomic, assign) IBInspectable BOOL fx_masksToBounds;
@property (nonatomic, assign) IBInspectable UIColor *fx_borderColor;

@end

NS_ASSUME_NONNULL_END


//
//  UIView+ForXIB.m
//  OTTPos
//
//  Created by Lipengxuan on 3/12Tuesday.
//  Copyright ? 2019 OTTPay. All rights reserved.
//

#import "UIView+ForXIB.h"
#import <objc/runtime.h>

@implementation UIView (ForXIB)

-(void)awakeFromNib{
    [super awakeFromNib];
    self.layer.cornerRadius = self.fx_radius;
    self.layer.masksToBounds = self.fx_masksToBounds;
    self.layer.borderColor = self.fx_borderColor.CGColor;
    self.layer.borderWidth = self.fx_borderWidth;
}

// MARK: - ================ Setters ===========================
static NSString *fx_radiusKey = @"fx_radius";
-(void)setFx_radius:(CGFloat)fx_radius{
    objc_setAssociatedObject(self, &fx_radiusKey, @(fx_radius), OBJC_ASSOCIATION_COPY);
}
static NSString *fx_borderColorKey = @"fx_borderColor";
-(void)setFx_borderColor:(UIColor *)fx_borderColor{
    objc_setAssociatedObject(self, &fx_borderColorKey, fx_borderColor, OBJC_ASSOCIATION_COPY);
}
static NSString *fx_borderWidthKey = @"fx_borderWidth";
-(void)setFx_borderWidth:(CGFloat)fx_borderWidth{
     objc_setAssociatedObject(self, &fx_borderWidthKey, @(fx_borderWidth), OBJC_ASSOCIATION_COPY);
}
static NSString *fx_masksToBoundsKey = @"fx_masksToBounds";
-(void)setFx_masksToBounds:(BOOL)fx_masksToBounds{
    objc_setAssociatedObject(self, &fx_masksToBoundsKey, @(fx_masksToBounds), OBJC_ASSOCIATION_COPY);
}
// MARK: - ================ Getters ===========================

-(CGFloat)fx_radius{
    return [objc_getAssociatedObject(self, &fx_radiusKey) floatValue];
}
-(UIColor *)fx_borderColor{
    UIColor *c = objc_getAssociatedObject(self, &fx_borderColorKey);
    return c ;
}
-(CGFloat)fx_borderWidth{
    return [objc_getAssociatedObject(self, &fx_borderWidthKey) floatValue];
}
-(BOOL)fx_masksToBounds{
    return [objc_getAssociatedObject(self, &fx_masksToBoundsKey) boolValue];
}

@end


來看看storyboard中的效果:


40DA9592-0C05-45CD-A5B0-2986CB6529A8.png

再來看看運行效果:


0EA0922C-C34C-43EB-B1C6-8AD562F81306.png

OK,大功告成。

當然不寫分類,uiview、uitextfield、uibutton等等的子類也可以用同樣方法處理。
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • five pretty idoms idom number one sitting pretty if you a...
    多美麗閱讀 99評論 0 0
  • 開始寫之前,不要提前閱讀后面的步驟,一天只進行一個步驟,相信時間與靈感會帶給我們驚喜。 第三天 這個東西喚醒了你的...
    李暖安閱讀 291評論 0 5
  • 周六,接待老朋友。 老孟,是6年前在天津的同事,這天他來北京玩兒,一起聊聊。參觀完清華大學后,我提議去五道口的雕刻...
    砍柴挑水先生閱讀 125評論 0 1