Xcode的Debug View Hierarchy 功能使用

做iOS开发UI是很重要的一块内容。有时候想知道别人或者系统的那些精美的UI界面是怎么做的。一方面有源码的可以看源码学习，但是有时候想知道系统的一些控件的构成，可以借助一个强大的工具:Reveal,这个工具真的太好了，但是毕竟收费。不过幸好，现在Xcode也有这个功能了，那就是 Debug View Hierarchy。在调试导航页面下，点击这个按钮:


然后选择 View UI Hierarchy,就可以查看APP的视图结构和层次。那就拿一个简单的视图看下结果。比如说我想知道系统的UINavagationBar的层次结构，用View UI Hierarchy一看，就一目了然，非常形象和具体。

先看下模拟器里UI的界面：就是一个普通的UIView 和一个系统的NavagationBar。



再用View UI Hierarchy看下右边的层次结构图：从UIWindow下来，就可以很清楚看到UI界面的层次结构。



右边是3D效果的UI层次图：



结合具体视图效果和层次结构 视图就可以快速了解系统的UINavagationBar的结构。比如我想知道UINavagationBar里那个UIImageView是个什么东东，那就可以选中左边层次结构图中的UIImageView，然后查看右边的3D视图效果图：



UIImageView就是那根蓝色的线，那这个蓝色线到底是什么呢？那就要在模拟里看实际的效果图：



这个蓝色的线实际上就是UINavigationBar 与UIView的分割线，可以看到系统自带的UINavigationBar的分割线是用UIImageView做的。

还可以查看下系统自带的那个Back按钮，那个箭头

对应的是_UINavigationBarBackIndicatorView,文字Back当然对应的是UILabel。

总之，这个工具对于UI的调试和学习是非常有用的。因为通过这个调试工具，可以让我们很清楚看到UI的结构，而且还有3D图可以对比，走出代码，让UI更加具体和形象。