Storyboards Tutorial 03

这一节主要介绍segues,static table view cells 和 Add Player screen 以及 a game picker screen。

Introducing Segues

开启 Main.storyboard拖拉一个Bar Button Item到Players窗口导航栏的右侧。在Attributes inspector中改变Identifier为Add,就会出现一个+号button。

当用户点击时会弹出一个模态窗口来输入新的player的详细信息。

拖拉一个新的navigation controller然后ctrl+drag来把之前的加号和这个view controller来连接。选择modal。

这个连接就是所知的segue(seg-way)表示的是从一个屏幕到另一个屏幕的传送。通过食用segue你不需要再为view间的显示来写代码了。

运行代码,点击加号,一个新的页面就出现了。

新创建一个PlayerDetailsViewController并且把之前modal中的table view controller的class设置为PlayerDetailsViewController。双击navigation bar把名称修改为Add Player.添加cacel和done bar item。

PlayerDetailsViewController.h中进行下面的修改:

将cancle和done和对应的ibaction方法连接起来。可以选择button然后选择ctrl + drag到view controller中去然后会弹出筐体选择。

PlayerDetailsViewController.m中修改如下:

PlayersViewController中引用这个代理并实现其方法体

最后一件事就是高速PlayerDetailsViewController现在playersviewcontroller是他的delegate了。

prepareForSegue当一个segue要发生时调用。新的view controller从storyboard中加载起来了但是还没有出现,你可以利用这个机会来给他发送数据了。

运行后,选择done和cancel却没有发生任何变化。因为你没有个segue设置一个identifier。上面的代码需要根据identifier来找到对应的segue。

再次运行就有效果了!segue的Transition属性可以指定页面弹出的不同方式。但是不要修改Style选项的设置,否则会使得app crash掉。

将步骤总结如下:

1,创建一个segue

2,给这个segue设置一个identifier

3,为目标场景创建一个delegate协议

4,调用cacel和done对应的delegate方法

5,使得source scene来执行delegate方法

6,在source scene中复写prepareForSegue方法并且设置destination.delegate = self;

Static Cells

上面的是一个grouped table view。这个在interface builder中设置就可以实现不需要设置datasource也不需要执行cellForRowAtIndexPath方法。这个设置就叫做static cells

选择Add Player窗口中的table view并且把属性中的Content变成Static Cells。把Style从Plain修改成Grouped。并且设置成有两个sections。

这里每个section只需要包含一个cell,所以首先删除掉多余的cell,并且把第一个scetion的header名字修改为Player Name.

添加一个Text Field到这个cell中,去掉border,把字体更改为system 17然后不要选择Adjust to Fit。

点击xcode工具栏右上方的外星人头像或者双环就能打开PlayerDetailsViewController头文件,然后tag + drag这个textfield到这个头文件的interface下方区域松手会出现一个弹出筐体来设置iboutlet,包括名称等。

生成的结果是@property (weak, nonatomic) IBOutlet UITextField *nameTextField;这里之所以使用iboutlet是因为这个已经确定了每个section只有一个cell实例。所以是可以的。

设置第二个cell的属性style为Right Detail. 左侧出现的label名称修改为Game并提供Disclosure Indicator accessory。为右侧的detail label设置iboutlet detailLabel。

 


 

posted @ 2014-12-18 15:49  如来藏  阅读(119)  评论(0编辑  收藏  举报