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