[Xcode10 实际操作]九、实用进阶-(22)使用“调试视图”查看各界面元素的层次顺序

本文将演示如何在程序运行期间，查看模拟器各界面元素的层次顺序。

在项目导航区，打开视图控制器的代码文件【ViewController.swift】

 1 import UIKit
 2  
 3  class ViewController: UIViewController {
 4     
 5     override func viewDidLoad() {
 6         super.viewDidLoad()
 7         // Do any additional setup after loading the view, typically from a nib.
 8         
 9         //初始化第一个位置在(20,80),尺寸为(100,100)的视图对象
10         let view1 = UIView(frame: CGRect(x: 20, y: 80, width: 100, height: 100))
11         //设置视图的背景颜色为黑色
12         view1.backgroundColor = UIColor.black
13         
14         //初始化第二个位置在(20,80),尺寸为(150,150)的视图对象
15         //从其位置和尺寸信息可以看出，第二个视图将遮挡第一个视图，导致第一个视图不可见
16         let view2 = UIView(frame: CGRect(x: 20, y: 80, width: 150, height: 150))
17         //设置视图的背景颜色为紫色
18         view2.backgroundColor = UIColor.purple
19         
20         //初始化第三个位置在(20,80),尺寸为(200,200)的视图对象
21         //从其位置和尺寸信息可以看出，第三个视图将遮挡前两个视图
22         let view3 = UIView(frame: CGRect(x: 20, y: 80, width: 200, height: 200))
23         //设置视图的背景颜色为橙色
24         view3.backgroundColor = UIColor.orange
25         
26         //将三个视图对象，依次添加到当前视图控制器的根视图
27         self.view.addSubview(view1)
28         self.view.addSubview(view2)
29         self.view.addSubview(view3)
30     }
31     
32     override func didReceiveMemoryWarning() {
33         super.didReceiveMemoryWarning()
34         // Dispose of any resources that can be recreated.
35     }
36  }

点击代码编辑窗口左下角，第四个图标【调试视图层级】，

进入视图层级调试导航面板。

在当前窗口中，查看界面所有元素的层级关系。

点击【+】或【-】可以放大或缩小当前视图。

点击【=】使视图按100%的比例进行显示。

左起第四个按钮，可以调整画布的背景颜色。

点击左起第三个按钮，【调整视图模式】按钮，弹出视图模式列表。

在【边框模式中】：可以到其他被遮挡的视图的边框。

左起第五个按钮，点击【切换至三维模式】，将调试视图切换至三维模式。

扫描二维码关注公众号，回复： 4437645 查看本文章

在调整视图间距的左侧滑杆上，向右拖动滑块，增加视图在三维环境中的距离。

在调整视图间距的右侧滑杆上，向左拖动右侧滑块，将从前至后，依次隐藏界面元素。

在调整视图间距的右侧滑杆上，向右拖动右侧滑块，将从后至前，依次显示界面元素。

在调整视图间距的右侧滑杆上，向右拖动左侧滑块，将从后至前，依次隐藏界面元素。

在调整视图间距的右侧滑杆上，向左拖动左侧滑块，将从前至后，依次显示界面元素。