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

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可视化效果编程》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

直播APP常用动画效果

介绍 记录、总结开发遇到一些问题,大家一起交流学习。 这次带来,对直播APP的常用动画总结。 直播Live 效果展示 下面是一个很多平台都有的入门豪华礼物动...

60680
来自专栏向治洪

React Native之ListView实现九宫格效果

概述 在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码 ? L...

40050
来自专栏小蠢驴iOS专题

iOS - 添加一个全局悬浮按钮

35940
来自专栏阮一峰的网络日志

制作CSS气泡框

这种方法的优点是所有浏览器都支持,缺点是比较麻烦,必须制作专门的图片,增加多余的标签,代码的灵活性较小。

93320
来自专栏QQ音乐技术团队的专栏

小窗播放视频的原理和实现(上)

本文对小窗视频播放进行了详细的研究,针对几种实现方案进行了深入的对比分析,进而给出实现小窗视频播放的最优解。

4.5K150
来自专栏技术总结

学会不一样的Loading图

上述效果,其实很多app就单纯这样使用了,但是我们为了更美化,决定为其增加动态效果

14040
来自专栏iOS开发攻城狮的集散地

UIScrollView视觉差动画

24660
来自专栏Alice

一个layer可以跟着画完的线移动ios程序 好玩啊。

用法:采用的是关键帧实现的。    实验目的:让上层的layer子层能够跟着在另一个子层上花的线进行移动 。即当线画完之后,图形开始移动,并且能够停在最后的那个...

23460
来自专栏iOS开发攻城狮的集散地

iOS 封装跑马灯和轮播效果

1.1K40
来自专栏iOS开发攻城狮的集散地

自定义UIPageControl、UITextView占位视图

23290

扫码关注云+社区

领取腾讯云代金券