创建Hello World应用程序有乐趣吗?在本教程中,我们将继续创建更复杂的东西,并使用表视图构建一个简单的应用程序,。如果你没有看过以前的iOS编程的基本教程,在继续接下来的教程之前先看看把。


首先,在 iPhone 应用程序什么是表视图中?表视图是一种常见的 UI 元素在 iOS 应用程序。在某些方面,大多数应用程序,使用表视图去显示数据列表。最好的例子是内置的手机应用程序。您的联系人显示在表视图中的。另一个例子是邮件程序。它使用表视图来显示你的信箱和电子邮件。,表视图不仅被设计去显示文本数据,也允许您数据在图像中显示。内置的视频和 YouTube 应用程序都是很好的例子。



ios制作表格 iphone怎么制作表格_测试


使用表视图的应用程序示例

“创建SimpleTable项目”

有了表视图的简单理解,让我们开始着手创建一个简单的应用程序。如果你是认真学习的iOS编程就不要只翻阅文章。打开你的Xcode和代码!这是最好的方式来研究编程。

启动Xcode,创建一个新的项目“Single View application(单一视图的应用程序)”。

 

ios制作表格 iphone怎么制作表格_xcode_02

Xcode项目模板选择

点击“Next(下一步)”继续。再次,填写所需的所有选项的Xcode项目:

·         Product Name(产品名称):SimpleTable-这是您的应用程序的名称。

·         Company Identifier(公司标识):com.appcoda -它实际上是域名反写。如果你有一个域,您可以使用您自己的域名。否则,你可能会使用我们的,或者只需填写在“edu.self”。

·         Class Prefix(类前缀):SimpleTable - Xcode使用的类的前缀自动命名类。以后,你可以选择自己的前缀,甚至留空白。但在本教程中,让我们保持简单,使用“SimpleTable”好了。

·         Device Family(设备系列):iPhone -使用“iPhone”这个项目。

·         Use Storyboards(使用故事板) [unchecked] -不要选择此选项。这个简单的项目我们不需要故事板。

·         Use Automatic Reference Counting(使用自动的引用计数):[checked]-默认情况下,这应该被启用。不用管他。

·         Include Unit Tests(包括单元测试):[unchecked] -不要选中此复选框。现在,你不需要单元测试类。

ios制作表格 iphone怎么制作表格_xcode_03

SimpleTable项目选项

点击“Next(下一步)”继续。Xcode然后问你在哪里保存“SimpleTable”的项目。选择任何文件夹(例如桌面)来您的项目。并且,取消Source Control(源代码管理)选项。单击“Create(创建)”继续。


ios制作表格 iphone怎么制作表格_ios制作表格_04


选择一个文件夹来保存你的项目

当你确认,Xcode根据您所提供的选项自动创建“SimpleTable的”项目。结果屏幕看起来像这样:

 

ios制作表格 iphone怎么制作表格_测试_05

主屏的SimpleTable项目的

设计视图

首先,我们将创建用户界面和添加表视图。选择“SimpleTableViewController.xib”切换到界面生成器。

ios制作表格 iphone怎么制作表格_xcode_06

Interface Builder中SimpleTable项目


在对象库中,选择 “Table View (表视图) ” 对象,并将其拖动到视图中。

ios制作表格 iphone怎么制作表格_表视图_07

插入“表视图”后您的屏幕应该像下面这样。


ios制作表格 iphone怎么制作表格_移动开发_08


第一时间运行你的程序

在继续之前,请尝试使用模拟器来运行你的应用程序。单击“Run(运行)”按钮来建立你的应用程序并测试它。

 

ios制作表格 iphone怎么制作表格_表视图_09

模拟器的屏幕上会看起来像这样:

ios制作表格 iphone怎么制作表格_表视图_10

很简单,对不对?你已经在你的应用程序添加表视图了。但就目前而言,它不包含任何数据。接下来,我们将编写一些代码,来添加数据到表中。

添加表数据

回到Project Navigator(项目导航器)中,选择“SimpleTableViewController.h”。“UIViewController”后添加“<UITableViewDelegate, UITableViewDataSource>”。你的代码应该象下面这样:

#import <UIKit/UIKit.h> 

@interface SimpleTableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource> 

@end

在Objective-C ,“UITableViewDelegate”和“UITableViewDataSource”被称为协议。基本上,为了在表视图中显示数据,我们必须遵循协议规定的要求,并实现所有强制性方法。

UITableViewDelegate和UITableViewDataSource

此前,我们已经在头文件中添加了“UITableViewDelegate”和“UITableViewDataSource”协议,。这可能会有点混乱。他们是干什么的呢?

在表视图后的实际类UITableView,,被设计成灵活处理各种不同类型的数据。您可能会显示一个列表的国家或联系人的姓名。或者像这个例子,我们将使用表视图呈现食谱列表。那么,你如何告诉UITableView的列表中要显示的数据呢?UITableViewDataSource就是答案。这是您的数据和表视图之间的链接。UITableViewDataSource协议声明了两个你必须实现的方法(tableView:cellForRowAtIndexPath and tableView:numberOfRowsInSection),。通过实施这些方法,你告诉表视图中显示多少行,和每行中的数据。

另一方面,UITableViewDelegate,涉及到UITableView的外观。协议的可选方法,让你管理表里单个行的高度,配置表头和表尾,重新排序表格单元格。在这个例子中我们不改写这些方法。让我们把他们留在未来的教程把。

接着,选择“SimpleTableViewController.m”,并定义一个实例变量的表中的数据。

@implementation SimpleTableViewController 
{ 
    NSArray *tableData; 
}

在方法view DidLoad中,添加以下代码,来初始化”tableData“数组。我们用食谱列表来初始化数组。

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    // Initialize table data
    tableData = [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]; 
}
什么是数组?

数组是一种计算机编程里的基本数据结构。你可以把一个数组作为数据元素的集合。回到上述代码中的数组tableData在,它代表文本元素的集合。您可以把数组想像成这样:

ios制作表格 iphone怎么制作表格_测试_11

数组元素中的每一个都能被识别或通过索引来访问。具有10个元素的数组,将具有从0到9的目录。这意味着,tableData [0]返回的“tableData”数组的第一个元素。

在Objective C,NSArray是用于创建和管理数组的类。您可以使用NSArray创建大小固定的静态数组。如果你需要一个动态数组,可以使用NSMutableArray

NSArray提供工厂方法来创建一个数组对象。在我们的代码中,我们使用“arrayWithObjects”来实例化一个NSArray对象,并预载特定元素(如汉堡包)。

您还可以使用内置的方法来查询和管理数组。之后,我们将调用“count”的方法来查询数组中的数据元素数量。要了解更多有关NSArray的使用方法,你可以经常参考苹果的官方文件

最后,我们必须添加两个数据源方法:“tableView:numberOfRowsInSection”和“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; 
}

每次显示时表行,“cellForRowAtIndexPath”方法被执行。下面的插图会给你一个更好地了解关于UITableView、UITableDataSource如何工作。


ios制作表格 iphone怎么制作表格_移动开发_12


UITableView和UITableDataSource如何一起工作

好吧,让我们点击“Run(运行)”按钮,并试验您的最终应用程序!如果你正确地编写代码,在模拟器运行的程序是这样的:

ios制作表格 iphone怎么制作表格_移动开发_13

为什么它仍然是空白呢?我们已经写好生成表中数据、实现了所需方法的代码。但是,为什么表视图没有像预期那样显示呢?

其实一件事情。

连接数据源和委托(Delegate)

像 第一个教程中“Hello World”按钮,我们要建立表视图和我们刚刚创建的两个方法之间的连接。

返回到“SimpleTableViewController.xib”。按住键盘上的Control键,选择表视图并拖动到“File’s Owner(文件的所有者)”。您的屏幕应该是这样的:


ios制作表格 iphone怎么制作表格_ios制作表格_14


连接表视图的数据源和委托

松开按钮,将显示“数据源”和“委托”弹出式窗口。选择“数据源”,建立表视图和数据源之间的连接。重复上述步骤,并与委托进行连接。


ios制作表格 iphone怎么制作表格_表视图_15


连接数据源和委托

就是这样。为了确保是否连接正确,您可以选择表视图。在Utility area(实用区域)的上半部分,您可以在“Connection Inspector”(即最右边的标签页)显示现有连接。

 

ios制作表格 iphone怎么制作表格_测试_16

显示连接检查

测试您的应用程序

最后,它已经准备好测试您的应用程序。只要按一下“运行”按钮,让您的模拟器加载应用程序:

ios制作表格 iphone怎么制作表格_ios制作表格_17

添加缩略图到您的表视图

表视图是过于平淡,是吧?给每一行添加添加图像怎么样?iOS的SDK使得它非常容易就做到这一点。你只需要为插入每一行的缩略图添加一行代码。

首先,下载这个示例图像。或者,您可以使用自己的图像,但要确保你的图片名字是“creme_brulee.jpg”。在项目浏览器中,用鼠标右键单击的“SimplyTable”文件夹,选择“Add Files to SimpleTable…”。

ios制作表格 iphone怎么制作表格_表视图_18

图像添加到您的项目

选择图像文件,并选中“Copy items to destination group(将项目复制到目标组的文件夹)”复选框。单击“确定”添加文件。

ios制作表格 iphone怎么制作表格_测试_19

选择你的图像文件,并添加到项目中

现在,编辑“SimpleTableViewController.m”,并添加下面这行代码到“tableView:cellForRowAtIndexPath”方法:

cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];

编辑后,你的代码应该是这样的:

ios制作表格 iphone怎么制作表格_移动开发_20

选择你的图像文件,并添加到项目中

这行代码的用处是加载图像并显示在表格单元格的图像区域中。现在,再次点击“Run(运行)”按钮,您的SimpleTable应用程序应在每一行显示图像:

ios制作表格 iphone怎么制作表格_测试_21

 

接下来干什么呢?

建一个表视图是简单的把,对不对?表视图在iOS编程的最常用的元素之一。如果你按照教程构建应用程序,你应该对关于如何创建表视图有一个基本的了解。在本教程中我尽量保持一切都简单化。在现实中,表中的数据将不会在代码中直接赋值。通常情况下,它能从文件、数据库或其他地方中加载。

在接下来的教程中,我们将看看如何可以进一步自定义的表格单元格。