ios basic:1.3 storyboard(学习autolayout的使用和multiple scenes之间的segue）

在此你将学到：

用auto layout 对你的interface 增加更大的灵活性

用storyboard define app的内容和flow

manage multiple view controller

对interface上的element添加action

在完成所有的steps之后，你将看到

Adopt Auto Layout

launch  你的app,command+right Arrow，来实现device的翻转



你可以看到text field在interface上的显示并不是最佳的，xcode提供了powerful layout engine 去解决这个问题，用auto layout你可以在scene中设置你的element的intent，当屏幕发生改变时，auto layout engine 将自动的用最佳的方法来实现element的intent,你能用constraint去描述intent,constraints描述了一个element的位置和另外一个元素的位置的相对关系，或者描述了当element的空间发生变化时那个元素应该首先shrink,在这里，text
field的大小和位置应该随着屏幕的变化而变化。

选中text field,按住ctrl，从text field上开始向上拖曳到空白区域，在谈出来的小窗口里选择Top Space to Top Layout Guide,来设置text field的上边缘和superview(在这里指window)的上边缘之间的距离不应该被改变，当然还可以向左，向下拖曳，xcode将根据你拖曳的方向决定text field的那个边缘与window的相应边缘的距离不变,这意味着当direction改变时，text field将会shrink或者grows，通过改变自身的大小和位置来迎合device的改变。

用Auto Layout之后



creating second scene

拖曳interface builder 里面的Tableviewcontroller到你的storyboar中，注意不要拖曳table view,table view仅仅是table view controller管理的一个view.

现在有两个scenes,一个用来显示TO Do List,另一个添加items到table view中，根据常识，TO Do List场景应在app 启动的时候就显示，因此需要设置他为init view controller,

两种方法：一种是选择table view controller 在Attribute inspector里面选中Is Init View Controller,把这个场景作为init view controller

另一种是直接拖曳init pointer到table view controller

设置好以后，运行


 

Display static content in a table view

选中table view,在attribute inspector中设置table view的行数，选中其中一行设置style为basic,这将会在table cell中自动创建一个label

给其他的cell添加内容，运行



add a segue to navigate forward

现在有在一个storyboard中有两个view controller，他们之间没有连接，他们之间的场景切换叫做segue.

在创建segue进行scenes切换之前，你必须用一个Navigation controller 去wrap你的table view controller.navigation controller能够提供一个Navigation bar去记录navigation stack,你在这个navigation bar上添加一个按钮去指向你的add to do list view controller.

add a navigation view controller to your table view controller

首先选中Table view controller,然后editor-Embed-in-Navigation view controller

然后返回到场景table view controller,会发现在table view controller最上层多了一个空白区域，click it,在attribute inspector里可以看到Navigation Item,设置title:My To Do List

enter之后，你会看到添加的title在空白区域显示了出来，然后拖曳一个bar button到Navigation bar 区域，此时在你拖到的地方会出现一个文本是item的button,选择它，在他的attribute inspector 里设置identifier 是add,然后会看到button变成+。



添加add item scene 到navigation stack中

在+ 出现的地方按住ctrl + 拖曳到下一个scene,在弹出的选项里选择PUSH，这样就在两个scenes之间用Navigation controller建立了一个segue,当click +时，会切换到下一个scene.

当把scene push到Navigation stack中后，由于现在这个scene现在显示为一个Navigation bar,这回引起该scene的frame move down,这将导致在scene中的Auto Layout 的constraints 与现在的事实不相适合，从而导致warning出现，fix it 通过edit-resolve auto layout issues-update constraints

Push Navigation仅仅实现了向县一个scene的切换，当user 在添加item时，不仅需要切换到下一个场景，user 还需要执行一些action,添加完以后，还需要返回到main navigation ,modal segue 正好满足我们的需求

To change the segue 为modal segue

a model view controller不能添加到Navigation stack中，因此就不能从table view controller的navigation controller里面得到一个navigation bar,为了保持视觉的连贯性，你需要在add scene中嵌入一个Navigation controller,并在add scene中配置他的title,并在navigation bar区域添加 bar button,cancel和Done.



create custom view controllers 

到此为止所有的配置都没有用到代码，但对add item view controller 的配置需要一些代码。

此时你需要建UIViewController的子类去放置这些代码，并且要告诉xcode你所建的UIViewController的子类是控制那个scene的。

这里需要创建两个UIViewController的子类：

TO create addItemViewController作为指向scene add item 的UIViewController的子类

打开outline view,设置custom的view controller



上图展示了怎样把scene与custom的view controller 联系起来

unwind a segue to navigate back

除了PUSH与modal segue之外，还有unwind segue.这种segue允许使用者从被给的scene返回到previous scene,unwind segue提供一个地方让你添加代码，当用户在两个scene之间进行切换的时候这段代码将会被执行。

你能用一个unwind segue从add item view controller 导航回到table view controller

一个unwind segue通过在destination view controller (the view controller that you want to unwind  to)来添加一个action method来创建。

因为现在想要back to table view controller ,so必须在table view controller 所对应的view controller:TodoListViewController interface里面添加这种方法，并在implement里面来实现。



完成这些以后，需要在add item scene里把两个buttons : cancel and Done 与unWindToList:方法link起来

当user点击cancel时，unwind回到previous的scene并执行unWindToList方法。