文档章节

iOS使用Storyboards创建导航控制器和表视图

三只脚的猪
 三只脚的猪
发布于 2014/02/14 09:15
字数 1516
阅读 3025
收藏 4

            在本教程中,我们将演示如何使用Storyboards构建导航界面和与UITableView的集成。为了让任务比较简洁,我们仅仅关注于解释概念,因此没有华丽的界面或漂亮的图片,将美工设计留给将来的教程。
OK,我们开始吧!

导航控制器(Navigation Controller)是什么?

在开始编写代码之前,我们简单介绍一下导航控制器(Navigation Controller)和Storyboards。
和表视图(Table View)一样,导航控制器是另外一个UI控件,在iOS App中经常看到。它为分层内容提供了向下导航的界面。我们看看内置的Photos App、YouTube和通讯录(Contacts)。这些Apps都使用了导航控制器显示分层的内容。通常表视图和导航控制器在多数Apps中同时存在,当然,这并不意味着你必须同时使用它们。

Storyboards预览

前面提到过,Storyboard 是Xcode 4.2 发布时提供的一项新功能。它提供了一个全新的方式,供iOS开发人员创建和设计用户界面。在引入Storyboard 之前,对于初学者而言非常困难创建导航(和tab)界面。每一个界面存放在一个独立的nib文件中,然后你必须编写代码连接所有的界面,并且描述导航如何工作。
通过使用Storyboard,所有屏幕保存在一个单一文件中,这样你可以预览app的可视化展现,以及屏幕是如何连接的。Xcode 提供了内置的编辑器来设计Storyboards。你可以简单使用点击来定义不同屏幕之间的切换(称为Segues – 联线,代表两个场景Scene之间的过渡转换),但这也不是说你不必为用户界面编写代码,Storyboards 显著简化了你需要编写的代码量。下图显示Xcode中Storyboards的样子:

场景(Scene)和联线(Segues)

在使用Storyboards时,一定会遇到场景(Scene)和联线(Segues)两个术语。在一个Storyboard中,场景指一个单一的视图控制器和它的视图。每一个场景都有一个场景坞(Dock),主要用来在视图控制器和视图之间,建立方法和Outlet 的连接。
联线(Segue)位于两个场景之间,管理两个场景之间的过渡,其中Push和Modal 是两个常见的过渡类型。

在Storyboards中创建导航控制器

现在着手创建我们自己的Storyboards。在本教程中,我们将创建一个简单的App,其中同时用到UITableView和UINavigationController。我们使用表视图显示菜单列表。在用户选择任何一个菜单时,App导航到另外一个画面,显示更详细的信息。比较简单哦!
首先,启动Xcode(确认你使用Xcode 4.2 或更高版本),并使用Simple View application 模板创建一个新的项目。

点击Next 按钮继续。在下图中,填入Xcode项目所有必须的内容,并确保选中Use Storyborads选项。

点击Next 按钮继续。Xcode接着问你RecipeBook项目存放在哪里,选择任意目录(如Desktop)保存项目。
你可能注意到在Xcode 项目中有一点不同,和前面的教程比较而言,.xib 文件(interface builder)替换为MainStoryboard.storyboard 文件了。

默认情况下,Xcode创建一个标准的视图控制器。我们将使用导航控制器(Navigation Controller)控制画面的导航。首先更改视图控制器(View Controller)为导航控制器,选择 Editor 菜单 / Embed in 子菜单,接着选择 Navigation Controller,如下图所示 – 在导航控制器中嵌入视图控制器:

Xcode 自动嵌入RecipeBook 视图控制器到导航控制器中,项目画面如下图所示:

现在我们运行App看看效果。点击 Run 按钮,你将看到一个空白的视图,并且添加了一个导航条。这表示你已经成功嵌入了RecipeBook 视图控制器到导航控制器中。

添加表视图及其数据

接着,我们将添加表视图显示菜谱。从对象库(Object Library)选择Table View,并拖拉到 Recipe Book View Controller中。
需要注意的是:当编辑器是最小化时,你不能拖动控件;如果你不能拖动Table View到视图控制器中,最大化编辑器后,再尝试一次。

接下来,我们需要编写代码填充表数据(如菜谱)。在项目导航器中,选择RecipeBookViewController.h文件,在UIViewController 之后,添加<UITableViewDelegate, UITableViewDataSource>,代码如下所示:

#import <UIKit/UIKit.h>

@interface RecipeBookViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

@end

如果你之前阅读过Simple Table教程,你应该对这些代码非常熟悉。这里,我们不具体解释这些代码,如果你不理解这些代码,可以访问我们之前的教程
接着,选择 RecipeBookViewController.m文件,定义一个实例变量(如 菜谱数组)用来存放表数据。
@implementation RecipeBookViewController {
NSArray *recipes;
}

在viewDidLoad方法,添加如下代码初始化recipes 数组:
- (void)viewDidLoad
{
[super viewDidLoad];
// Initialize table data
recipes = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
}

最后,我们必须实现2个DataSource 方法填充表视图: tableView:numberOfRowsInSection 和tableView:cellForRowAtIndexPath。回想一下,这两个方法是UITableViewDataSource 协议的一部分,在配置UITableView时,这两个方法必须要求实现。第一个方法是通知表视图有多少行;第二个方法用来填充单元格数据。添加代码如下所示:
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [recipes count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *simpleTableIdentifier = @"RecipeCell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
}

cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
return cell;
}


本文转载自:http://www.entlib.net/?p=1931

三只脚的猪
粉丝 7
博文 31
码字总数 5953
作品 0
海口
高级程序员
私信 提问
一步一步学习iOS 5编程(第三版)-PDF中文版-正式发布!

目前,这是第一本介绍iOS 5.x 和 Xcode 4.4 的中文版书籍,尤其适合于iOS 编程开发初学者。本教程由 EntLib.com 团队编写。如有任何技术问题,欢迎留言。 电子版 – PDF 格式,支持iPhone、i...

entlib
2012/09/20
797
2
一步一步学习 iOS 6 编程(第四版)正式发布

所有范例程序及其截图都采用Xcode 4.4 和Xcode 4.5 最新版开发工具,本书包含了最新的iOS 6 开发技术,如自动布局(Auto Layout)、集合视图(Collection View)等等。 新增内容包括:分割视...

entlib
2012/10/25
837
2
IOS学习,最简单的表格应用程序,学习,列出博客

IOS编程浅蓝教程,这是博客地址http://www.cnblogs.com/haichao/category/425378.html IOS编程浅蓝教程:锲子 IOS编程浅蓝教程(一)先决条件:开始iOS编程的必要准备 IOS编程浅蓝教程(二) Hel...

andy521zhu
2015/01/17
186
0
IOS软件开发视频教程要的来

IPhone开发实战视频教程内容介绍 1.iPhone开发实战视频教程-iOS开发视频教程 介绍了iPhone开发的开发环境iOS SDK,X-Code,Interface Builder,iTunes等;创建项目的基本步骤,项目工程中文件...

三毛钱
2016/07/09
251
3
Storyboard教程-创建Tab Bar控制器和Web视图 (2)

你可以使用tab bar界面来组织不同的操作模式。每一个tab 包含特定的功能。显然,在使用tab bar 控制器时,在App中至少包含2个tabs。因此,我们将创建一个新的Tab,用于显示App的About页面。 ...

三只脚的猪
2014/02/20
2.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot 403 问题

添加WebAppConfigurer 配置 @Configuration@EnableAutoConfigurationpublic class WebAppConfigurer extends WebMvcConfigurerAdapter { public WebAppConfigurer() { } ......

布袋和尚_爱吃鱼
21分钟前
3
0
Python自动更换壁纸爬虫与tkinter结合

直接上代码 import ctypesimport timeimport requestsimport osfrom threading import Threadfrom tkinter import Tk, Label, Button,Entry,StringVar,messagebox# '放到AppData\Roami......

物种起源-达尔文
21分钟前
3
0
Postgresql Study 笔记

Postgresql 安装 Windows, MAC Install Postgresql 下载地址: https://www.enterprisedb.com/downloads/postgres-postgresql-downloads Linux Install sudo apt-get update sudo apt-get in......

slagga
23分钟前
3
0
layer.open 打开新页面传参问题

如图所示,点击出售,把A页面的数据传到弹框上面,因为弹框比较复杂,所以使用引入一个新页面。 A.html a.js B.html b.js 1、第一种方案 sellInte: function (){ var obj = document.g...

木九天
26分钟前
4
0
沙龙报名 | 区块链数据服务技术应用实践

京东云是国内首家提供区块链数据在线分析服务产品的公司,也是行业内首家对区块链数据服务进行开源的公司。 本次沙龙是京东云BDS开源后,首次在深圳举办线下沙龙,我们将邀请京东云BDS团队核...

京东云技术新知
27分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部