iOS - Xib/Storyboard Helper

前言


对于 UI 界面的编写工作,是否应该用 xib/storyboard 完成,一直是iOS开发中的争议,然而本文并参与讨论这个话题。(手动笑脸)
有兴趣的朋友可以参考唐巧的这篇文章
本文只是为喜欢使用或是想去使用 xib/storyboard 的朋友,提供一个强大的工具。在使用 xib/storyboard的时候,更加方便灵活,同时也为 xib/storyboard在添加约束,适配屏幕上做了一些改进,使之使用起来更加简单有效

更新日志


2019-04-01 ~ cocoapods version 1.2.3
  • 由于 xcode 10 对xib/storyboard 的渲染 支持性较之前版本更差(有猜测对设备的要求更高), 故将常用属性提到Basis文件夹
    建议使用 以下方式导入

     //pod 导入
     pod 'IBProperty/Basis'
    
2018-10-30 ~ cocoapods version 1.2.0
  • 解决因为IBProperty 引起的 Failed to render and update auto layout 错误, 这是一个渲染错误,并不会影响程序的运行。
2018-07-07 ~ cocoapods version 1.1.9
  • 解决极少部分block循环引用的问题
2018-06-18 ~ cocoapods version 1.1.8
  • CornerRadius:移除mask实现方式,因为mask会触发离屏渲染。恢复并优化了Core Graphics绘制圆角
  • 解决渐变和圆角同时设置偶尔会发生冲突的问题
  • AdaptXBottowConstant:加入iPhone X底部约束适配
2018-06-11 ~ cocoapods version 1.1.7
  • 截图:此前有一张截图中的iPhone SE 显示不完整,是由于因为款 mac-pro 上 se模拟器缩放到最小,引发的渲染问题,类似于tableView的横线。感谢网友limingLiuBaBa指出
  • Gradient:为所有视图加入了简单的渐变色处理,细节见文末。
  • CornerRadius:由layer的mask 替换之前的Core Graphics绘制。

所有属性见文末Property

IBProperty


下图为IBProperty通过Storyboard搭建的效果图

图1.png
图2.png

IBProperty 通过IB_DESIGNABLE 和 IBInspectable 以类目的形式为xib/storyboard 添加了一些简单有效的新属性,如阴影、圆角、毛玻璃等(具体见本文最后)
在xib/storyboard上要做到完美适配,需要添加很多较为复杂的约束,如果需要让约束的常量适配的话,就需要通过代码去设置了;字体的适配也是如此,通过IBProperty只需要在xib/storyboard设置一个属性就OK了。这些适配不仅体现在约束和字体上,IBProperty还提供了一系列适配方式,让xib/storyboard 在屏幕适配上也更加简单。

安装


(oc、swift 无区别)

  • 使用cocoapods (推荐)

    pod 'IBProperty'  
    
  • 手动下载
    Github地址 下载项目,然后将IBProperty 和 Aspects(如果项目中已经集成 则不需要) 文件夹拖入到工程中即可

使用


IBProperty只需要集成到项目中就可以为xib/storyboard服务了

然后你就可以在xib/storyboard 选中对象赋值了(具体属性及含义参照本文最后)
比如你要适配一个约束(图3),或是为UITextView加上placeholder(图4)

图3.png
图4.png

IBProperty不需要引用任何头文件,除非确实需要在代码中使用(事实上,并不推荐这么做)
因为IBProperty旨在服务于xib/storyboard,其中大部分属性都只是计算型属性,少部分属性无法间接获取的,通过getter 也将无法获取它,因为并没有为它真正开辟内存。此外,在代码中使用IBProperty,对同一个属性做多次赋值,可能会多次适配,导致一些奇怪的bug。总之,如果确实需要在代码中使用IBProperty,一定要对源码比较熟悉才行

Property


  • UIView

    //border
    ib_borderWidth;
    ib_borderColor;
    
    //cornerRadius
    ib_cornerRadius;
    //视图的 cornerRadius 始终保持高度的一半
    ib_cornerCircle;
    
    //shadow
    ib_shadowOffset;
    ib_shadowColor;
    ib_shadowOpacity;
    ib_shadowRadius;
    
    /*
     * 渐变开始颜色 - 渐变结束颜色
       只设置开始颜色 渐变将由alpha 0.3 - 0.1; 只设置结束颜色 渐变将由alpha 0.1 - 0.3
     */
    ib_gradientStartColor;
    ib_gradientEndColor;
    

    注: IBProperty仅对图片视图的圆角(ib_cornerRadius、ib_cornerCircle) 做了离屏渲染处理
    下图(图5)上为只设置ib_gradientStartColor, 下为只设置ib_gradientEndColor

图5.png
  • UILabel

    // 根据屏幕的宽度 适配 字体大小
    ib_adaptFont;
    // 给文字添加 下划线
    ib_underLine;
    // 给文字添加中间横线
    ib_middleLine;
    
  • UIButton

    // 根据屏幕的宽度 适配 字体大小
    ib_adaptFont;
    // 根据屏幕的宽度 适配 contentEdgeInsets、titleEdgeInsets、imageEdgeInsets
    ib_adaptInsets;
    
  • UIControl

    // 禁止重复点击(2秒内不能重复点击)
    ib_reClickEnabled;
    
  • UITextField

    // 根据屏幕的宽度 适配 字体大小
    ib_adaptFont;
    
  • UITextView

    // 根据屏幕的宽度 适配 字体大小
    ib_adaptFont;
    // 类似于UITextField的placeholder
    ib_placeholder;
    
  • UIImageView

    // 亮色模糊效果(毛玻璃)
    ib_darkEffect;
    // 暗色色模糊效果
    ib_lightEffect;
    // 模糊效果不透明度
    ib_effectOpacity;
    
  • UICollectionViewFlowLayout

    // 根据屏幕的宽度 适配 itemSize
    ib_adaptSize;
    // collectionView每行显示的item的个数,自动适配屏幕 
    ib_numberItemsForRow;
    
  • NSLayoutConstraint

    // 根据屏幕的宽度 适配 约束常量 constant
    ib_adaptConstant;
    // 若为YES constant将不会适配比例,而是在iPhone X 上加上24pt, 常用于 为自定义导航栏的子视图添加约束 
    ib_adaptXTopConstant;
    //若为YES constant将不会适配比例,而是在iPhone X 上加上34pt, 常用于某些底部弹窗
    ib_adaptXBottowConstant
    

后续


IBProperty处于不间断更新当中,读者有较好的建议或意见,都可以在GitHub或是本文评论区提出issue,每次更新都会在GitHub和本文上记录更新日志。
最后是GitHub传送门,喜欢的话给个小星星喔

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

推荐阅读更多精彩内容

  • 欢迎使用蜜宝笔记 @(示例笔记本)[马克蜜宝|帮助|Markdown] MiboNote是一款专为蜜宝笔记(Mib...
    console_log阅读 234评论 0 0
  • ## 超快速标记入门 正如在“准备步骤”中所讨论的那样,Ulysses 在文本段落附近使用特殊字符让您定义这些段落...
    JohneySong阅读 405评论 0 0
  • http://bbs.tianya.cn/post-16-1628647-2.shtml http://blog....
    指尖的跳动阅读 307评论 0 0
  • 先写外观设计,再写系统的视觉设计,最后写交互设计。 外观,拿起T1我就开始用手指抚摸其背面的玻璃,这是一块经过3D...
    少许阅读 259评论 0 1
  • 本文观点是参考,水泡球老师的网易公开课、朋友圈的一篇文章《以后将没有纯视觉设计师》、并结合自身经历提出的,希望可以...
    丹顶鹤的日记本阅读 1,216评论 3 28