察看视图控制器和它的视图
在你之前的学习中,一个视图控制器管理一个场景,它代表内容的一块区域. 这块内容就是在就是你在视图控制器的视图种看到的那块区域. 在这一章中,你要更加仔细的查看通过HelloWorldViewController来管理的场景 以及 学习如何修改它的视图的背景颜色.
使用察看器(Inspector)检查视图控制器
当一个应用运行的时候,这个主故事板文件会被加载并且实例化初始视图控制器. 这个初始视图控制器管理着当应用打开时用户看到的第一个场景. 因为这个Single View 模版只提供了一个视图控制器, 因此它自动设置了初始视图控制器. 你通过使用Xcode的察看器来验证视图控制器的状态,以及发现关于它的其他属性.
去打开察看器 . . .
-
如果有必要,在工程导航器(project navigator)中点击MainStoryboard.storyboard来在画布上显示场景.
-
在这个大纲视图种, 选择 Hello World View Controller (他在First Responder的下面).
你的工作区窗口应该会看到如下图这样:
注意 场景和场景停靠栏都变成了蓝色轮廓, 并且视图控制器对象在场景停靠栏上是被选中的.
-
在工具栏上点击View Button最右边的按钮来显示窗口中最右边的使用工具区域 (或者选择 View > Utilities > Show Utilities).
-
在使用工具区域点击Attributes inspector按钮来打开属性察看器(Attributes inspector).
属性察看器 位于 实用工具区域顶部的察看选择栏(inspector selector bar)上的从左数第四个按钮:
属性察看器打开的时候,你的工作区窗口应该会看到类似于下图这样 (你可能需要改变窗口大小才能看到所有的东西):
在视图控制器的属性察看期的部分, 你会看到初始场景已经被选择了:
注意 取消勾选此选项,这个初始场景选择器将会从画布上消失(那个指向场景的箭头).对于这个教程,确保初始场景选项依然被选中.
改变视图的背景颜色
在这个教程之前, 你学到了一个视图提供了白色的背景,在你在模拟器运行应用时就会看到它. 要想确保你的应用是否正确工作,你可以视图颜色的背景颜色(不是白色) 并且再次在模拟器中运行应用来验证是否显示新的颜色.
在你改变视图的背景颜色之前, 确保故事板仍然在画布上打开着. (如果有必要, 在工程导航器种点击MainStoryboard.storyboard
来画布上打开故事板.)
去设置视图控制中视图的背景颜色 . . .
-
在大纲视图中, 点开Hello World View Controller的箭头 (如果它还没有打开) 并且选择视图.
-
如果属性察看器还没有打开, 在 实用工具区域的顶部的 察看选择栏(inspector selector bar)中点击属性按钮 来打开属性察看器.
-
在属性察看期里,在Background弹出菜单的白色矩形区域来打开颜色窗口.
这个矩形区域显示了当前条目的当前背景颜色. 这个Background弹出菜单看似像下图这样:
注意: 如果你没有点击这个白色的矩形区域, 而是点击的 Default 区域并且打开弹出菜单,那么可以再选择 Others 来显示颜色窗口.
-
你的工作区窗口 (和颜色窗口) 应该看着像下图这样:
注意 因为当你选择视图的时候,Xcode会将它高亮,因此你在画布上看到得颜色也许看上去和你在颜色窗口中选择得颜色不同.
-
点击Run按钮 (或者选择 Product > Run) 去在模拟器测试你的应用. 确保在Xcode工具栏上的Scheme弹出菜单仍然显示的是 HelloWorld > iPhone 5.0 Simulator. 你应该能够看到如下图这样:
提示 你不需要在运行你的应用之前去保存的工程,因为当你点击Run(或者选择 Product > Run)的时候, Xcode会自动保存你改动过的文件.
在你继续学习教程之前, 还原视图的背景颜色为白色.
去还原视图的背景颜色 . . .
-
在属性察看器, 通过点击箭头来打开Background的弹出菜单.
注意 Background弹出菜单上所显示的颜色已经变成了你在颜色窗口选择的那个颜色了. 如果你点击颜色的矩形区域(不是箭头), 这个颜色窗口会再次打开. 因为你想要重新使用视图的原始背景颜色, 所以从Background菜单中要比在颜色窗口出更容易找到原始颜色.
-
在Background弹出菜单中, 并在菜单中的Recently Used Colors 部分 选择白色正方形.
-
点击Run按钮来编译并运行你的应用 (并且会保存你的更改).
当你验证了应用再次显示了白色背景后,关闭模拟器.
当你运行应用的时候,Xcode也许会在工作区窗口的底部打开Debug区域(Debug area). 在这个教程中你不需要使用此面板, 所以你可以关掉它为你的窗口提供更大的空间.
去关闭Debug区域 . . .
-
在工具栏上 点击Debug View Button
这个Debug View Button在View Button的中间,可以看到类似于下图这样:
.
概括
在这一章中,你察看了场景以及改变(并还原)了视图的背景颜色.
在下一章,你将会添加一个文本框,标签,和允许与应用程序交互的按钮.