iOS编程教程(四):创建一个简单的表视图
创建Hello World应用程序有乐趣吗?在本教程中,我们将继续创建更复杂的东西,并使用表视图构建一个简单的应用程序,。如果你没有看过以前的iOS编程的基本教程,在继续接下来的教程之前先看看把。
首先,在iPhone应用程序什么是表视图中?表视图是一种常见的UI元素在iOS应用程序。在某些方面,大多数应用程序,使用表视图去显示数据列表。最好的例子是内置的手机应用程序。您的联系人显示在表视图中的。另一个例子是邮件程序。它使用表视图来显示你的信箱和电子邮件。,表视图不仅被设计去显示文本数据,也允许您数据在图像中显示。内置的视频和YouTube应用程序都是很好的例子。![image image](https://images.cnblogs.com/cnblogs_com/haichao/201211/201211091541224789.png)
使用表视图的应用程序示例
“创建SimpleTable项目”
有了表视图的简单理解,让我们开始着手创建一个简单的应用程序。如果你是认真学习的iOS编程就不要只翻阅文章。打开你的Xcode和代码!这是最好的方式来研究编程。
启动Xcode,创建一个新的项目“Single View application(单一视图的应用程序)”。
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] -不要选中此复选框。现在,你不需要单元测试类。
SimpleTable项目选项
点击“Next(下一步)”继续。Xcode然后问你在哪里保存 “SimpleTable”的项目。选择任何文件夹(例如桌面)来您的项目。并且,取消Source Control(源代码管理)选项。单击“Create(创建)”继续。
![image image](https://images.cnblogs.com/cnblogs_com/haichao/201211/201211091541278349.png)
选择一个文件夹来保存你的项目
当你确认,Xcode根据您所提供的选项自动创建“SimpleTable的”项目。结果屏幕看起来像这样:
主屏的SimpleTable项目的
设计视图
首先,我们将创建用户界面和添加表视图。选择“SimpleTableViewController.xib”切换到界面生成器。
Interface Builder中SimpleTable项目
在对象库中,选择“Table View(表视图)”对象,并将其拖动到视图中。插入“表视图”后您的屏幕应该像下面这样。
![image image](https://images.cnblogs.com/cnblogs_com/haichao/201211/201211091541366557.png)
第一时间运行你的程序
在继续之前,请尝试使用模拟器来运行你的应用程序。单击“Run(运行)”按钮来建立你的应用程序并测试它。
模拟器的屏幕上会看起来像这样:
很简单,对不对?你已经在你的应用程序添加表视图了。但就目前而言,它不包含任何数据。接下来,我们将编写一些代码,来添加数据到表中。
添加表数据
回到Project Navigator(项目导航器)中,选择“SimpleTableViewController.h”。 “UIViewController”后添加“<UITableViewDelegate, UITableViewDataSource>”。你的代码应该象下面这样:
1 | #import <UIKit/UIKit.h> |
在Objective-C ,“UITableViewDelegate”和“UITableViewDataSource”被称为协议。基本上,为了在表视图中显示数据,我们必须遵循协议规定的要求,并实现所有强制性方法。
UITableViewDelegate和UITableViewDataSource
此前,我们已经在头文件中添加了“UITableViewDelegate”和“UITableViewDataSource”协议,。这可能会有点混乱。他们是干什么的呢?
在表视图后的实际类UITableView,,被设计成灵活处理各种不同类型的数据。您可能会显示一个列表的国家或联系人的姓名。或者像这个例子,我们将使用表视图呈现食谱列表。那么,你如何告诉UITableView的列表中要显示的数据呢?UITableViewDataSource就是答案。这是您的数据和表视图之间的链接。UITableViewDataSource协议声明了两个你必须实现的方法(tableView:cellForRowAtIndexPath and tableView:numberOfRowsInSection),。通过实施这些方法,你告诉表视图中显示多少行,和每行中的数据。
另一方面,UITableViewDelegate,涉及到UITableView的外观。协议的可选方法,让你管理表里单个行的高度,配置表头和表尾,重新排序表格单元格。在这个例子中我们不改写这些方法。让我们把他们留在未来的教程把。
接着,选择“SimpleTableViewController.m”,并定义一个实例变量的表中的数据。
1 | @implementation SimpleTableViewController |
在方法view DidLoad中,添加以下代码,来初始化”tableData“数组。我们用食谱列表来初始化数组。
1 | - (void)viewDidLoad |
什么是数组?
数组是一种计算机编程里的基本数据结构。你可以把一个数组作为数据元素的集合。回到上述代码中的数组tableData在,它代表文本元素的集合。您可以把数组想像成这样:
数组元素中的每一个都能被识别或通过索引来访问。具有10个元素的数组,将具有从0到9的目录。这意味着,tableData [0]返回的“tableData”数组的第一个元素。
在Objective C,NSArray是用于创建和管理数组的类。您可以使用NSArray创建大小固定的静态数组。如果你需要一个动态数组,可以使用NSMutableArray。
NSArray提供工厂方法来创建一个数组对象。在我们的代码中,我们使用“arrayWithObjects”来实例化一个NSArray对象,并预载特定元素(如汉堡包)。
您还可以使用内置的方法来查询和管理数组。之后,我们将调用“count”的方法来查询数组中的数据元素数量。要了解更多有关NSArray的使用方法,你可以经常参考苹果的官方文件。
最后,我们必须添加两个数据源方法:“tableView:numberOfRowsInSection”和“tableView:cellForRowAtIndexPath”。这两种方法都是UITableViewDataSource协议的一部分。配置一个UITableView时,这是必须实现的方法。第一种方法是告知一个表视图页面中有多少行。因此,让我们添加下面的代码。“count”的方法只是简单返回在“tableData”数组的项目数。
1 | - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section |
下一步,我们实现所需的其他方法。
1 | - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath |
每次显示时表行,“cellForRowAtIndexPath”方法被执行。下面的插图会给你一个更好地了解关于UITableView、UITableDataSource如何工作。
![image image](https://images.cnblogs.com/cnblogs_com/haichao/201211/201211091541401164.png)
UITableView和UITableDataSource如何一起工作
好吧,让我们点击“Run(运行)”按钮,并试验您的最终应用程序!如果你正确地编写代码,在模拟器运行的程序是这样的:
为什么它仍然是空白呢?我们已经写好生成表中数据、实现了所需方法的代码。但是,为什么表视图没有像预期那样显示呢?
其实一件事情。
连接数据源和委托(Delegate)
像 第一个教程中“Hello World”按钮,我们要建立表视图和我们刚刚创建的两个方法之间的连接。
返回到“SimpleTableViewController.xib”。按住键盘上的Control键,选择表视图并拖动到“File’s Owner(文件的所有者)”。您的屏幕应该是这样的:
![image image](https://images.cnblogs.com/cnblogs_com/haichao/201211/201211091541429443.png)
连接表视图的数据源和委托
松开按钮,将显示“数据源”和“委托”弹出式窗口。选择“数据源”,建立表视图和数据源之间的连接。重复上述步骤,并与委托进行连接。
![image image](https://images.cnblogs.com/cnblogs_com/haichao/201211/201211091541433969.png)
连接数据源和委托
就是这样。为了确保是否连接正确,您可以选择表视图。在Utility area(实用区域)的上半部分,您可以在“Connection Inspector”(即最右边的标签页)显示现有连接。
显示连接检查
测试您的应用程序
最后,它已经准备好测试您的应用程序。只要按一下“运行”按钮,让您的模拟器加载应用程序:
添加缩略图到您的表视图
表视图是过于平淡,是吧?给每一行添加添加图像怎么样?iOS的SDK使得它非常容易就做到这一点。你只需要为插入每一行的缩略图添加一行代码。
首先,下载这个示例图像。或者,您可以使用自己的图像,但要确保你的图片名字是“creme_brulee.jpg”。在项目浏览器中,用鼠标右键单击的“SimplyTable”文件夹,选择“Add Files to SimpleTable…”。
图像添加到您的项目
选择图像文件,并选中“Copy items to destination group(将项目复制到目标组的文件夹)”复选框。单击“确定”添加文件。
选择你的图像文件,并添加到项目中
现在,编辑“SimpleTableViewController.m”,并添加下面这行代码到“tableView:cellForRowAtIndexPath”方法:
1 | cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"]; |
编辑后,你的代码应该是这样的:
选择你的图像文件,并添加到项目中
这行代码的用处是加载图像并显示在表格单元格的图像区域中。现在,再次点击“Run(运行)”按钮,您的SimpleTable应用程序应在每一行显示图像:
接下来干什么呢?
建一个表视图是简单的把,对不对?表视图在iOS编程的最常用的元素之一。如果你按照教程构建应用程序,你应该对关于如何创建表视图有一个基本的了解。在本教程中我尽量保持一切都简单化。在现实中,表中的数据将不会在代码中直接赋值。通常情况下,它能从文件、数据库或其他地方中加载。
在接下来的教程中,我们将看看如何可以进一步自定义的表格单元格。
作者:但,我知道
出处:http://www.cnblogs.com/haichao/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。