[Xcode 实际操作]九、实用进阶-(21)使用“调试视图”查看各界面元素的层次顺序
本文将演示如何在程序运行期间，查看模拟器各界面元素的层次顺序。
在项目导航区，打开视图控制器的代码文件【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%的比例进行显示。
左起第四个按钮，可以调整画布的背景颜色。
点击左起第三个按钮，【调整视图模式】按钮，弹出视图模式列表。
在【边框模式中】：可以到其他被遮挡的视图的边框。
左起第五个按钮，点击【切换至三维模式】，将调试视图切换至三维模式。
在调整视图间距的左侧滑杆上，向右拖动滑块，增加视图在三维环境中的距离。
在调整视图间距的右侧滑杆上，向左拖动右侧滑块，将从前至后，依次隐藏界面元素。
在调整视图间距的右侧滑杆上，向右拖动右侧滑块，将从后至前，依次显示界面元素。
在调整视图间距的右侧滑杆上，向右拖动左侧滑块，将从后至前，依次隐藏界面元素。
在调整视图间距的右侧滑杆上，向左拖动左侧滑块，将从前至后，依次显示界面元素。
