【一步一步学IOS5 】 Storyboard 在视图控制器

系统 2652 0

在前面例子中,我们介绍了Storyboards 是 Xcode 中设计用户界面的友好功能。

 

首先,回顾一下我们已经完成的工作。

 

- 将一个正常的视图控制器嵌入到导航控制器中

- 创建了一个表视图,并填充了菜单列表

- 使用联线从一个视图控制器切换到另一个视图控制器

 

我们目前还没有实现详细视图,该视图目前显示 一个静态的标签。我们将继续完成这个项目。完善这个应用程序。

 

1.赋值视图控制器类

 

在前面,我们简单创建了一个视图控制器,在Storyboard编辑器中,作为一个菜谱的详细视图,视图控制器默认赋值为UIViewController类

 

回到我们的问题,视图中标签应该随着选择的菜单发生变化,显然,在UIViewController中需要一个变量存放菜单的名称。

 

事实上,UIViewController类仅仅提供了基本的视图管理模型,相当于一个空白的视图,没有变量用于存储菜单名称。因此,不能直接使用UIViewController类,我们扩展这一类,并创建自己的类(也就是UIViewController的子类)。

 

在项目导航栏中,右击RecipeBook 文件夹,选择 New File .....

 

选择Cocoa Touch 栏目下的Object-C Class 作为模板。

 

将类命名为 RecipeDetailViewController,选择子类为UIViewController。注意不要选择With XIB for user interface选项,因为我们将使用Storyboards 设计用户界面,我们不必创建独立的interface builder 文件。点击next。保存文件。

 

接着,我们赋值RecipeDetailViewController 类给视图控制器。返回Storyboards 编辑器,选择详细视图控制器。在Identity Inspector 窗口,更改类为 RecipeDetailViewController.

 

2.添加变量到定制的类中

 

前面通过继承UIViewController类,创建了定制的视图控制器类。然而,这个类和父类没有任何不同,除非我们添加自己的变量和方法。还有一些工作我们需要实现的:

 

- 赋值一个变量(recipeName)用于数据传递 - 当用户选择Recipe 视图中的一个菜单时,必须传递菜单名称到详细视图

 

- 赋值变量(recipeLabel) 给文本标签 - 当前标签是静态的,但应该在菜单名称变化时,更新文本标签。

 

OK,现在添加2个变量(recipeLabel 和 recipeName)。

 

选择RecipeDetailViewController.h 文件,为接口添加2个属性:

 

#import <UIKit/UIKit.h>

 

@interface RecipeDetailViewController : UIViewController

 

@property ( nonatomic , strong ) IBOutlet UILabel *recipeLabel;

 

@property ( nonatomic , strong ) NSString *recipeName;

 

@end


选择RecipeDetailViewController.m 文件,为上述变量添加synthesize. 代码如下:

 

@implementation RecipeDetailViewController

 

@synthesize recipeLabel;

 

@synthesize recipeName;

 

 

3.建立变量和UI 元素之间的连接

 

接下来,我们需要连接 recipeLabel 变量到可视化的Label 标签。在Stroyboards 编辑器,按住Control键,并点击Recipe Detail View Controller 图标,拖拉到Label对象上。释放按钮,弹出变量列表供你选择,选择recipeLabel变量。

 

现在,已经连接了变量和Label UI 元素,变量的任何变化将可视化地显示出来。但是,仍然有一项没有处理,我们还需要标签显示菜单的名称。因此,在viewDidLoad 方法中,我们添加如下代码,并设置标签文本和菜单文本名称一致。

 

- ( void )viewDidLoad

{

    [ super viewDidLoad ];

// Set the Label text with the selected recipe

    recipeLabel . text = recipeName ;

}

 

尝试编译并运行你的App,哦,在选择任意菜单项后,详细视图完全显示空白。

 

这是期望的效果,因为 我们还没有编写任何代码传递菜单名称,recipeName 变量是空白的导致文本标签也是空白的。

 

 

3.使用联线(Segue)传递数据

 

联线对象用来准备视图控制器之间的切换,当联线触发时,在可视化的视图切换发生之前,storyboard运行时调用当前视图控制器的 prepareForSegue:sender: 方法。通过实现该方法,我们可传递任何需要的数据给即将显示的视图控制器。

 

然而,最好的办法是给Storyboards 中每一个联线一个唯一个标识符(identifier),标示符是一个字符串,应用程序使用该字符串来区别不同的联线。

 

随着App 越来越复杂,在视图控制器中,将有更多的联线

 

选择联线,在Identity Inspector 窗口,设置identifier 属性值。这里,我们将该联线命名为 showRecipeDetail.

 

接着,我们将在RecipeBookViewController 视图控制器中实现prepareForSegue:sender: 方法, 是联线的源视图控制器。

 

选择RecipeBookViewController.m 文件,添加如下代码:

 

- ( void )prepareForSegue:( UIStoryboardSegue *)segue sender:( id )sender

{

    if ([segue. identifier isEqualToString : @"showRecipeDetail" ]) {

        NSIndexPath *indexPath = [ self . tableView indexPathForSelectedRow ];

        RecipeDetailViewController *destViewController = segue. destinationViewController ;

 

        destViewController. recipeName = [ recipes objectAtIndex :indexPath. row ];

 

    }

}

 

在视图切换开始的时候,调用prepareForSegue 方法。

 

第一行用来验证segue 的标识符。在本例中,标识符为showRecipeDetail。

 

第二行调用tableView:indexPathForSelectedRow 获取选择的表行。一旦获取选择的行,

我们将传递给RecipeDetailViewController视图控制器。一个Segue对象包含了需要在转换结束后在视图控制器中显示的内容。

 

你可以使用segue.destinationViewController 获得目的视图控制器。

 

剩下的代码就是传递菜单名称给目的控制器

 

你现在还无法运行App,当编译时,会显示如下错误,总结为2类:

 

- tabeView 属性在 RecipeBookViewController 中没有找到

 

- RecipeDetailViewController 是什么? Xcode 不认识它。

 

对于第二个错误,我们通过引入RecipeDetailViewController 的头文件。

 

第一个错误,我们首先要在RecipeBookViewController.h 文件中,在@end之前添加如下代码:

 

@property ( nonatomic , strong ) IBOutlet UITableView * tableView;



在RecipeBookViewController.m 文件,添加 

@synthesize tableView;


最后,返回Storyboards, 连接变量到UI元素。在RecipeBookViewController中,按住Controller中,按住Control键,点击视图控制器图片,拖拉到表视图中,释放按钮,选择tableView 变量


【一步一步学IOS5 】 Storyboard 在视图控制器间传递数据
 
现在,所有的错误应该都解决了。App效果如下


【一步一步学IOS5 】 Storyboard 在视图控制器间传递数据
 

 

【一步一步学IOS5 】 Storyboard 在视图控制器间传递数据


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论