论优雅的实现描边

最近使用了一下 IBAnimatable,这个库对 IBInspectable 的使用真让人叹为观止。突然意识到其实 IBInspectable 可以让我们减少很多不必要的重复代码。对一个 UIView 进行描边是我们在开发过程中比较常用的,UI 设计师们希望通过描边来增加界面的层次感。

常见的描边实现

通过 UIView 实现描一条线

在刚开始做 iOS 开发时,我很喜欢使用这样的方式。但后来发现这种实现用一下两个缺点:

  1. 后期如果 UI 需要重新调整,会变得比较痛苦。
  2. 一般描边都只需要1个像素的描边,在使用 XibStoryBoard 的时候需要设置 0.5 这样的值。XibStoryBoard 好像支持的不太好,经常会出现在 plus 上描边的线看起来特别粗。

通过 CALayer 绘制描边

这个方法实现描边的效果很不错。但还是有些缺点:

  1. 有些 UIView 其实在代码中不需要体现,但因为需要描边。我必须把它拖到代码中。
  2. 代码中到处出现,进行描边的代码,一定程度影响代码的美观和阅读性(PS: 我有洁癖)。

对这些实现进行封装的确是一个不错的选择。但我也许还有可能有更好的方案。

使用 IBInspectable

这里我只描述我的实现思路,不对 IBInspectable 进行介绍。毕竟 IBInspectable2014WWDC 的内容了(PS: 比我学习 iOS 还要早 = =),很多大神都有博客对其介绍。

思路如下:

  1. 可以使用 IBDesignable 将属性定义到 IB 中,通过定义属性,实现描边。
  2. 我们可以统一在 layoutSubviews 中进行描边处理。
  3. 我不希望为了实现描边还去继承一个类,所以我选择对 UIView 通过 Category 实现描边的功能。
  4. 我需要增加一下新的属性来定义描边,所以我需要使用 AssociatedObject 实现。对于 AssociatedObject 不了解的同学可以看南峰子的这篇博客 Objective-C Runtime 运行时之二:成员变量与属性
  5. 由于我希望通过 Category 实现描边,我还需要使用 Method Swizzling 实现。在每个 UIView 及其子类 在实现 layoutSubviews 去执行我的描边代码。不了解的同学可以看南峰子的这篇博客 Objective-C Runtime 运行时之四:Method Swizzling

最终实现效果

如图,只需要在 IB 上配置上属性,就可以实现描边的功能。

这样做还是有缺点的,IB 上的属性有点多。。。

对于代码感兴趣的同学可以到https://github.com/bay2/IBViewExt,我在这里就不贴代码了,代码不多看 UIView+IB.m 文件就可以了。

IBInspectable 的局限

  1. BDesignableIBInspectable 无法在 Cocoa Touch Frameworks 中生效,详细看这里,所以使用 Carthage 的时候,BDesignableIBInspectable 也无法正常工作, cocoapods 不会有次问题。
  2. BDesignable 无法再 categories/extensions 正常工作, stackoverflow 上也有提到这个问题
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,065评论 4 62
  • N0.141 7月11日 晴 台风即将过境时,天空露出了水洗般迷人的蓝。 抬头看天,在叶子的缝隙间透着微蓝,阳光...
    瑞和她的浅岛繁花阅读 387评论 0 1
  • 当矿山上的灰尘将我掩埋 当下坡的路把我的肠子颠出来 当我的肠子在烈日下暴晒 盘山公路一直绕到大海
    摩柯菠萝阅读 209评论 0 3
  • 王晓梅,改变思维最简单的做法就是改变输入。
    沙漏记得阅读 194评论 0 0
  • 我怕黑。几乎没看过恐怖片儿,偶尔电影中有吓人的场面,我都会堵上耳朵把头窝起来。尤其不敢一个人在家里过夜,一丁点动静...
    吾小桐阅读 302评论 6 2