• 使用 UITableView 创建表格应用演练(2)——从plist文件加载并显示数据


    上一篇 使用UITableView创建表格应用演练(1) 介绍了一个非常简单的表格加载和显示的演练。有的朋友可能会说,这也说的忒简单了,能不能来点复杂的?

    别着急,做为程序员,要记住:无论多么复杂的应用都是由简单的应用演化而成的

    本文目标

    本文以上一篇为基础,对应用进行扩展,介绍以下内容:

    1. 数据结构定义;

    2. 从plist文件加载并显示数据;

    3. 在表格中显示头像并调整表格样式;

    4. 使用数据模型。

    一. 数据结构定义

    在上一篇演练中,使用NSArray定义了一个数组提供表格内容,但是在实际应用中,这种功能远远不能满足实际使用需求。

    前文中,我们提到要做一个维护“微博关注人”的应用。那么对于关注人,一个名字显然不能满足我们应用的需求。

    在开始之前,我们不妨先花点时间,确定一下除了姓名之外,我们还对哪些信息感兴趣,从而确定一下数据结构。见下图:

    我们给关注对象增加五个属性:姓名、头像、网址、喜好程度和类别。

    下面我们来增加一个plist文件记录我们后面需要使用的数据。

    1. 在“My Focus”上点鼠标右键,在弹出菜单中选择“New Group”,然后输入“Data”做为新建群组的名称,见下图:

    2. 在“Data”上点鼠标右键,选择“New File...”,然后选择“Resource”“Property List”,然后点击“Next”按钮,见下图:

    3. 在“Save As”输入“FocusUsers”做为数据文件的名称,然后点“Create”按钮,见下图:

    4. 在新建的“FocusUsers.plist”文件上点鼠标右键,选择“Open As”“Source Code”,我们可以看到所谓属性文件,原来是一个xml文件。将以下代码复制替换现有的xml内容。

     1 <?xml version="1.0" encoding="UTF-8"?>
     2 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
     3 <plist version="1.0">
     4 <array>
     5     <dict>
     6         <key>UserName</key>
     7         <string>爱Apps</string>
     8         <key>Image</key>
     9         <string>爱Apps.jpeg</string>
    10         <key>WebSite</key>
    11         <string>http://weibo.com/iapps</string>
    12         <key>Category</key>
    13         <string>苹果咨询</string>
    14         <key>Favorite</key>
    15         <real>3.5</real>
    16     </dict>
    17     <dict>
    18         <key>UserName</key>
    19         <string>苹果汇</string>
    20         <key>Image</key>
    21         <string>苹果汇.jpeg</string>
    22         <key>WebSite</key>
    23         <string>http://weibo.com/appleus</string>
    24         <key>Favorite</key>
    25         <real>3.5</real>
    26         <key>Category</key>
    27         <string>苹果咨询</string>
    28     </dict>
    29     <dict>
    30         <key>UserName</key>
    31         <string>数码iPhone大百科</string>
    32         <key>Image</key>
    33         <string>数码iPhone大百科.jpeg</string>
    34         <key>WebSite</key>
    35         <string>http://weibo.com/gx110</string>
    36         <key>Favorite</key>
    37         <real>3.5</real>
    38         <key>Category</key>
    39         <string>苹果咨询</string>
    40     </dict>
    41     <dict>
    42         <key>UserName</key>
    43         <string>新浪视野</string>
    44         <key>Image</key>
    45         <string>新浪视野.jpeg</string>
    46         <key>WebSite</key>
    47         <string>http://weibo.com/wboard</string>
    48         <key>Favorite</key>
    49         <real>3.5</real>
    50         <key>Category</key>
    51         <string>官方机构</string>
    52     </dict>
    53     <dict>
    54         <key>UserName</key>
    55         <string>李开复</string>
    56         <key>Image</key>
    57         <string>李开复.jpeg</string>
    58         <key>WebSite</key>
    59         <string>http://weibo.com/kaifulee</string>
    60         <key>Favorite</key>
    61         <real>3.5</real>
    62         <key>Category</key>
    63         <string>IT名人</string>
    64     </dict>
    65 </array>
    66 </plist>

    提示:plist文件是xml文件的一种特例,由“键名”“键值”成对组成,在iOS开发中,plist的使用要比xml简单些,我们演练中选择plist文件存储数据。

    5. 在“FocusUsers.plist”文件上点鼠标右键,选择“Open As”“Property List”,可以看到属性表形式的内容,见下图:

    在开始下一步工作之前,我们还需要准备一些图片,猛击此处 MyFocusDemo2Images.zip 下载本演练需要使用的图片文件。

    下载完成后,将Images文件夹从Finder中拖到“My Focus”下并放手,见下图:

    点击“Finish”按钮。此时导航区域看起来应该是下图的样子 :]

    好,到此为止,我们的准备工作基本告一段落了,下面我们将继续第一讲的内容,对代码进行调整。

    二. 从plist文件加载并显示数据

    我们仍然打开“JOYTableViewController.m”文件,开始我们的编码工作。

    1. 修改私有变量_userList的类型,将其改为:“NSMutableArray”,代码如下:

    1 @interface JOYTableViewController () {
    2 @private
    3     NSMutableArray *_userList;
    4 }

    2. 在viewDidLoad方法中添加几行代码,由plist文件中的内容来填充_userList,代码如下:

     1 - (void)viewDidLoad
     2 {
     3     [super viewDidLoad];
     4 
     5     // 设定pList文件路径
     6     NSString *dataPath = [[NSBundle mainBundle]pathForResource:@"FocusUsers.plist" ofType:nil];
     7     // 填充数组内容
     8     _userList = [NSMutableArray arrayWithContentsOfFile:dataPath];
     9     
    10 }

    小技巧:设定文件路径时,如果在“ofType”的参数是nil,则可以在pathForResource中使用文件全名。我也是刚刚知道这一技巧,忍不住在代码中就用上了,呵呵。

    3. 修改 - (UITableViewCell *)tableView 方法中设置文本部分的代码。将原有的设置文本的语句删除,因为现在数组中保存的已经不是一个个字符串了,而是一个个字典了,替换成以下两句代码:

    1     NSDictionary *item = [_userList objectAtIndex:indexPath.row];
    2     [cell.textLabel setText:[item objectForKey:@"UserName"]];

    替换之后,这个方法完整看起来应该是这个样子:

     1 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
     2 {
     3     static NSString *CellIdentifier = @"Cell";
     4     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
     5     
     6     // Configure the cell...
     7     // 实例化单元格对象
     8     if (cell == nil) {
     9         cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    10     }
    11     
    12     // 设置单元格文本
    13     NSDictionary *item = [_userList objectAtIndex:indexPath.row];
    14     [cell.textLabel setText:[item objectForKey:@"UserName"]];
    15     
    16     return cell;
    17 }

    好,现在我们运行一下看一下效果,见下图:

    运行效果虽然和上一篇演练结束前的结果看起来一样,不过我们现在可是从plist中加载的数据哦。不过说实话,这个运行界面真的不是很美观。

    下面让我们来想办法让界面看起来好那么一点,最起码要比现在好些。

    三. 在表格中显示头像并调整表格样式

    在本篇第一步准备工作中,朋友们应该发现准备了家长头像图片,在本节中我们就来把这些头像显示在表格中。:]

    在刚刚增加代码的代码下面增加一句:

    1     // 显示头像
    2     [cell.imageView setImage:[UIImage imageNamed:[item objectForKey:@"Image"]]];

    现在我们再运行看看效果。

    头像已经显示出来了,怎么样?简单吧,哈哈。

    现在我们想改变一下文字的显示效果,变换一个字体,调整一下大小,改变一下颜色,以及对齐方向。

    我们在设定文本内容那句话下面增加如下代码:

    1     // 设定字体
    2     [cell.textLabel setFont:[UIFont fontWithName:@"Helvetica" size:16.0f]];
    3     // 改变字体颜色
    4     [cell.textLabel setTextColor:[UIColor orangeColor]];
    5     // 调整文本居中对齐
    6     [cell.textLabel setTextAlignment:UITextAlignmentCenter];

    现在我们再运行看看效果。

    怎么样?还算满意吗?:]当然现在这个样子,距离商业化的应用还有不小的差距,不过已经比第一章演练完成时取得了不小的进步了。

    四. 使用数据模型

    细心的朋友可能已经发现,前一部分我们在设置文本内容和图像时,使用了:

    [item objectForKey:@"UserName"]
    [item objectForKey:@"Image"]

    这样的方法。说实话,这真的不是一个好习惯,尤其对复杂应用而言,我们要尽可能将数据和界面区分开,否则一旦数据结构发生变化,程序员需要在程序中查找所有类似的地方进行修改,这是一个很痛苦的事情。

    下面我们演练如何增加一个数据类将用户信息的处理抽取出来,让程序看起来更优雅一些。

    1. 在导航区域“My Focus”上点击鼠标右键,在弹出菜单中选择“Add Group”,然后输入“Model”做为新建群组的名称。见下图:

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

    3. 在“Class”中输入“JOYFocusUser”,“Subclass of”中输入“NSObject”,然后点击“Next"按钮,见下图:

    4. 在接下来的窗口中,我们直接点击“Create”按钮创建这个文件,此时我们的导航区域如下图所示:

    5. 点击打开“JOYFocusUser.h”文件,在接口中输入如下代码:

     1 @interface JOYFocusUser : NSObject
     2 
     3 @property (strong, nonatomic) NSString *userName;
     4 @property (strong, nonatomic) UIImage *image;
     5 @property (strong, nonatomic) NSString *webSite;
     6 @property (assign, nonatomic) CGFloat favorite;
     7 @property (strong, nonatomic) NSString *categoryName;
     8 
     9 // 使用字典项目实例化对象属性
    10 - (id)initWithItem:(NSDictionary *)item;
    11 
    12 @end

    其中3~7句一次定义了数据模型的属性,第10句定义了一个方法,用于实例化数据模型,供外部对象调用。

    提示:与前一篇演练中提到的不同,因为数据模型的属性和方法需要被其他对象访问,所以这些属性和方法需要在.h文件中定义才可以。

    6. 点击打开“JOYFocusUser.m”文件,在实现中输入如下代码:

     1 #import "JOYFocusUser.h"
     2 
     3 @implementation JOYFocusUser
     4 @synthesize userName = _userName;
     5 @synthesize image = _image;
     6 @synthesize webSite = _webSite;
     7 @synthesize favorite = _favorite;
     8 @synthesize categoryName = _categoryName;
     9 
    10 - (id)initWithItem:(NSDictionary *)item {
    11     
    12     self = [super init];
    13     if (self) {
    14         _userName = [item objectForKey:@"UserName"];
    15         _image = [UIImage imageNamed:[item objectForKey:@"Image"]];
    16         _webSite = [item objectForKey:@"WebSite"];
    17         _favorite = [[item objectForKey:@"Favorite"]floatValue];
    18         _categoryName = [item objectForKey:@"Category"];
    19     }
    20     return self;
    21 }
    22 
    23 @end

    小提示:按住 control + command + 上下方向键,可以在.h和.m文件之间来回切换。:]

    到此为止,我们的数据模型已经准备好了,下面我们来看看如何使用这个模型。

    1. 点击打开“JOYTableViewController.m”文件,在文件顶部的#import "JOYTableViewController.h"之后加入:

    1 #import "JOYFocusUser.h"

    2. 在 - (void)viewDidLoad 方法中,对代码调整一下,使用刚刚新建的数据模型来实现数组的填充过程,代码如下:

     1 - (void)viewDidLoad
     2 {
     3     [super viewDidLoad];
     4 
     5     // 设定pList文件路径
     6     NSString *dataPath = [[NSBundle mainBundle]pathForResource:@"FocusUsers.plist" ofType:nil];
     7     // 填充临时数组
     8     NSMutableArray *array = [NSMutableArray arrayWithContentsOfFile:dataPath];
     9     
    10     // 初始化一个空的用户列表数组
    11     _userList = [[NSMutableArray alloc]init];
    12     for (NSDictionary *item in array) {
    13         JOYFocusUser *user = [[JOYFocusUser alloc]initWithItem:item];
    14         [_userList addObject:user];
    15     }
    16 
    17 }

    说明:以上代码使用了一个for循环,依次建立用户实例并添加到_userList数组中。

    3. 在 - (UITableViewCell *)tableView 方法中,我们需要修改三句话:

    1     // 设置单元格文本
    2 //    NSDictionary *item = [_userList objectAtIndex:[indexPath row]];
    3     JOYFocusUser *user = [_userList objectAtIndex:[indexPath row]];
    4 //    [cell.textLabel setText:[item objectForKey:@"UserName"]];
    5     [cell.textLabel setText:[user userName]];
    1     // 显示头像
    2 //    [cell.imageView setImage:[UIImage imageNamed:[item objectForKey:@"Image"]]];
    3     [cell.imageView setImage:[user image]];

    此时我们运行一下程序,与上一部分完成时的效果,并没有发生任何变化。

    不过在程序方面,我们导入了一个数据模型,这样使得我们只是在程序加载时,实例化一次数组项目即可,以后调用时,我们可以直接针对这个数据模型进行操作了。:]

    为了方便大家阅读,我在上面贴的代码中,注释了前面使用过的代码,这样能够方便大家体会两种方式之间的区别。

    五. 小结

    本次演练到此结束,到目前为止,我们已经实现了一个从plist加载数据的表格应用。:]

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

    下一篇文章我们会演练如何将现有数据分区段显示,以及如何自定义单元格内容。敬请期待。:]

  • 相关阅读:
    无聊死了,救我
    人间奇事:什么都涨,就工资不涨
    关于Javascript Hijacking
    参考答案:关注成本和投资回报率
    IE中一个值得关注的JS问题
    100%高度的div(转载)
    维基百科开放拉
    乱弹:出名、中医、程序
    Javascript的for...in语句在IE和Firefox的差异
    真实案例:给所有想要创业的朋友的一个管理方面的测试题
  • 原文地址:https://www.cnblogs.com/liufan9/p/2531227.html
Copyright © 2020-2023  润新知