首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 其他教程 > 操作系统 >

【一步一步学IOS5 】 创设一个简单的表视图(Table View)应用程序

2012-09-27 
【一步一步学IOS5 】 创建一个简单的表视图(Table View)应用程序首先,在iPhone App中的表视图是什么??表视图

【一步一步学IOS5 】 创建一个简单的表视图(Table View)应用程序

首先,在iPhone App中的表视图是什么?

?

表视图(Table View) 是IOS Apps 中一个通用的UI元素。很多应用程序在一定程度上,都有使用表视图来显示数据列表。最好的例子是内置的iPhone应用程序。你的联系人显示在表视图中。另外一个例子是Mail应用程序,它使用表视图显示你的邮箱和邮件。不仅可以用来显示文本数据,表视图也可以呈现图像数据。内置的Video和YouTube应用程序是这一用法的例子

?

1.创建simpleTable 项目

?

启动Xcode, 创建一个Single View application 的新项目

?

输入Xcode项目所有必须的选项:

Product Name: SimpleTable

?

Company Identifier: com.appcode

?

Class Prefix: SimpleTable

?

Device Family: iPhone

?

Use Storyboards:[不选择]

?

Use Automatic Reference Counting:[选择]

?

Include Unit Test:[不选择]

?

?

2.设计视图

?

首先,我们将创建用户界面,并添加表视图。选择SimpleTableViewController.xib文件,切换到Interface Builder界面。

?

在对象库(Object Library)中,选择Table View对象,并拖拽到视图中。

?

?

3.第一次运行你的应用程序

在继续之前,尝试使用模拟器运行你的应用程序。点击Run按键构建你的App并进行测试。

?

模拟器屏幕如下图所示:


【一步一步学IOS5 】 创设一个简单的表视图(Table View)应用程序

?

?

我们已经设计好了表视图,但是,现在它没有包含任何数据。接着,我们将编写代码,添加表数据。

?

4.添加表数据

?

返回项目导航栏,选择SimpleTableViewController.h 文件。 在UIViewController 之后,添加<UITableViewDelegate,UITableViewDataSource>。完成后代码如下所示:

?

?

#import <UIKit/UIKit.h>

?

@interface SimpleTableViewController : UIViewController<UITableViewDelegate,UITableViewDataSource>

?

@end

?

?

在Object-C中,UITableViewDelegate和UITableViewDataSource称为协议。基本上,为了在表视图中显示数据,我们必须遵守定义在协议中的要求,并实现所有要求的方法。

?

UITableViewDelegate 和 UITableViewDataSource

?

UITableView 是表视图幕后的实际类,用来灵活处理不同的数据类型。你可以显示国家列表或者联系人姓名。或者像本示例一样,我们将使用表视图程序菜谱列表。因此,你可以告诉UITableView需求显示的数据列表呢?

?

UITableViewDataSource 是答案,它用来连接你的数据和表视图。

?

UITableViewDataSource 协议定义了2个要求实现的的方法

?

(tableView:cellForRowAtIndexPath 和 tableView:numberOfRowsInSection)。通过实现这些方法,你告诉表视图显示多少行数据和每一行数据。

?

UITableViewDelegate 负责处理UITableView的表现。协议中可选方法让你管理表行的高度,配置节点头部和底部,对表单元重新排序等等。

?

接着,选择SimpleTableViewController.m 文件,定义一个实例变量,存放数据。

?

@implementation SimpleTableViewController

{

NSArray * tableData;

}

?

在viewDidLoad方法中(Called after the controller's view is loaded into memory - 在控制器的视图装载到内存中完成之后,调用该方法),添加如下代码实例化 tableData 数组。我们初始化数组位菜谱离列表:

?

- (void)viewDidLoad

{

? ? [super viewDidLoad];

? ? //Initialize table data

? ? tableData = [NSArray arrayWithObjects:@"Egg Benedict",@"Mushroom Risotto",@"Full Breakfast",@"Hamburger",@"Ham and Egg sandwith",@"Creme Brelee",@"White Chcolate Dount",@"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];

}

?

在Object-C中,NSArray 是创建和管理数组的类,你可以使用NSArray创建静态数组,其容量是固定的。如果你需要创建动态数组,则使用NSMutableArray代替。

?

NSArray提供了一组工厂方式来创建数组对象。在我们的代码中,我们使用arrayWithObjects来实例化一个NSArray对象,并预先填充特定的元素(如Hamburger)。

?

最后,我们需要添加2个数据源方法:tableView:numberOfRowInSection 和 tableView:cellForRowAtIndexPath。这两个方法是UITableViewDataSource协议的一部分。在配置UITableView时,需要强制实现这两个方法。

?

第一个方法用来通知表视图选择了多少条数据行,因此添加如下代码。count方法简单返回tableData数组中元素个数。

?

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

? ? return [tableData count];

}

?

接着,我们实现另外一个需要实现的方法:

?

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

? ? static NSString *simpleTableIdentifier = @"simpleTableItem";

? ? UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

?

? ? if (cell == nil) {

? ? ? ? cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];

? ? }

?

cell.textLabel.text = [tableData objectAtIndex:indexPath.row];

return cell;

}


每一次数据显示的时候,都会调用cellForeRowAtIndexPath方法。下图让你更好的理解UITableview和UITableDataSource是如何工作的。

【一步一步学IOS5 】 创设一个简单的表视图(Table View)应用程序
?
请求数据源,在表视图的特定位置插入一个单元格。表视图中可见的每一行都会触发该事件。事件包含的参数之一是NSIndexPath类型。NSIndexPath类表示数组集合中的某个特定项的路径。要知道当前填充的是哪一行,只需要调用NSIndexPath对象(indexPath)的row属性,然后使用行号来引用tableData数组中元素即可。得到的值被用来设置表视图中该行的文本值。
需要注意的的是,这里使用UITableView类的dequeueReusableCellWithIdentifer:方法获取UITableViewCell类的一个实例。
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
dequeueReusableCellWithIdentifier:方法返回是一个可重用的表视图单元格对象。因为如果表非常大,为每一行都创建一个单独的UITableViewCell对象会产生严重的性能问题,并占用大量的内存。
此外,由于表视图在某一时刻只会显示固定数量的行,因此重用已经滚动到屏幕外面的那些单元格将非常有意义。这正是dequeueReusableCellWithIdentifier:方法将要完成的事情。比如,如果表视图显示了10行,那么只会创建10个UITableViewCell对象 --- 当用户滚动表视图时,总是会重用这10个UITableViewCell 对象。
5.连接数据源(DataSource) 和 委托(Delegate)
像第一个Hello World 应用程序一样,我们需要在表视图和创建的2个方法之间建立连接。
返回SimpleTableViewController.xib,点击并按住Control键,选择表视图,并拖拉到File's Owner图上,释放按钮,弹出dataSource 和 delegate窗口。选择dataSource,在表视图和它的数据源之间建立连接。重复上述操作,在委托(delegate)上也建立连接。
就这些了,为了确保正确建立了连接,你可以再次选择表视图。在工具区域(Utility Area)的上部,点击Connecion Inspector显示所有现存的连接。
6.测试你的应用程序
最后,点击Run按钮,让模拟器装载你的App
7.在表视图中添加缩略图
右击SimpleTable 文件夹,选择Add Files to SimpleTable...
选择一个图像文件,同时选中Copy Item to destination group's folder 复选框。点击OK按钮添加该文件。
现在编辑SimpleTableViewController.m 文件,添加如下代码行到tableView:cellForRowAtIndexPath方法中:
cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];
添加的代码行装在图像文件,并保存在表单元格的图像区域。现在,再次点击Run按钮,你的应用程序应该在每一行显示图像了:

【一步一步学IOS5 】 创设一个简单的表视图(Table View)应用程序
?

热点排行