美文网首页iOS 进阶
使用“IBInspectable”XIB设置圆角、边框、阴影

使用“IBInspectable”XIB设置圆角、边框、阴影

作者: 木_穆 | 来源:发表于2019-03-12 11:35 被阅读0次

iOS开发中使用xib和storyboard可以节约大量的写UI代码的时间。这也是苹果官方比较推荐的方式。不过使用IB的方式来布局页面难免遇到一些需要设置圆角(cornerRadius)、阴影(shadowRadius)、边框(borderColor、borderWidth)这些不能直接在xib中设置的参数。还有一些自定义的view的一些参数。
原来呢,我是把这些控件拖到代码里面,在合适的时机用代码来设置这些参数,这样的话既要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等等的子类也可以用同样方法处理。

相关文章

  • 使用“IBInspectable”XIB设置圆角、边框、阴影

    iOS开发中使用xib和storyboard可以节约大量的写UI代码的时间。这也是苹果官方比较推荐的方式。不过使用...

  • IBInspectable巧妙用法

    问题: 项目一般中如果我们想给xib中的view动态的设置边框、圆角之类的话,都会用上IBInspectable这...

  • Image

    直接圆角图片 设置圆角图片度数 设置圆角图片带灰色圆角边框 设置圆角图片带灰色圆角边框带阴影

  • ios中使用storyboard或者Xib给View设置边框属性

    ios中使用storyboard或者Xib给View设置边框属性(颜色,宽度,圆角)很多技术人员习惯于用纯代码设置...

  • xib设置圆角,边框

    在开发中,经常会用到一些圆角效果,或者边框效果,经常用的方法是通过代码直接去设置,比较方便快捷;但是当我们通过 X...

  • 直接在IB上设置控件圆角边框

    直接在IB界面设置圆角边框颜色 运行结果 可以看到直接在xib中属性设置的圆角边框成功啦! 贴一下代码.h 贴一下...

  • UIView,UIButton,UIImageView等设立

    UIView,UIButton,UIImageView等设置圆角,设置阴影,设置边框的方法 在iOS开发中,任何可...

  • Flutter-Border

    边框(Border) 单侧边框 全部边框 圆角(borderRadius) 全部圆角 单侧圆角 阴影(BoxSha...

  • iOS-设置图片圆角

    常用设置: 适用 xib 或者 storyboard 绘图做法 使用图层过量会有卡顿现象, 特别是弄圆角或者阴影会...

  • Failed to set user defined inspe

    Log: 原因 :使用自定义的 view 时,为 view 设置了 IBInspectable 属性,在 xib ...

网友评论

    本文标题:使用“IBInspectable”XIB设置圆角、边框、阴影

    本文链接:https://www.haomeiwen.com/subject/xulgpqtx.html