iOS10 UI教程视图调试
iOS10 UI教程视图调试
iOS10 UI教程视图调试,当视图很复杂的时候,层次结构就不会很简单了。Xcode可以通过视图(View)调试帮助开发者解决层次结构复杂的问题。视图调试是在Xcode 6中引入的。通过视图调试,开发者可以看到当前的视图层次结构变为了一个可交互的三维原型视图,如图1.21所示。该三维视图除了展示app的视图层次外,还展示每个视图的位置、顺序和视图尺寸,以及视图间的交互方式。
图1.21 三维原型视图
【示例1-10:ViewHierarchy】以下将实现视图调试。具体的操作步骤如下:
(1)添加image.png图像到创建的项目中。
(2)打开Main.storyboard文件,对主视图进行设计,效果如图1.22所示。
图1.22 主视图的效果
需要添加的视图以及对它们的设置如表1-4所示。
表1-4 对视图对象的设置
视图 |
设置 |
Image View |
Image:image.png 位置和大小:(0, 0, 375, 667) |
Text View |
Text: 蒲公英的种子靠风来传播,只是借助那么小小的力量就得以繁衍生息,它大概也是唯一能够飞翔的花了吧。 Background:透明色 位置和大小:(31, 108, 312, 68) |
Switch |
位置和大小:(294, 217, 51, 31) |
(3)运行程序后,启动视图调试,启动视图调试的方式有两种:一种是从菜单中选择Debug|View Debugging|Capture View Hierarchy来启动视图调试;另一种方式是在运行app过程中,按下底部的Debug View Hierarchy 按钮,如图1.23所示。
图1.23 启动视图调试
(4)启动视图调试后,Xcode会对应用程序的视图层次结构拍一个快照并展示三维原型视图来探究用户界面的层级,如图1.24所示。
图1.24 视图调试
注意:在Xcode的调试区有9个视图调试过程中要用到的按钮和滑块儿,如图1.25所示。
图1.25 9个视图调试过程中要用到的按钮和滑块儿
这9个按钮和滑块儿从左到右排序的介绍如下:
- 调整视图间距:调整不同视图间的间距。
- 展示被剪切的内容:当前展示视图中被剪切的部分。
- 展示约束:展示选中视图的约束。
- 调整查看模式:选择性地展示3D渲染透视图,比如仅展示内容,仅展示框架以及同时展示内容和框架。
- 重置查看区域:将3D渲染透视图恢复至默认状态。
- 缩小:缩小3D渲染透视图。
- 恢复:将3D渲染透视图恢复至默认尺寸。
- 放大:放大3D渲染透视图
- 调整可视视图范围:隐藏视图或展示视图,一步步解析3D渲染视图,向左或者向右滑动滑块儿有相反的效果。
(5)使用重置查看区域按钮,重置查看区,此时会看到如图1.26所示。
图1.26 重置查看区
(6)使用调整视图间距滑块控件将视图间距调整为最大,此时会看到如图1.27所示的效果。
图1.27 调整视图视图间距
此时会看到三维原型视图,并且三维视图除了展示app的视图层次外,还展示每个视图的位置、顺序和视图尺寸,以及视图间的交互方式。当开发者拖拽这个三维视图时,可以看到这个三维视图的各个方面。
相关阅读:iOS10 UI教程层次结构的事件
iOS10 UI教程视图调试的更多相关文章
- iOS10 UI教程视图的绘制与视图控制器和视图
iOS10 UI教程视图的绘制与视图控制器和视图 iOS10 UI视图的绘制 iOS10 UI教程视图的绘制与视图控制器和视图,在iOS中,有很多的绘图应用.这些应用大多是在UIView上进行绘制的. ...
- iOS10 UI教程视图的生命周期
iOS10 UI教程视图的生命周期 说到视图的生命周期一般都是指视图控制器的视图生命周期.在视图的声明周期中最主要的有8个方法,分别为loadView().viewDidLoad().viewWill ...
- iOS10 UI教程视图和子视图的可见性
iOS10 UI教程视图和子视图的可见性 iOS10 UI教程视图和子视图的可见性,一个父视图可以通过clipsToBounds属性,定义子视图在边界(边界就是父视图的框架也就是父视图可以显示的范围) ...
- iOS10 UI教程视图的中心位置
iOS10 UI教程视图的中心位置 center表示的是视图的中心位置属性,这个属性在相对的UI层次结构上工作,和frame类似.center属性是一个在父视图上定义视图的位置的简便方法.center ...
- iOS10 UI教程视图的边界与视图的框架
iOS10 UI教程视图的边界与视图的框架 iOS10 UI视图的边界 在视图的几何形状中我们提到了视图属性中的一部分属性可以将定义的视图绘制在屏幕上.其中典型的3个属性为边界属性.框架属性以及中心位 ...
- iOS10 UI教程视图的几何形状
iOS10 UI教程视图的几何形状 视图属性中的一部分属性可以让定义的视图绘制在屏幕上.在讲解这些属性前,我们首先将讲解,定义视图的几何形状所涉及到的结构类型.这些结构类型如下: CGPoint:它表 ...
- iOS10 UI教程子视图和父视图UI层次结构和Views继承
iOS10 UI教程子视图和父视图UI层次结构和Views继承 iOS10 UI教程子视图和父视图UI层次结构和Views继承,本节将讲解与UI层次结构和Views继承相关的内容,其中包括子视图和父视 ...
- iOS10 UI教程基改变视图的外观与视图的可见性
iOS10 UI教程基改变视图的外观与视图的可见性 视图是应用程序的界面,是用户在屏幕上看到的对象.用户可以通过触摸视图上的对象与应用程序进行交互,所以视图界面的优劣会直接影响到了客户体验的好坏.和视 ...
- iOS10 UI教程层次结构的事件
iOS10 UI教程层次结构的事件 iOS10 UI教程层次结构的事件,层次结构中存在7个事件,对于这些事件的介绍如表1-3所示.通过这些事件,可以监听视图,当视图在层次结构上发生变化时可以被拦截,也 ...
随机推荐
- Java抽象类接口、内部类题库
一. 选择题 1. Person类和Test类的代码如下所示,则代码中的错误语句是( C ).(选择一项) public class Person { public String nam ...
- 26. Remove Duplicates from Sorted Array
题目: Given a sorted array, remove the duplicates in place such that each element appear only once and ...
- Linux vmstat字段解析
vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...
- 字符匹配算法之KMP
KMP算法的精华在于从前往后,逐步循环地向前滑动搜索词,来最大限度地减少重复匹配次数,以达到提高效率的目的. 移动位数=已匹配字符数-最后一个匹配字符所对应搜索词的位置[从1开始]. 更加详细且具体的 ...
- Mysql子查询
1单值(Scalar operand) 只有当外层(Parent)不为空时,才返回相应值:否则返回NULL. note:For the subquery just shown, if t1 were ...
- React Native实例之房产搜索APP
React Native 开发越来越火了,web app也是未来的潮流, 现在react native已经可以完成一些最基本的功能. 通过开发一些简单的应用, 可以更加熟练的掌握 RN 的知识. 在学 ...
- Vi 的基本使用
一.Vi入门 Unix 提供了全屏幕的Vi编辑器,这使我们的工作轻松不少.不少DOS用户抱怨Vi编辑器不象DOS下的编辑器如edit那么好用,这 是因为Vi考虑到各种用户的需要,没有使用某些通用的编 ...
- 名词解释——Ext JS4
Ext.onReady——Ext主入口,和onload事件不同,不需要页面所有东西加在出来. Ext js 的基本语法就是使用树状图来配置对象来定义界面: { config_options1:valu ...
- mipi和dsi
转自: http://blog.csdn.net/longxiaowu/article/details/24410021 一.MIPI MIPI(移动行业处理器接口)是Mobile Industry ...
- 在ubuntu上搭建开发环境8---Ubuntu搭建Android开发环境
需要首先配置好JDK环境 参看:http://www.cnblogs.com/xumenger/p/4460055.html 安装Eclipse 在Android developer的官网上直接下载a ...