前言
2016年左右，设计同学对UI要求比较高，经常要因为几个像素调半天，Xcode的视图层次工具不是那么好用，也没有Lookin这样的工具可用。最重要的是沟通UI的时候通常是单独拿着手机在设计同学或测试同学身边沟通，需要脱离Mac。为此产生自己在手机上绘制一下视图层次结构的想法。
设计
设计需求
- 脱离Mac，只在iPhone上使用。
- 可以查看视图层次结构。
- 简单预览视图信息，如类名、坐标、文本、图片等基本属性。
- 预设一些无需显示的类型。
- 显示高级信息，如选定2个视图的距离，可磁吸到像素的测距尺。
思考方案
- 作为sdk引入app使用，可充分获取app内视图信息。
- 获取视图的屏幕坐标，将视图进行截图作为预览，用于展示视图层次结构。
- 类名、坐标、文本可以直接获取，图片可通过替换“imageNamed:”、“initWithContentsOfFile:”等方法获取图片名。如果使用SDWebImage加载网络图片，还可以使用sd_imageURL作为图片url。
- 无需显示的类型分两种，一种是本身无需关注，但子视图需要关注，如“UINavigationTransitionView”，另一种是本身和子视图都无需关注，如“_UITextContainerView”
- 不想一个工具太过复杂，更多高级信息还是作为另一个工具处理。
- 视图+信息可能会太拥挤，因此需要放大、缩小、拖动操作，再加个圈中后按列表显示的方式。
设计用法
- 启动功能则创建Debug窗口，默认读取所有非Debug的Window信息。
- 默认全屏预览，通过斜切、拖动、缩放查看相关视图。
- 切换选择状态，分屏展示，上半部展示整体预览图，可以进行选择。下半部以列表的方式展示选中视图的信息。
- 为了避免屏幕信息密集，因此可切换信息显示的多寡。
- 有时需要隐藏的业务视图信息，因此可切换是否展示隐藏视图。
- 屏幕视图太多，可调整显示层级范围，减少显示的视图数量。
设计接口
- 每个项目都可能自定义各种类型的View，有的需要关注，有的无需关注，因此首先应该提供的配置项是无需显示的2种视图类型。
- 接口直接设计成一个View，用户想在哪展示就放哪展示。
- 设置目标视图，要展示哪些视图的层次结构。再加一个直接展示所有Window的。
- 切换分屏状态，分屏后下半部以列表展示信息。
- 切换选择状态，非选择状态下可拖动、缩放，斜切。
- 对于无需显示的视图，为防万一，也要加个开关，可以开启显示。
- 准备一个预处理好的Debug窗口，一个语句即可展示app全部视图层次结构。
- Debug窗口的菜单有相关操作，但也应该提供给用户自定义，因此将菜单数组作为配置项，按惯例作为组件接口配置。
实现
设计上都是可行的，实现时只要一点点堆砌代码就可以了。
https://gitee.com/pkgogai/gydfoundation_public
/GYDDebugFoundation/Code/GYDViewHierarchy/*
image.png
