团队 布局新玩具
谈谈最近做的项目,团队,就是下面这个东西。
功能很简单。在项目运行期间,点击选择不同的视图,并标注出视图之间的布局关系。
应用场景
这个主要的用例,我想到两点:1、自己在开发UI时,发现代码有问题,但又不能直接知道具体的布局偏差,此时使用团队框架,可以直接知道UI的布局关系,偏差具体多少像素。找到相关的代码后,根据已知偏差像素进行修改。2、UI 核实时,除了将截图发送到电脑,与原始设计稿比对外,又多了一种方式,可以使用团队框架,选择视图,查看布局数据与原始设计稿数据对比,以了解UI布局开发是否正确。
使用
支持将 pod 注入到项目中,只需在项目的 Podfile 中增加 pod 'Staff'
。
建议仅在调试环境中注入该库,以避免线上用户当游戏玩耍,点击查看你们的布局
Staff 的具体使用很简单。
代码层面,当需要启动 Staff 时,直接设置Staff.sharedInstance.enable = YES;
,如果不再使用 Staff 功能,则将其 enable
设置为 NO
即可。
操作方面,Staff 使用了单击、双击、三击操作。具体功能如下:
单击:单击选中、取消、切换关联视图。
在没有选中视图时,单击屏幕内的视图,则该视图被选择为主视图,此时显示如下:
仅选择主视图,显示主视图的宽、高。
在已经选择主视图的情况下,单击任一其他视图,则该视图被选择为辅助视图,此时显示如下:
主辅视图显示,并显示二者布局关系。(此时若再单击另一视图,则切换辅助视图,并重新标注主辅视图关系)
单击已经选择的主视图或辅视图,则取消选择。即剩余的一个视图变为主视图。
双击:双击切换主辅视图关系。即已经选择有主辅视图的情况下,二者调换主辅视图关系。原来以为主视图的变为辅助视图,原来以为了助视图变为主视图,并重新标注二者关系。
三击:三击屏幕,会显示一个详细视图。在布局紧凑,数据不易显示清楚时最实用。例如下面的主辅视图布局:
三击后显示详细布局:
当然,再次三击,详细布局会消失掉,不会影响到重新选择主辅视图。
如有其他疑问或使用问题、bug,可以直接在项目主页提交 issue 或 request。当然如果有其他优化想法或建议,也欢迎邮件联系我。