一、YourView简介
YourView是一款桌面App，使用Objective-C语言开发，基于Apple SceneKit技术框架，支持将iOS App的View结构进行远端渲染并支持3D显示模式，还能够动态显示View树结构，方便开发者对App UI进行分析和调试。
在上一篇文章《UI分析工具YourView开源—App开发者不可多得的利器！》中，我们列举了一些YourView的特性，以及项目的GitHub地址：https://github.com/TalkingData/YourView 欢迎查看，Star&Fork。
在开发YourView之前，我们也有试用过一些其他的UI分析调试工具，但是这些工具大多数是收费的，而现有开源工具在功能上又难以满足需要。因此我们干脆自行研发并开源了YourView。
二、macOS和iOS通信
在开发之初，我们一直在调研相关的技术实现。也曾经一度跑偏，认为有什么黑科技可以把iOS内存里的UI数据直接dump到macOS中，然后macOS可以直接渲染绘制，所以一直在研究XPC和进程通信。
但后来发现这条路行不通，第一，iOS和macOS分属于ARM架构和X86架构，指令集不一样，直接dump内存到不同架构的设备上是无法兼容的；第二，macOS和iOS的开发框架不同，即使能够dump出内存，还需要做大量的框架桥接代码。所以最后选择了另外一条更为直接的路，把UIView序列化成JSON字符串结构，通过网络协议传输，接收方接受JSON数据后，再反序列化成内存中的对象，然后绘制展示。
01选择哪种网络协议？
网络协议可以使用WebSocket，也可以用HTTP协议。最后选择使用了HTTP协议。原因如下：
第一，WebSocket需要server端的支持，目前OC语言并没有十分好的WebSocket server实现。
第二，这次开发不需要特别高的实时性，所以HTTP协议是一个比较好的选择，而且OC语言已经有比较好的webServer实现——GCDWebServer和CocoaHttpServer。由于CocoaHttpServer最近的维护已经是几年前了，所以我选择了维护更频繁的GCDWebServer作为通信的Server端。
02 Server应该放在哪里？
放在桌面端：由于IP无法固定，每次iOS设备启动的时候需要动态的去配置IP地址，并且如果在iOS端提供输入框或者每次动态配置代码填入IP又太不友好，违背了易用性原则，于是放弃了这个选择。
放在iOS端：在iOS App内启动HTTP Server，有被劫持的风险，如果真的做成商用软件，这样做无疑是很危险的。但是作为一个开源软件来讲，这是OK的，因为在开放的源代码面前，一切都是透明的。如果开发者想开发自己桌面端，可以加上参数校验签名等机制，提升安全性。
03自动连接还是手动连接？
自动连接：iOS提供了BonjourService。Bonjour是法语你好的意思。这里跑题多讲几句。据研究表明（其实是瞎编的），全世界人民都比较喜欢异域文字带来的新奇感，就像会有人起名叫Tony一样，英语语系的人们也喜欢起一些奇怪的德系甚至拉丁语系的名字。所以这个BonjourService，翻译过来其实就是HelloService。字面意思很好理解，就是在局域网里广而告之，和局域网里的所有人SayHello。
这个服务最大的优势就是在局域网里可以自动的获取对方的IP地址，完成通信。现在很多厂商已经内置了BonjourService，特别是打印机厂商。在macOS上则无需知道对方的IP地址，就可以自动完成连接操作，非常方便。
手动连接：所以也考虑过在iOS端开启BonjourService，而且GCDWebServer已经实现了相关的接口。但是实践证明，当在macOS上实现BonjourService Browser之后，虽然能够自动识别设备，但是面对中间的网络异常，比如防火墙导致的网络无法连接等，并没有很好地方法进行提示，在连接不上的时候很容易让人摸不着头脑、不能准确了解状况。这样对开发者其实是不友好的。由于网络只是通信的必要手段，并不是UI查看的重点，所以我们选择把更多的精力放在UI绘制上，而将网络模块尽量做得轻量易于调试，于是放弃了自动扫描的方式。
衡量之下，我们选择在YourView桌面端启动的时候，给用户提供一个IP输入框。用户在输入IP之后，点击连接，如果网络有问题会直接弹框提示。虽然技术上的自动好过手动，但是自动带来的复杂性和不确定性，以及考虑到在实践中的实际表现，最后还是选择了手动连接的方式。想来，这可能和老司机喜欢开手动档车是一样的吧，我们都喜欢操作可控带来的感觉（其实也是因为懒）。
三、UIView的序列化
如果对树的操作不熟悉，那么可以移步LeetCode，先把关于树的操作的问题敲一遍。UIView其实就是一棵多叉树。每个节点具有数据域和指针域，数据域就是自身的属性，指针域就是关系，在UIView中就是subViews。所以理解了这一点，就很容易写出序列化代码了。
01序列化方案一： 非递归平铺树
借助栈或者队列的帮助，对View树进行遍历把每个节点变成一JSONObject，然后把这些Object放到一个数组里。最后整棵树就像被拍平了一样，树变成了列表。把拍平的节点数组作为数据源，驱动TableView显示，然后根据每个节点自身的深度在对应的cell上绘制对应的缩进，用来表示树的层次结构。
这样的做法在UI中可以表现出树的层次结构，但是实际上已经丢失了树的两个重要特征，兄弟关系、父子关系。前驱后继关系丢失之后，对节点的收缩和展开操作就不太方便了。
02序列化方案二：递归关系树
贴一段简化过的递归代码：
-(NSDictionary*)traversal{ NSMutableArray * subArr = [NSMutableArray array]; for (UIView * v in self.subviews) { [subArr addObject:[v traversal]]; } return @{@"sub":subArr};}这段代码执行之后，就在JSON结构里保存了UIView的父子和兄弟关系。
03序列化中对数据域的处理
UIView对象
iOS端需要保存UIView对象，为后续的macOS端的操作（比如编辑）做准备。但是随着界面的滚动，UIView可能被释放掉。所以这里选择了用NSMapTable用来做存储容器。
存储的Key就是UIView的内存地址：
-(NSString*)_address{ return [NSString stringWithFormat:@"%p",self];}存储的是UIView对象本身，当UIView因为离开屏幕而被释放的时候，使用内存地址取值为空，不会产生野指针。
map引用传递
稍微改造一下我们的递归函数，在递归参数中增加用来记录的map。需要注意这个map是引用传递，递归中的每次调用都指向同一个map。
-(NSDictionary*)traversalWithRecorder:(NSMapTable*)map{ NSMutableArray * subArr = [NSMutableArray array]; [map setObject:self forKey:[NSString stringWithFormat:@"%p",self]]; for (UIView * v in self.subviews) { [subArr addObject:[v traversalWithRecorder:map]]; } return @{@"sub":subArr};}StepIn对象
1.UIViewController的获取
想获取一个UIView对应的ViewController，可以使用nextResponser属性，直到找到UIViewController停下。假如UIView的平均深度是10，有N个View，那么需要迭代的次数就是N*10。这样会使得时间复杂度提升，所以我们对此进行了一些优化。对于UIView，只找最近一级的nextResponder，如果这个Responder是UIViewController那么选择记录在自己的data域内，并且把这个UIViewController作为递归的参数传递到下一级，否则把递归中父节点的controller作为自己的ViewController。再次改造递归函数：
-(NSDictionary*)traversal:(UIViewController*)vc{ UIViewController * vcToNext = vc; if ([[self nextResponder]isKindOfClass:[UIViewController class]]) { vcToNext = [self nextResponder]; } NSMutableArray * subArr = [NSMutableArray array]; for (UIView * v in self.subviews) { [subArr addObject:[v traversal:vcToNext]]; } return @{@"sub":subArr};}2.递归
对于UITableViewCell和UICollectionViewCell也是同样的操作，在获取IndexPath的时候，也只向上找一级，否则直接从递归的参数中获取，递归的初始值是默认的section=-1，row=-1。
3.Depth和level的处理
Depth表明的是当前View所在树的深度。Depth可以从当前的View直向上找superview，直到superView为空为止。但是这样的处理也会带来和UIViewController获取同样的问题。所以这个和UIViewController一样的处理策略，每次递归的时候，把当前的depth加1，向下传递。序列化后的view属性：
无论是Depth还是level，抑或ViewController和IndexPath，它们都是从上级递归而来并且在当次递归中拼接自己的参数，所以我们选择把这些属性封装在一个StepIn对象里，并抽象出一个stepin方法。每次递归开始，StepIn对象都会根据当前的view的状态，进行相应的stepin操作。具体的代码可以参考libyourview/serializer/UIView+YVTraversel
截图的处理
由于截图需要在JSON里传输，所以需要把截图的imgData转换成base64编码的string。截图是针对layer的操作，在截图的时候，一定不能带上sublayer。所以在针对每个View进行截图的时候，需要把没有hidden的layer变成hidden状态，并保存在数组中，在截图方法调用完毕之后，需要把数组layer的hidden属性进行restore操作。
四、macOS端的渲染
桌面端一共有三个ViewController：Left、Middle和Right。其中Left负责展示树状结构，Middle负责3D展示，Right负责展示view属性。
Left
由于上文中的序列化操作已经把UIView变成了树状的JSONString，所以直接把序列化之后的string转化为NSDictionary并作为数据源驱动NSOutlineView展示就OK了。
Middle
1.使用SceneKit渲染
用平面SCNPlane来展示UIView的截图。展示的同时需要把UIView的坐标从UIKit坐标系转换到SceneKit坐标系。转换公式如下：
2. 射线检测
鼠标移动的时候需要将鼠标指向的View边框高亮，边框是当前Node的一个subNode，在被指向的时候，将前一个unhover，将当前指向的高亮。选中也是同样的道理，鼠标单击的时候，将射线击中Node的子Node的hidden属性置为No即可。SceneKit提供了类似射线检测的API，直接用point和plane调用hitTest方法，取返回结果的第0个元素即可。
3. Z轴控制
目前YourView共支持三种显示模式。现在大部分开源软件的做法是将所有View拍平之后按照深度优先的顺序每层排列一个，如果View特别多的话，会造成所有z轴特别大，在旋转的时候视觉效果很差。YourView则实现了智能回溯算法，在深度优先的基础上，递归中记录当前被占据的level和frame，每次新的view进来都会从深度优先的基础上向前回溯，一直找到第一个不被遮挡的位置。
4. 相机的选择
可以在Xcode的场景编辑器里直观的感受一下。左边是透视相机，右边是正交相机。
正交相机：orthographicCamera 所见即所得，所有View的scale不随深度变化；
透视相机：View近大远小。
为了更好的视觉效果，YourView选择使用正交相机用来展示View。
五、后续的优化
目前YourView只实现了3D渲染，对UIView的动态编辑能力还比较弱，后续会继续完善编辑功能；
在View树里增加UIViewController 手势，布局等元素；
UI美化工作和用户体验提升。
六、参考资料
Apple SceneKit：https://developer.apple.com/scenekit/
Bonjour：https://developer.apple.com/bonjour/
接下来，我们会进一步完善与优化YourView，为大家提供更好的使用体验，同时，也欢迎大家使用YourView（项目地址：https://github.com/TalkingData/YourView），也欢迎大家为我们提供宝贵的建议和意见，让我们一起维护这个项目~
作者：张自玉
