首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS开发技巧:快速实现 圆角+描边

iOS开发技巧:快速实现 圆角+描边

作者头像
BY
发布2018-05-11 14:49:07
1.6K0
发布2018-05-11 14:49:07
举报
文章被收录于专栏:BY的专栏BY的专栏

http://nshipster.cn/ibinspectable-ibdesignable/

我们来说说如何对某个控件进行圆角、描边处理:

初级

对于一个初学者来说,如果要进行某个控件的圆角、描边设置,就要从Storyboard关联出属性,然后再对属性进行代码处理。

如下代码:

self.myButton.layer.cornerRadius = 20;
self.myButton.layer.masksToBounds = YES;
self.myButton.layer.borderWidth = 2;
self.myButton.layer.borderColor = [UIColor blackColor].CGColor;

这样不仅需要Storyboard关联出属性,还要写一堆代码对属性进行设置,不得不说实在麻烦~

中级

比较机智的做法是使用Storyboard提供的Runtime Attributes为控件添加圆角描边。 选中控件,然后在Runtime Attributes框中输入对应的KeyTypeValue,这样程序在运行时就会通过KVC为你的控件属性进行赋值。(不仅仅是圆角、描边~) 如下图

设置圆角、描边的Key为:

layer.borderWidth
layer.borderColorFromUIColor
layer.cornerRadius
clipsToBounds

这样做不用关联出属性,但是需要输入大串字符串,也是不够方便。

高级

最后放大招了!创建UIView的分类,使用IBInspectable+ IB_DESIGNABLE关键字:

#import <UIKit/UIKit.h>

IB_DESIGNABLE

@interface UIView (Inspectable)

@property(nonatomic,assign) IBInspectable CGFloat cornerRadius;
@property(nonatomic,assign) IBInspectable CGFloat borderWidth;
@property(nonatomic,assign) IBInspectable UIColor *borderColor;

@end
#import "UIView+Inspectable.h"

@implementation UIView (Inspectable)

-(void)setCornerRadius:(CGFloat)cornerRadius{
    self.layer.masksToBounds = YES;
    self.layer.cornerRadius = cornerRadius;
}
-(void)setBorderColor:(UIColor *)borderColor{
    self.layer.borderColor = borderColor.CGColor;
}
-(void)setBorderWidth:(CGFloat)borderWidth{
    self.layer.borderWidth = borderWidth;
}

- (CGFloat)cornerRadius{
    return self.layer.cornerRadius;
}
- (CGFloat)borderWidth{
    return self.layer.borderWidth;
}
- (UIColor *)borderColor{
    return [UIColor colorWithCGColor:self.layer.borderColor];
}

@end

代码下载

直接使用

直接将这两个文件拖入项目中即可使用,在右边栏将会显示圆角和描边的属性设置

如图:

动态显示设置效果

直接使用的话只有在运行时才能看到效果,

例如要实时显示一个UIBUtton圆角、描边效果,需要创建一个类继承UIButton

#import <UIKit/UIKit.h>
#import "UIView+Inspectable.h"

@interface myButton : UIButton

@end
#import "myButton.h"

@implementation myButton

@end

只要将button的Class选择该空白类即可

关于IBInspectableIB_DESIGNABLE的使用详情可以参考这篇文章《谈不完美的IBDesignable/IBInspectable可视化效果编程》

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.12.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 初级
  • 中级
    • 高级
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档