团队 0.0.3

团队 0.0.3

Later维护。



团队 0.0.3

  • Later

团队 布局新玩具

谈谈最近做的项目,团队,就是下面这个东西。

image.png

功能很简单。在项目运行期间,点击选择不同的视图,并标注出视图之间的布局关系。

应用场景

这个主要的用例,我想到两点:1、自己在开发UI时,发现代码有问题,但又不能直接知道具体的布局偏差,此时使用团队框架,可以直接知道UI的布局关系,偏差具体多少像素。找到相关的代码后,根据已知偏差像素进行修改。2、UI 核实时,除了将截图发送到电脑,与原始设计稿比对外,又多了一种方式,可以使用团队框架,选择视图,查看布局数据与原始设计稿数据对比,以了解UI布局开发是否正确。

使用

支持将 pod 注入到项目中,只需在项目的 Podfile 中增加 pod 'Staff'

建议仅在调试环境中注入该库,以避免线上用户当游戏玩耍,点击查看你们的布局

Staff 的具体使用很简单。

代码层面,当需要启动 Staff 时,直接设置Staff.sharedInstance.enable = YES;,如果不再使用 Staff 功能,则将其 enable 设置为 NO 即可。

操作方面,Staff 使用了单击、双击、三击操作。具体功能如下:

单击:单击选中、取消、切换关联视图。

在没有选中视图时,单击屏幕内的视图,则该视图被选择为主视图,此时显示如下:

仅选中主视图

仅选择主视图,显示主视图的宽、高。

在已经选择主视图的情况下,单击任一其他视图,则该视图被选择为辅助视图,此时显示如下:

主辅视图显示

主辅视图显示,并显示二者布局关系。(此时若再单击另一视图,则切换辅助视图,并重新标注主辅视图关系)

单击已经选择的主视图或辅视图,则取消选择。即剩余的一个视图变为主视图。

双击:双击切换主辅视图关系。即已经选择有主辅视图的情况下,二者调换主辅视图关系。原来以为主视图的变为辅助视图,原来以为了助视图变为主视图,并重新标注二者关系。

双击主辅视图切换

三击:三击屏幕,会显示一个详细视图。在布局紧凑,数据不易显示清楚时最实用。例如下面的主辅视图布局:

布局紧凑

三击后显示详细布局:

三击布局显示

当然,再次三击,详细布局会消失掉,不会影响到重新选择主辅视图。

如有其他疑问或使用问题、bug,可以直接在项目主页提交 issue 或 request。当然如果有其他优化想法或建议,也欢迎邮件联系我。

邮箱:[email protected]