【一步一步学IOS5 】 创建一个简单的表视图(Tab

系统 2368 0

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

 

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

 

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)应用程序
 


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


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

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

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

【本文对您有帮助就好】

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

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