天天看點

使用 UITableView 建立表格應用——從plist檔案加載并顯示資料(轉)

最近在寫一個遊戲,要把外邊的資料檔案導入程式中的數組。是以網上找到了這個文章,認

本文目标

本文以上一篇為基礎,對應用進行擴充,介紹以下内容:

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内容。

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "​​​http://www.apple.com/DTDs/PropertyList-1.0.dtd​​​">
 <plist version="1.0">
 <array>
     <dict>
         <key>UserName</key>
         <string>愛Apps</string>
         <key>Image</key>
         <string>愛Apps.jpeg</string>
         <key>WebSite</key>
         <string>http://weibo.com/iapps</string>
         <key>Category</key>
         <string>蘋果咨詢</string>
         <key>Favorite</key>
         <real>3.5</real>
     </dict>
     <dict>
         <key>UserName</key>
         <string>蘋果彙</string>
         <key>Image</key>
         <string>蘋果彙.jpeg</string>
         <key>WebSite</key>
         <string>http://weibo.com/appleus</string>
         <key>Favorite</key>
         <real>3.5</real>
         <key>Category</key>
         <string>蘋果咨詢</string>
     </dict>
     <dict>
         <key>UserName</key>
         <string>數位iPhone大百科</string>
         <key>Image</key>
         <string>數位iPhone大百科.jpeg</string>
         <key>WebSite</key>
         <string>http://weibo.com/gx110</string>
         <key>Favorite</key>
         <real>3.5</real>
         <key>Category</key>
         <string>蘋果咨詢</string>
     </dict>
     <dict>
         <key>UserName</key>
         <string>新浪視野</string>
         <key>Image</key>
         <string>新浪視野.jpeg</string>
         <key>WebSite</key>
         <string>http://weibo.com/wboard</string>
         <key>Favorite</key>
         <real>3.5</real>
         <key>Category</key>
         <string>官方機構</string>
     </dict>
     <dict>
         <key>UserName</key>
         <string>李開複</string>
         <key>Image</key>
         <string>李開複.jpeg</string>
         <key>WebSite</key>
         <string>http://weibo.com/kaifulee</string>
         <key>Favorite</key>
         <real>3.5</real>
         <key>Category</key>
         <string>IT名人</string>
     </dict>
 </array>
 </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”,代碼如下:

@interface JOYTableViewController () {
 @private
     NSMutableArray *_userList;
 }      
2. 在viewDidLoad方法中添加幾行代碼,由plist檔案中的内容來填充_userList,代碼如下: - (void)viewDidLoad
 {
     [super viewDidLoad];
 
     // 設定pList檔案路徑
     NSString *dataPath = [[NSBundle mainBundle]pathForResource:@"FocusUsers.plist" ofType:nil];
     // 填充數組内容
     _userList = [NSMutableArray arrayWithContentsOfFile:dataPath];
     
 }      

小技巧:設定檔案路徑時,如果在“ofType”的參數是nil,則可以在pathForResource中使用檔案全名。我也是剛剛知道這一技巧,忍不住在代碼中就用上了,呵呵。

3. 修改 - (UITableViewCell *)tableView 方法中設定文本部分的代碼。将原有的設定文本的語句删除,因為現在數組中儲存的已經不是一個個字元串了,而是一個個字典了,替換成以下兩句代碼:

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

替換之後,這個方法完整看起來應該是這個樣子:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 {
     static NSString *CellIdentifier = @"Cell";
     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
     
     // Configure the cell...
     // 執行個體化單元格對象
     if (cell == nil) {
         cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
     }
     
     // 設定單元格文本
     NSDictionary *item = [_userList objectAtIndex:indexPath.row];
     [cell.textLabel setText:[item objectForKey:@"UserName"]];
     
     return cell;
 }      

好,現在我們運作一下看一下效果,見下圖:

運作效果雖然和上一篇演練結束前的結果看起來一樣,不過我們現在可是從plist中加載的資料哦。不過說實話,這個運作界面真的不是很美觀。

下面讓我們來想辦法讓界面看起來好那麼一點,最起碼要比現在好些。

三. 在表格中顯示頭像并調整表格樣式

在本篇第一步準備工作中,朋友們應該發現準備了家長頭像圖檔,在本節中我們就來把這些頭像顯示在表格中。:]

在剛剛增加代碼的代碼下面增加一句:

// 顯示頭像       [cell.imageView setImage:[UIImage imageNamed:[item objectForKey:@"Image"]]];      
現在我們再運作看看效果。      

頭像已經顯示出來了,怎麼樣?簡單吧,哈哈。

現在我們想改變一下文字的顯示效果,變換一個字型,調整一下大小,改變一下顔色,以及對齊方向。

我們在設定文本内容那句話下面增加如下代碼:

// 設定字型
     [cell.textLabel setFont:[UIFont fontWithName:@"Helvetica" size:16.0f]];
     // 改變字型顔色
     [cell.textLabel setTextColor:[UIColor orangeColor]];
     // 調整文本居中對齊
     [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”檔案,在接口中輸入如下代碼:  @interface JOYFocusUser : NSObject
 
 @property (strong, nonatomic) NSString *userName;
 @property (strong, nonatomic) UIImage *image;
 @property (strong, nonatomic) NSString *webSite;
 @property (assign, nonatomic) CGFloat favorite;
 @property (strong, nonatomic) NSString *categoryName;
 
 // 使用字典項目執行個體化對象屬性
 - (id)initWithItem:(NSDictionary *)item;
 
 @end

     其中3~7句一次定義了資料模型的屬性,第10句定義了一個方法,用于執行個體化資料模型,供外部對象調用。提示:與前一篇演練中提到的不同,因為資料模型的屬性和方法需要被其他對象通路,是以這些屬性和方法需要在.h檔案中定義才可以。6. 點選打開“JOYFocusUser.m”檔案,在實作中輸入如下代碼:   #import "JOYFocusUser.h"
 
 @implementation JOYFocusUser
 @synthesize userName = _userName;
 @synthesize image = _image;
 @synthesize webSite = _webSite;
 @synthesize favorite = _favorite;
 @synthesize categoryName = _categoryName;
 
 - (id)initWithItem:(NSDictionary *)item {
     
     self = [super init];
     if (self) {
         _userName = [item objectForKey:@"UserName"];
         _image = [UIImage imageNamed:[item objectForKey:@"Image"]];
         _webSite = [item objectForKey:@"WebSite"];
         _favorite = [[item objectForKey:@"Favorite"]floatValue];
         _categoryName = [item objectForKey:@"Category"];
     }
     return self;
 }
 
 @end
 小提示:按住 control + command + 上下方向鍵,可以在.h和.m檔案之間來回切換。:]到此為止,我們的資料模型已經準備好了,下面我們來看看如何使用這個模型。1. 點選打開“JOYTableViewController.m”檔案,在檔案頂部的#import "JOYTableViewController.h"之後加入:      
#import "JOYFocusUser.h"      
2. 在 - (void)viewDidLoad 方法中,對代碼調整一下,使用剛剛建立的資料模型來實作數組的填充過程,代碼如下:      
- (void)viewDidLoad
 {
     [super viewDidLoad];
 
     // 設定pList檔案路徑
     NSString *dataPath = [[NSBundle mainBundle]pathForResource:@"FocusUsers.plist" ofType:nil];
     // 填充臨時數組
     NSMutableArray *array = [NSMutableArray arrayWithContentsOfFile:dataPath];
     
     // 初始化一個空的使用者清單數組
     _userList = [[NSMutableArray alloc]init];
     for (NSDictionary *item in array) {
         JOYFocusUser *user = [[JOYFocusUser alloc]initWithItem:item];
         [_userList addObject:user];
     }
 
 }      
說明:以上代碼使用了一個for循環,依次建立使用者執行個體并添加到_userList數組中。      
3. 在 - (UITableViewCell *)tableView 方法中,我們需要修改三句話:      
// 設定單元格文本     //    NSDictionary *item = [_userList objectAtIndex:[indexPath row]];        JOYFocusUser *user = [_userList objectAtIndex:[indexPath row]];    //    [cell.textLabel setText:[item objectForKey:@"UserName"]];        [cell.textLabel setText:[user userName]];
      // 顯示頭像    //    [cell.imageView setImage:[UIImage imageNamed:[item objectForKey:@"Image"]]];        [cell.imageView setImage:[user image]];      
此時我們運作一下程式,與上一部分完成時的效果,并沒有發生任何變化。      
不過在程式方面,我們導入了一個資料模型,這樣使得我們隻是在程式加載時,執行個體化一次數組項目即可,以後調用時,我們可以直接針對這個資料模型進行操作了。:]      
為了友善大家閱讀,我在上面貼的代碼中,注釋了前面使用過的代碼,這樣能夠友善大家體會兩種方式之間的差別。      
五. 小結      
本次演練到此結束,到目前為止,我們已經實作了一個從plist加載資料的表格應用。:]      
本演練源程式下載下傳位址:JoyiOSMyFocus2.zip      
在文中,我隻使用了用plist檔案初始化數組NSArray的一些代碼。      
// 設定pList檔案路徑
     NSString *dataPath = [[NSBundle mainBundle]pathForResource:@"FocusUsers.plist" ofType:nil];
     // 填充臨時數組
     NSMutableArray *array = [NSMutableArray arrayWithContentsOfFile:dataPath];