第二章:使用Storyboard设计用户界面(一)
迄今为止你对Xcode开发环境已经有了一个基本概念。让我们开始设计我们第一个app的用户界面。在项目导航窗口,选择“Main.storyboard“文件。Xcode会显示一个Storyboard用户界面编辑器。
我们使用storyboard布局视图并且在不同视图之间切换。因为我们使用“Single View Application“模板,所以storyboard已经包含了一个view controller scene。一个scene(场景)在storyboard中代表一个view controller 和它包含的view(视图)。iOS app开发中,view是创建用户界面最基础的模块。每个类型的view有它自己的功能。例如,在storyboard中的container(容器)view的功能就是放置其他的view例如按钮、标签、图片等等。
view controller就是设计用来管理view controller和view以及subviews(如按钮、标签)之间的关系的。如果你被view和view controller质检的关系头疼的话,不用担心。在后面的章节中我们会讨论view和view controller如何协同工作。同时,专心学习如何使用storyboard和Interface Builder布局UI界面。
Interface Builder的Outline view(大纲视图)显示了所有的scene和scene下面的对象的大概情况。在你想在storyboard中选择一个特别的对象时outline view非常有用。如果屏幕上看不到outline view,则使用触发按钮打开或关闭outline view。
禁止Size Class
如果你有Xcode 5的经验,你可能会奇怪Xcode 6的View Controller大小和Xcode 5不一样。Xcode6的view controller比较大并且看起来不像一个iPhone。它现在是一个“一种尺寸适应所有”的画布。这就算即将介绍的Size Classes技术。
Size Classes是iOS8引入的新技术。通过使用Size Classes,开发人员使用统一的storyboard同时创建iPhone和iPad 的app UI。在此之前,如果你需要创建一个同时支持iPad和iPhone的app,你需要创建两个不同的storyboard,每个设备一个。
这里我们先不过多介绍size classes技术。为了让问题简单化,我们把第一个项目的size classes关闭。在文件属性观察器中Interface Builder Document 下面,取消勾选“Use Size Classes”复选框。如果文件属性选择器被隐藏了,你可以通过点击ViewUilitiesShow File Inspector.
当你禁用size classes,Xcode将会提示你选择目标设备。对于我们的项目,选择iPhone并且点击“Disable Size Classes”确认。现在view controller看起来更像一个iPhone了。
添加一个按钮
下一步我们将添加一个Hello World按钮到视图里。目标库(Object library)位于工具空间(utility area)的底部。在目标库里你可以选择任何UI 控件并且拖拽到视图中。如果你没有看见目标库,你可以点击“Show the Ojbect Library”按钮。
你可以使用触发按钮来切换列表视图和图标视图。 如果你想了解更多Object Library 相关内容,只需要点击它然后Xcode将会显示控件的简要说明。好了,是时候添加一个按钮到视图中了。所有你需要做的就是从目标库拖拽一个按钮到视图中。
当你拖拽按钮到视图时,如果按钮到达中心你会看到水平和垂直标志线。然后停止拖拽,释放你的按钮,这样按钮就放到视图中央了。
专题目录: