SwiftBlogiOS精选xcode调试

ViewChaos:iOS UI 调试黑科技

2016-05-17  本文已影响3317人  黑暗中的孤影

UI调试是每一个APP开发者或者前端开发者必备的技术。相对来说,iOS开发者调试UI是最苦逼的。无论是用Storyboard&XIB或者是纯手写代码实现UI,都要经过修改代码->编译生成->启动APP,进入指定页面后才能看到效果(android studio 和闪电功能和webpack的及时刷新功能真是好啊)。整个过程需要等待一定的时间。而且反复修改编译后才能达到自己想要的效果,浪费时间。同时如果你是用代码生成UI的话,想要在复杂的页面里找到每个视图控件对应的代码也比较麻烦(目前我的所有项目都是用纯代码写的)。有一天无意中发现了一个叫RunTrace的开源项目RunTrace,它是一个IOS动态调试UI的开源项目,做得非常的有新意。并且也能够解决一些用纯代码写UI的疼点。我对这个项目非常有兴趣,我就用Swift重写一次,并且加入了自己的一些功能,使用iOS的UI调试更加方便了。正如标题,它叫ViewChaos,下面给大家介绍这个项目是怎么使用的

iOS UI开发现状

目前iOS和UI开发最主流的开发方式有两种,一是使用Stroyboard&XIB,二是用纯代码手写UI,当然一个项目也很有可能是使用两种技术都用上了。
可以对目前最主流的APP包进行分析,参考xib 使用调研情况,可见目前这两种开发方式都很主流。总的来说,两者有如下优劣势。

StoryBoard优势
+ 开发界面所见即所得,可以快速通过拖拽构造界面。也可以明确地知道各个ViewController之间的转换关系
+ 代码量少,开发周期短
+ 关键是已经成为新建项目时候的默认配置,代表着苹果以后的方向和重心

遗憾
+ 很难多人协作
+ ViewController的重用和自定义的View的处理
+ 需要很大的显示器

手写代码UI优势
+ 适合大型项目大规模使用,利于版本管理、追踪改动以及代码合并
+ 最好的代码重用性

遗憾
+ 慢,开发周期长,维护代码复杂
+ 不能实时看到效果,只能一次次修改代码偿试
+ 自动布局AutoLayout困难

手写代码和Stortboard选择建议

实际开发过程中,完全不需要全程使用一种开发方式,可以具体情况来选择性的使用 Storyboard或者手写代码,下面是建议:

iOS UI调试的不爽的地方

相对其他两家(Windows App 和 Android)和Web开发,调试iOS UI要蛋疼得很多。首先如果你是使用Storyboard或者xib的话,有很多控件的属性是不能直接在里面修改的。比如边框属性和自定义View的一些属性(其实也是可以通过一些手段让Xcode直接支持的),而且也绘图的效果也不能直接看到,如果一个Storyboard里面的ViewController用多了,没有个大的显示器根本无法Hold住。如果你在里面使用跳转线,那关系就更复杂了。不过目前情况已经有所改观,你可以直接跳到其他的Storyboard,也可以使用代码来控制跳转导航。下图就是知名开源APP Yep项目内的Storyboard:

Yep APP的Storyboard 这个已经算比较整洁了,我还看过更乱的Storyboard布局
如果你是用代码写UI的话,那就是另一个极端了。你只能大概想象出自己写出来的UI是怎么样的,只有反复的调试才能达到自己满意的效果。而且把大部分的UI代码都放在ViewController里,也会让ViewController臃肿不堪。

所以对我来说(纯代码写UI),UI调试就是反复的修改代码,一次又一次地调整它的各种属性,以达到美工的需求。如果能够直接在APP里面动态地调试UI,获取View的各种属性,显示它的边框,位置,大小,字体和颜色,同时还可以直接修改这些属性,让其能够达到美工的需要,我们便可以根据已经调整过的UI直接获取它的属性,再在代码里面修改一步到位,那样就可以节省很多的反复调试时间。大大提升了iOS调试效率。

ViewChaos 的特性

ViewChaos的安装和使用

ViewChaos的安装极为方便,有两种安装方式,如果你不想用Cocoapods,只想拖文件,按照以下步骤就行:

如果你想用Cocoapods,就更简单了:

加上-DDEBUG

注意一定要添加-DDEBUG,加上这个功能是为了让ViewChaos可以在Debug模式下启动,而Release模式会不会启动。然后启动你的项目,你就可以看到你的APP里面多了一个V的绿色小圆,同时你的APP也有了摇一摇功能。下面我用图片和文字来给读者展示ViewChaos的各种功能,建议读者下载Demo用真机或者模拟器亲自试试,下面的详细讲解这些功能。

摇一摇功能

摇一摇呼唤出菜单

如果ViewChaos正确地集成到了你的APP里,那么就可以使用摇一摇调试功能。摇一摇功能里面一共有四个小功能,分别是放大镜,显示边框,显示透明度和标记界面。下面一个一个讲解

放大镜模式

放大镜模式比较简单,当启用后,用手指触摸屏幕,它会将你手指下的点放大显示(只支持单点),上面绿色区域可以显示该点的坐标和颜色值。

这样也行???

在这里其实针对单个View,我也做了标记功能(上面的动图都比较老,没有显示标记功能) ,只要在这个表里就可以启动这个功能

View位置
View位置

第一个功能就是改变View的位置,比较简单

View大小

第二功能就是改变View的大小,上面有两个按钮,一个是控制左上边的大小,一个是控制右下边的大小。

View边框

第四个功能就是改变View的边框,摇杆上面有三个子菜单,分别是颜色,边框和弧度,选择哪种就能控制哪种。

View颜色

最后一个功能就是生成代码啦,将所有的属性调整好之后,点一下code就能生成下面的代码。你可以从里面选择出有用的部分。

以上差不多就是VIewChaos的全部功能,要这里还是建议读者亲自去下载Demo试用一下。ViewChaos基本上能够满足大部分UI的调试,但是也有的属性还不能看到和修改,另外还希望读者给出建议,这些都是以后的改进方向。

�最后,如果大家觉得这个库对你的项目的帮助的话。或者也可以学到一些新技术的话,可以给个Star, 谢谢。再次放出地址ViewChaos

上一篇下一篇

猜你喜欢

热点阅读