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

目录：[Swift]Xcode实际操作

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

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

import UIKit
 
 class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        //初始化第一个位置在(20,80),尺寸为(100,100)的视图对象
        let view1 = UIView(frame: CGRect(x: 20, y: 80,  100, height: 100))
        //设置视图的背景颜色为黑色
        view1.backgroundColor = UIColor.black
        
        //初始化第二个位置在(20,80),尺寸为(150,150)的视图对象
        //从其位置和尺寸信息可以看出，第二个视图将遮挡第一个视图，导致第一个视图不可见
        let view2 = UIView(frame: CGRect(x: 20, y: 80,  150, height: 150))
        //设置视图的背景颜色为紫色
        view2.backgroundColor = UIColor.purple
        
        //初始化第三个位置在(20,80),尺寸为(200,200)的视图对象
        //从其位置和尺寸信息可以看出，第三个视图将遮挡前两个视图
        let view3 = UIView(frame: CGRect(x: 20, y: 80,  200, height: 200))
        //设置视图的背景颜色为橙色
        view3.backgroundColor = UIColor.orange
        
        //将三个视图对象，依次添加到当前视图控制器的根视图
        self.view.addSubview(view1)
        self.view.addSubview(view2)
        self.view.addSubview(view3)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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