iOS10 UI教程视图调试

iOS10 UI教程视图调试

iOS10 UI教程视图调试，当视图很复杂的时候，层次结构就不会很简单了。Xcode能够经过视图（View）调试帮助开发者解决层次结构复杂的问题。视图调试是在Xcode 6中引入的。经过视图调试，开发者能够看到当前的视图层次结构变为了一个可交互的三维原型视图，如图1.21所示。该三维视图除了展现app的视图层次外，还展现每一个视图的位置、顺序和视图尺寸，以及视图间的交互方式。

图1.21  三维原型视图

【示例1-10：ViewHierarchy】如下将实现视图调试。具体的操做步骤以下：

（1）添加image.png图像到建立的项目中。

（2）打开Main.storyboard文件，对主视图进行设计，效果如图1.22所示。

图1.22  主视图的效果

须要添加的视图以及对它们的设置如表1-4所示。

表1-4  对视图对象的设置

视图	设置
Image View	Image：image.png 位置和大小：(0, 0, 375, 667)
Text View	Text：        蒲公英的种子靠风来传播，只是借助那么小小的力量就得以繁衍生息，它大概也是惟一可以飞翔的花了吧。 Background：透明色 位置和大小：(31, 108, 312, 68)
Switch	位置和大小：(294, 217, 51, 31)

（3）运行程序后，启动视图调试，启动视图调试的方式有两种：一种是从菜单中选择Debug|View Debugging|Capture View Hierarchy来启动视图调试；另外一种方式是在运行app过程当中，按下底部的Debug View Hierarchy 按钮，如图1.23所示。

图1.23  启动视图调试

（4）启动视图调试后，Xcode会对应用程序的视图层次结构拍一个快照并展现三维原型视图来探究用户界面的层级，如图1.24所示。

图1.24  视图调试

注意：在Xcode的调试区有9个视图调试过程当中要用到的按钮和滑块儿，如图1.25所示。

图1.25  9个视图调试过程当中要用到的按钮和滑块儿

这9个按钮和滑块儿从左到右排序的介绍以下：

• 调整视图间距：调整不一样视图间的间距。
•  展现被剪切的内容：当前展现视图中被剪切的部分。
•  展现约束：展现选中视图的约束。
• 调整查看模式：选择性地展现3D渲染透视图，好比仅展现内容，仅展现框架以及同时展现内容和框架。
• 重置查看区域：将3D渲染透视图恢复至默认状态。
• 缩小：缩小3D渲染透视图。
• 恢复：将3D渲染透视图恢复至默认尺寸。
• 放大：放大3D渲染透视图
• 调整可视视图范围：隐藏视图或展现视图，一步步解析3D渲染视图，向左或者向右滑动滑块儿有相反的效果。

（5）使用重置查看区域按钮，重置查看区，此时会看到如图1.26所示。

图1.26  重置查看区

（6）使用调整视图间距滑块控件将视图间距调整为最大，此时会看到如图1.27所示的效果。

图1.27  调整视图视图间距

此时会看到三维原型视图，而且三维视图除了展现app的视图层次外，还展现每一个视图的位置、顺序和视图尺寸，以及视图间的交互方式。当开发者拖拽这个三维视图时，能够看到这个三维视图的各个方面。

 

相关阅读：iOS10 UI教程层次结构的事件