[Xcode 實際操做]9、實用進階-(21)使用「調試視圖」查看各界面元素的層次順序

目錄：[Swift]Xcode實際操做

本文將演示如何在程序運行期間，查看模擬器各界面元素的層次順序。

在項目導航區，打開視圖控制器的代碼文件【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%的比例進行顯示。

左起第四個按鈕，能夠調整畫布的背景顏色。

點擊左起第三個按鈕，【調整視圖模式】按鈕，彈出視圖模式列表。

在【邊框模式中】：能夠到其餘被遮擋的視圖的邊框。

左起第五個按鈕，點擊【切換至三維模式】，將調試視圖切換至三維模式。

 

在調整視圖間距的左側滑桿上，向右拖動滑塊，增長視圖在三維環境中的距離。

在調整視圖間距的右側滑桿上，向左拖動右側滑塊，將從前至後，依次隱藏界面元素。

在調整視圖間距的右側滑桿上，向右拖動右側滑塊，將從後至前，依次顯示界面元素。

在調整視圖間距的右側滑桿上，向右拖動左側滑塊，將從後至前，依次隱藏界面元素。

在調整視圖間距的右側滑桿上，向左拖動左側滑塊，將從前至後，依次顯示界面元素。