zoukankan      html  css  js  c++  java
  • [Xcode 实际操作]九、实用进阶-(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,  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,  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,  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%的比例进行显示。

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

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

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

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

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


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

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


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

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

  • 相关阅读:
    [BZOJ3257]树的难题
    [BZOJ4987]Tree
    [NOI2015][洛谷P2150]寿司晚宴
    P2221 [HAOI2012]高速公路
    BUG全集(我遇到的)
    NOIP2018游记
    BZOJ1103
    Google Chrome 优化
    特殊空格
    Ant Design Vue 使用
  • 原文地址:https://www.cnblogs.com/strengthen/p/10092517.html
Copyright © 2011-2022 走看看