使用 UITableView 创建表格应用演练(1)——一个简单的表格应用

长平狐 发布于 2013/12/26 11:22
阅读 955
收藏 0

在很多iOS应用中都有UITableView控件的身影。让我们的系列教程也从UITableView开始吧。

目标

任何一个伟大的iOS应用都源自一个伟大的构想。虽然我们只是再做演练,但演练也同样需要一个伟大的构想!这样我们会产生更加浓烈的兴趣,目标更加明确,同时不会纠结于具体的细节之中。

提示:细节是在不断重复中逐渐掌握的,过早的进入细节很容易让人迷失方向。

现在用微博的人越来越多,假设我们需要一个管理“微博关注人”的列表这么一个应用,能够帮助我维护微博关注人的信息。怎么样?对于一个iOS初学者,这么一个假设应该已经足够大了吧。:]

那么我们就开始动手吧。 

一. 创建应用

创建应用的方法,可以参见前两天写的:第一个iOS应用——Hello world!,在此不再累述,创建应用时用“My Focus”做为产品名称。如下图所示:

二. 增加表格控件

1. 打开“MainStoryboard.storyboard”文件;

2. 因为要做一个表格应用,而默认的Storyboard是一个视图应用,先点击“View Controller”,把它删除,如下图所示:

删除之后,我们会发现一片空白,如下图所示:

3. 添加表格视图控件——从右侧的“工具区域”找到Table View Controller控件,拖到StoryBoard的空白区域放手;

4. 点击“Table View Controller”左侧的折叠标记依次展开选中“Table View Cell”,然后在属性区的“Identifier”输入:“userInfoCell”,如下图所示:

OK,我们运行一下,看看刚才比划了这几下实现了哪些效果:

一个空的表格跃然屏幕之上,而且试着用手拽拽,表格都会随着手势上下滚动了。到目前为止,我们还没有写一句代码,不错吧。:]

三. 编码前的准备

在写程序之前,我们需要做一些简单的准备工作。

要写代码,需要有写的“位置”,在iOS开发中,大多情况能够“写”的位置有两个。

1. “.h”文件——头文件,用于声明对象的属性,方法等;

2. “.m”文件——对象实现文件,用于对象的具体实现。

好,我们先记住这两个,其他用不到的,我们不妨先假设我们已经会了,这样我们会有一个强大的内心,专注去做现在要做的事情。:]

让我们简单回想一下第二部分中,我们做的事情:打开“MainStoryboard”->删除了默认的“View Controller”->增加一个“Table View Controller”,因为我们要做的是一个表格应用。

既然要做的是一个表格应用,那么我们需要一个表格的实现对象,先看下导航区域的内容,如下图:

可以看到两个文件,从名字上看,一个是View Controller的头文件,一个是View Controller的实现文件,这两个文件显然也不是我们需要的,删除掉!

接下来按照以下步骤操作:

1. 在GUI上点鼠标右键,在弹出菜单中选择“New File...”,在弹出窗口中选择“Cocoa Touch”“Objective-C class”,点击“Next”按钮,见下图:

2. 在下一个的窗口中,在“Class”中输入“JOYTableViewController”,“Subclass of”中通过下拉列表选择或者输入“UITableViewController”,同时不要选择下面两个复选框,然后点击“Next”,见下图:

3. 在下一个窗口,直接点击“Create”按钮创建对象。现在的导航区域应该如下图显示:

通过以上三步操作,Xcode帮助我们准备好了头文件和实现文件。

在写代码之前,还需要做一件非常重要的事情——告诉Storyboard,它的要用按照新增加对象中的代码执行动作。

1. 打开“MainStoryboard.storyboard”;

2. 点击选中“Table View Controller”;

3. 点击工具区域的“Show the Identity Inspector”按钮,显示“标示检查器”;

4. 在“Class”中,点击下拉按钮,选择我们刚刚创建的类“JOYTableViewController”。

见下图:

好,通过简单的几步准备,接下来我们要进入具体的实做阶段,激动吗?:]

四. 通过代码填充表格

点击“导航区域”的“JOYTableViewController.m”打开它。

说明:本次演练中,所有的编码都只在这一个文件中。

小技巧:此时你按一下option + command + 0这个组合键,可以关闭“工具区域”这样可以使“编辑区域”看起来更大些。

代码开始部分有一个 @interface JOYTableViewController,我们可以把对象的私有属性和方法在此定义,而不必在 .h 文件中进行定义,这个特性可以保证你开放的接口更加的清晰简洁。

1. 定义一个数组,用于存放显示关注人信息,代码如下:

1 @interface JOYTableViewController () { 2 @private 3 NSArray * _userList; 4 } 5 6 @end

提示:不要忘记大括号啊。

2. 填充数组内容,找到viewDidLoad方法,在方法的末尾添加一句:

1 _userList = [[NSArray alloc]initWithObjects: @" 爱Apps ", @" 苹果汇 ", @" 数码iPhone大百科 " , 2 @" 新浪视野 ", @" 李开复 ", nil];

假设我只关注了这五个人。

3. 修改表格区段数,找到numberOfSectionsInTableView方法,将其中的“return 0”,改为“return 1”,如下所示:

1 - (NSInteger)numberOfSectionsInTableView:(UITableView * )tableView 2 { 3 return 1 ; 4 }

有关区段的内容,会在下一篇文章中阐述,现在我们假设表格只有一个区段。

4. 修改表格行数,找到

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

方法,将其中的return 0,改为:

1 - (NSInteger)tableView:(UITableView * )tableView numberOfRowsInSection:(NSInteger)section 2 { 3 return [_userList count]; 4 }

说明:这句话的意思是“返回 [用户列表 数量]”,Objective-C的语法有点像自然语言,大家先记住以往我们熟悉的“.”被现在的“空格”和“中括号”替代了。

预告:计划在TableView的演练专题结束后,写一篇介绍Objective-C的基础语法,尽请期待。:]

5. 在单元格中依次显示数组内容,找到 

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

方法,在最后的“return cell”语句前添加如下代码:

1 // 实例化单元格对象 2 if (cell == nil) { 3 cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; 4 } 5 6 // 设置单元格文本 7 [cell.textLabel setText:[_userList objectAtIndex:[indexPath row]]];

6. 运行看看效果,见下图:]

五. 小结

本次演练我们先暂时告一段落,到目前为止,我们已经创建了一个最简单的表格应用。虽然看起来还很粗糙,但是我们已经迈出了坚实的一步。:]

本演练源程序下载地址:JoyiOSMyFocus1.zip

下一篇文章我们会演练如何通过数据文件加载表格内容,同时在表格中显示图片等内容。敬请期待。:]


原文链接:http://www.cnblogs.com/liufan9/archive/2012/06/01/2528714.html
加载中
返回顶部
顶部