Storyboard 教程(上)

偏执的太偏执、 2022-06-09 08:08 580阅读 0赞

Storyboard是在iOS5之后新增的一个令人兴奋的功能,使用Storyboard可以节省很多的时间来构建你的app界面.

![这里写图片描述][20151117111906390]

为了向你介绍什么是Storyboard,我会以一张图片为例.下面这张图就是你在本教程中使用Storyboard完成的一个app.

![这里写图片描述][20151117112157724]

*  你也许还不是十分了解这个app是做什么的,但是你可以清楚的看到它哪些界面,以及这些界面关系.
 *  你可以在Storyboard看到所有的ViewController的布局,并且可以描述它们之间的联系.使用Storyboard中,你可以更好的理解在app中所有的界面.
 *  Storyboard可以描述在多个场景之间的过渡(transitions).这些过渡被称作”segues”.在Storyboard,你可以通过正确的连接你的ViewController来创建这些segues.感谢segues!你只需要很少的代码管理你的UI.
 *  Storyboard可以让tableView与基本的cell和静态cell的工作更容易.你几乎可以完全在Storyboard中设计你的tableView,这样就减少了大量的代码.
 *  Storyboard可以让Auto Layout更加容易,使用Auto Layout允许你在元素之间的数学关系,确定这些元素之间的位置关系.这个强大的工具可以让你更容易操作不同尺寸和大小的设备.在这个教程中你将使用Auto Layout,但是关于Auto Layout的知识在不在本教程的范围之内,不过你可以在[Auto Layout Tutorial][]或者[watch the video series][]了解更多关于Auto Layout的内容.

在这篇Storyboard教程中,你将会创建一个简单地app,允许你创建一个玩家和游戏以及他们技能的列表,在学习的过程中,你将学会在一些最常见的任务中使用Storyboard.

## 让我们开始吧! ##

打开Xcode,接着创建一个新的工程,选择 Single View Application.如下图:

![Xcode Project][]

之后Xcode会创建这个项目,Xcode的主窗口如下图:

![这里写图片描述][20151117112708780]

新的项目包含两个类, AppDelegate.[Swift][] 和 ViewController.[swift][Swift],以及本教程的关键:Main.storyboard文件.   
这个app仅支持竖屏,所以需要在General->Deployment Info -> Device Orientation取消Landscape Left和Landscape Right选项.   
现在让我们看一看Storyboard.在项目导航栏里点击Main.storyboard,之后会在 Interface Builder编辑器里看到Storyboard.

![这里写图片描述][20151117112832916]

一个viewController的的storyboard官方术语是”场景(scene)”,你可以使用这个术语.所谓场景(scene)就是一个控制器在storyboard中的显示.

你可以看到包含一个空view的简单viewController.在storyboard,左边的箭头指向一个ViewController,这个箭头代表这个ViewController是一个初始控制器.

在storyboard编辑器中,你可以从右下角Object Library中拖拽出一些控件来为你的ViewController设计布局.你会看到仅仅一瞬间就完成了,它是多么神奇啊!

--------------------

### Note: ###

你可能会注意到在storyboard中,默认的控制器是正方形的.Xcode7可以为这些默认控制器设置Auto Layout和Size Classes.Auto Layout和Size Classes允许你灵活地改变用户界面的尺寸,这对于有许多尺寸的iPhone和iPad来说是非常有用的.为了能够学到更多关于size classes的内容,查看[Adaptive Layout video tutorial series][],在本课程中,你会把可选的步骤场景在你的storyboard中,这样你就可以更容易的看到最终屏幕上的样子.

--------------------

在你探索之前,调整模拟场景为iPhone6/6s.   
在Document Outline选择 View Controller .如果你没有看到Document Outline,点击storyboard中左下角的这个按钮:   
![这里写图片描述][20151117113410894]

在Attributes Inspector底下的Simulated Metrics(模拟度量)属性,改变Size为iPhone 4.7 inch,如图:

![这里写图片描述][20151117113450622]

在storyboard中,这个尺寸是iPhone6/6s的屏幕尺寸.   
在storyboard中,“inferred”是Simulated Metrics里默认的设置.Simulated Metrics是一个在storyboard中的视觉辅助设计,也就是你的屏幕最终的样子.仅仅需要记住的是,它们不会在运行时被使用.   
为了体会storyboard是如何工作的,可以在右下角控制器面板的Object Library中拖拽一些控件:

![这里写图片描述][20151117113536284]

当你拖拽这些控件的时候,它们会出现在左侧的 Document Outline 中:

![这里写图片描述][20151117113609869]

storyboard中显示了你创建的所有控制器,目前仅仅有一个view controller (或者是scene)在你的storyboard中,但是在本教程中你会加入其他几个控制器.在这个场景之上有,一个微型版的Document Outline,称作Dock.

![这里写图片描述][20151117113700088]

在这个场景中,Dock显示了顶层的对象,每一个场景都拥有至少一个View Controller 对象, 一个 First Responder 对象, 和一个 Exit 选项,但是它也可能拥有其他顶级的对象.Dock可以很方便的连接这些outlet和action.如果你想要连接其他的view controller,你可以很简单地从Dock中拖拽它的图标.

--------------------

### Note: ###

你可能不太想使用First Responder.它是一个代理对象,指的是任何对象在任何给定的时间内的第一响应状态.举一个例子,你可以把按钮的Touch Up Inside事件连接到First Responder的selector上.如果在某个时候,一个文本框是输入的焦点,然后你可以按下按钮来让作为第一响应者的文本字段拷贝到粘贴板.

--------------------

运行这个app,它应该看起来和你在编辑器里设计的完全一样(你的可能看上去不同于下面的截图—这仅仅是为了演示,不会在以后的教程中使用):

![这里写图片描述][20151117113804689]

你定义的这个 View Controller作为初始的控制器—但是app怎样才能加载它呢?看一看应用程序的代理就可以找到答案.打开AppDelegate.swift你会看到源代码从这里开始.

import UIKit
    
    @UIApplicationMain
    class AppDelegate: UIResponder, UIApplicationDelegate { 
    
        var window: UIWindow?
    
        func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.
        return true
      }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11

在AppDelegate这个类的指定文件的头部,@UIApplicationMain属性作为模块的入口点.这个属性使用storyboard所必须的.你的应用程序委托继承自UIResponder,并且他还有一个UIWindow属性.所有的方法都是空的.甚至是application(\_:didFinishLaunchingWithOptions:) 也只是简单地返回了true.

这个秘密在一个叫做info.plist的文件中.在导航栏里点击 Info.plist 你将看到下面这些内容:

![这里写图片描述][20151117113927631]

Storyboard app使用的这个键UIMainStoryboardFile,也被称为”storyboard file base name”,为了能够指定Storyboard的名称,必须在加载被命名的storyboard文件,自动地从storyboard中实例化”Initial View Controller”,然后把控制器的view添加到一个新的UIWindow对象上. 你也可以在General tab里Deployment Info下地Project Settings里看到这个部分:

![这里写图片描述][20151117114000852]

现在来创建一个包含几个view controller的Ratings app吧~

## 仅仅把它添加到我的标签里 ##

你将要创建的Ratings app有一个TabBarController,并且跟着两个item,使用storyboard非常容易创建.

你将会在一个空的storyboard上开始创建,所以切换回Main.storyboard ,然后删除默认创建的view controller.这可以通过在Document Outline 点击View Controller 然后按下delete键,就可以删除了.

为了方便,再一次改变Simulated Metrics让其作为一个iPhone来显示这个场景.当你做之前,在Document Outline选中Tab Bar Controller,然后在右侧的 Attributes Inspector ,改变 Size 为iPhone 4.7 inch.这两个view controller也会跟着改变,大小都变为 iPhone 6/6s的尺寸.

![这里写图片描述][20151117114135066]

这个新的 Tab Bar Controller 已经预配置好了两个view controller.UITabBarController也被称作[Container][] view控制器,因为它包含了一个或者更多其他的视图控制器.其他两个常用的容器是Navigation Controller 和Split View Controller(在后面你将使用的是Navigation Controller).

容器之间的关系是由Tab Bar Controller 和 view controller 的箭头代表的.下图看到的在箭头中间的图标代表特定的嵌入关系.

![这里写图片描述][20151117114214538]

--------------------

### Note: ###

如果你想同时移动或缩小Tab Bar Controller和它的附加视图控制器,你可以按住⌘-点击或点击和拖拽多个选中的场景.这才有可能使他们在一起.(选中的场景有一条蓝色的轮廓.)

--------------------

往第一个view controller(当前显示的标题是”Item 1”)中拖拽一个UILabel,双击,然后设置这个label的标题为”First Tab”.然后也拖拽一个UILabel在第二个view controller(“Item 2”),设置这个label的标题为”Second Tab”.当你在这两个控制器之间接切换时确实看到发生了某些变化.

--------------------

### Note: ###

当你缩小编辑器的时候,你是不能往这些控制器里拖拽控件的.你可以通过双击这个工作区间来返回到正常缩放尺寸.

--------------------

编译并且运行(Build & Run),之后你会在控制台里看到类似下面的错误信息:   
Ratings\[18955:1293100\] Failed to instantiate the default view controller for UIMainStoryboardFile ‘Main’ - perhaps the designated entry point is not set?   
幸运地是,错误信息非常清楚 — 你从来就没有设置一个入口点,也就是说在你删除默认创建的控制器之后,你并没有设置Initial View Controller.为了解决这个问题,选中Tab Bar Controller然后在右侧的 Attributes Inspector 里勾选 Is Initial View Controller.

![这里写图片描述][20151117114935112]

在工作区间里,这个箭头之前指向被删除的view controller ,现在指向的是这个Tab Bar Controller.

![这里写图片描述][20151117115034337]

这就意味着,当你运行app的时候,UIApplication会让Tab Bar Controller 作为主屏幕.运行app尝试一下.这个app现在有一个tab bar,并且你可以在两个two view controller之间进行切换:

![这里写图片描述][20151117115113545]

--------------------

### Tip: ###

想要改变 initial view controller,你也可以在view controller之间拖拽这个箭头.

--------------------

Xcode附带了构建一个带标签app的模板(也叫标签应用模板),你可以使用这个模板,但是它却不能很好地知道这应该如何工作,所以如果你觉得有必要,你也可以手动创建一个Tab Bar Controller.

--------------------

### Note: ###

如果你的Tab Bar Controller连接了超过5个子控制器,当你运行app的时候,他会自动地把这些控制器都加上.多么简洁啊!

--------------------

## 添加一个Table View Controller ##

目前只有两个UIViewController连接到了 Tab Bar Controller上.现在,你需要用一个UITableViewController来替换第一个UIViewController.

在Document Outline栏里点击第一个view controller ,然后按delete键删除.然后从Object Library中拖拽出一个新的Table View Controller到先前view controller的位置.

![这里写图片描述][20151117115414818]

现在你需要把这个Table View Controller放在一个导航控制器里.在Table View Controller选中情况下,再Xcode的菜单栏里选择Editor\\Embed In\\Navigation Controller .这也就添加了另一个控制器.

![这里写图片描述][20151117115448717]

你也可能会从Object Library拖拽一个已经嵌入tableview 的Navigation Controller,并且这个个嵌入命令也能节省很多时间.   
因为这个Navigation Controller 也是view controller的容器(就好像Tab Bar Controller),它有一个关系指向Table View Controller.你也可以在看见Document Outlin里看到这个关系.

![这里写图片描述][20151117115527884]

可以注意到的是Table View Controller已经嵌入到了一个导航栏里.Interface Builder会自动把它放在那里,因为这个控制器将显示在这个Navigation Controller的框架里.那并不是一个真正的UINavigationBar对象,但它是一个模拟的对象.Simulated Metrics将在这个控制器里推断上下文,然后在Navigation Controller会显示一个导航栏.在一个 Tab Bar Controller里会显示一个标签栏,等等…

新的控制器是正方形的.当你把它们嵌入到 Tab Bar Controller ,一瞬间,它们就会改变它们的大小里匹配它们的父视图控制器.   
为了把这两个新的控制器连接到Tab Bar Controller,按住control并且拖动Tab Bar Controller到Navigation Controller上.当你放首位的时候,会出现一个小的.选择Relationship Segue – view controllers选项:

![这里写图片描述][20151117115607743]

这样在这两个控制器之间就创建了一个新的箭头关系.这也是一个嵌入关系,正如你看到的 Tab Bar Controller.   
Tab Bar Controller有两个嵌入的关系,对应每一个标签.这个Navigation Controller本身也与Table View Controller有一个嵌入关系.

当你创建了这个新连接的时候,这个Tab Bar Controller就添加了一个新的标签.并且有一个简单地名字为”Item”.对于这个app来说,如果你想让这个新的控制器作为第一个标签,那么你只可以拖动来改变的它们的顺序.

![这里写图片描述][20151117115726997]

尝试运行一下这个app.现在第一个导航控制器里的标签包含了一个 table view.

![这里写图片描述][20151117115803229]

只要你把一个view controller连接到了Tab Bar Controller上,你就可以在Document Outline或者这个控制器的底部看到生成了一个Tab Bar Item对象.你可以在Tab Bar Controller上使用Tab Bar Item来配置标签的标题和图标.   
选中 Navigation Controller里的Tab Bar Item,之后在Attributes inspector里设置标题为Players.

![这里写图片描述][20151117120310613]

用相同的方式给view controller的Tab Bar Item重命名为Gestures.一个精心设计的app也应该在这些标签上放一些图片, [教程的资源][Link 1]包含了一个为images的子文件夹.拖拽这个文件夹到工程中的 Assets.xcassets文 里.

![这里写图片描述][20151117123100305]

你可能猜到了,给Gestures项的是Gestures.png.   
一个内嵌在Navigation Controller中view controller有一个Navigation Item,用来配置导航栏(navigation bar).在Document Outline离选择Table View Controller的Navigation Item然后在Attributes inspector中改变它的标题为Players.

![这里写图片描述][20151117123141731]

注意到了么?现在在Document Outline里的Item已经变为了Players啦~

另外,你也可以双击导航栏然后改变标题.需要注意的是,你应该双击Table View Controller中的模拟导航栏,而不是在Navigation Controller里真正的导航栏对象.

运行app,你就会惊叹于你的漂亮的标签栏,然而却没有写一行代码!

![这里写图片描述][20151117123218286]

[20151117111906390]: /images/20220609/5f493b183d3441be86f4d05de15927d7.png
[20151117112157724]: /images/20220609/e1645626d4dd426ea5f2a437219d4981.png
[Auto Layout Tutorial]: http://www.raywenderlich.com/115440/auto-layout-tutorial-in-ios-9-part-1-getting-started-2
[watch the video series]: http://www.raywenderlich.com/video-tutorials#autolayout
[Xcode Project]: /images/20220609/1dd3af72521b4aa1b9bb8241a600b281.png
[20151117112708780]: /images/20220609/e32aa7f44d094472bda8a3b29ad87b13.png
[Swift]: http://lib.csdn.net/base/swift
[20151117112832916]: /images/20220609/b4eea941c952451aae74ba9e7055833b.png
[Adaptive Layout video tutorial series]: http://www.raywenderlich.com/video-tutorials#adaptivelayout
[20151117113410894]: /images/20220609/e7383cf355314394b0f8d610b95bfe1a.png
[20151117113450622]: /images/20220609/7bb3ff09800846f6a544971168fd43bf.png
[20151117113536284]: /images/20220609/b17ea1bc140d4e24bba0e329d7c8962a.png
[20151117113609869]: /images/20220609/a167938be44146fc9bf4d6b3f562ccf0.png
[20151117113700088]: /images/20220609/87b697d37e3e48a1982bff73595b48e5.png
[20151117113804689]: /images/20220609/429844fcd2084241ac3d9b365bfffa8a.png
[20151117113927631]: /images/20220609/eb446e851ed54e38833a76beef0bf830.png
[20151117114000852]: /images/20220609/6a8a554ac236410da4cb610a9ce774ee.png
[20151117114135066]: /images/20220609/3aee9b7c5ebd478185cf54749fcc4e21.png
[Container]: http://lib.csdn.net/base/docker
[20151117114214538]: /images/20220609/ba5560b30b3245ee9c81fe42b96426a7.png
[20151117114935112]: /images/20220609/2418ef15aa21443282a6481d8b52c0df.png
[20151117115034337]: /images/20220609/73b6fe9e59cc4f779d49d7485726e4fc.png
[20151117115113545]: /images/20220609/f039d456054f47fdbd1388bc5783037f.png
[20151117115414818]: /images/20220609/5cc29777846e40a59f97c61e2d86fa57.png
[20151117115448717]: /images/20220609/415fca56020d4327ac297fbc9776fcd0.png
[20151117115527884]: /images/20220609/42132ddb39f94ac79770c9162129e93c.png
[20151117115607743]: /images/20220609/be22579c10c94c3fbfe7a8e683c9c1cf.png
[20151117115726997]: /images/20220609/4ddceb9303f2416cbed910a2dec1a1f7.png
[20151117115803229]: /images/20220609/9bfc91dacc17497caaafe7ecee133a9f.png
[20151117120310613]: /images/20220609/546d0d4de41e4937aaf09393a5573c59.png
[Link 1]: http://download.csdn.net/detail/yangmeng13930719363/9276087
[20151117123100305]: /images/20220609/a7dd2575ec574c1d9ec354d1c1e401ff.png
[20151117123141731]: /images/20220609/2b3d84ae398b46ecb87559beae5aa370.png
[20151117123218286]: /images/20220609/332912293c2f4cb6a664f965f7ab879f.png