/* syntax highlight */ /* end of syntax highlight */

2010年12月28日 星期二

iphone app 開發 (三十四) flickr API 研究之二

Bookmark and Share

此篇延續上篇文章 iphone app 開發 (三十四) flickr API 研究之一

不過此篇在於把照片導進 UITableView 當中

原始的教學文章在 這裡

你可以對照著看

 

之後會呈現的效果如下圖,畫面下方會有圖片,及圖片的說明

image

 

 

第一步驟:了解 flickr JSON 格式

 

原本從 flickr 抓下來的資料格式大致會長像下面這張圖

image

如果把它用漂亮一點的方式去呈現的話,就會改成這樣,像字典一樣,有 index ,也有 value

image

 

我們可以觀察圖片路徑是怎樣被編譯的,圖片位置的長像會像以下這樣:http://farmX.static.flickr.com/server/id_secret.jpg

 

其中粗體的部份就是我們的參數,這時候你再對應到上面那張圖片,其實會發現每張圖其實都會有 farm 、server、id、secret 這四個參數,如此一來就會組成圖片的 unique address id

image

 

 

 

 

第二步驟:宣告 UITableView

請在 header 檔加入宣告

 

  1. @interface flickrViewController : UIViewController {
  2.    
  3.     UITableView     *theTableView;
  4.    
  5.     NSMutableArray  *photoTitles;         // Titles of images
  6.     NSMutableArray  *photoSmallImageData; // Image data (thumbnail)
  7.     NSMutableArray  *photoURLsLargeImage; // URL to larger image
  8. }

 

 

第三步驟:設定自動不斷 refresh

 

接下來請在 implement 加入部份程式碼

請在 connection 函式裡面先加入下面兩行,目的是在每次抓資料的時候都更新一次 table 內容

 

  1.     // Update the table with data
  2.     [theTableView reloadData];
  3.     [jsonString release];

 

 

第四步驟:在 init 加入 UITableView 的宣告

 

在 init 裡面請先宣告你要使用的 TableView 參數,像是行高、背景、Style、大小等等

 

  1. - (id)init
  2. {
  3.     if (self = [super init])
  4.     {
  5.         self.view = [[[UIView alloc] initWithFrame:[[UIScreen mainScreen]
  6.             applicationFrame]] autorelease];
  7.        
  8.         // 產生 Table View
  9.         theTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 240,
  10.             320, 220)];
  11.         [theTableView setDelegate:self];
  12.         [theTableView setDataSource:self];
  13.         [theTableView setRowHeight:80];
  14.         [self.view addSubview:theTableView];
  15.         [theTableView setBackgroundColor:[UIColor grayColor]];
  16.         [theTableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
  17.         …

 

 

第五步驟:實做 UITableView 方法

 

  1. //設定有幾個表格區塊
  2. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
  3. {
  4.     return 1;
  5. }
  6.  
  7. //設定有多少筆資料顯示
  8. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:
  9.        (NSInteger)section
  10. {
  11.     return [photoTitles count];
  12. }
  13.  
  14.  //設定 TableView 的內容
  15. - (UITableViewCell *)tableView:(UITableView *)tableView
  16.        cellForRowAtIndexPath:(NSIndexPath *)indexPath
  17. {
  18.     UITableViewCell *cell = [tableView
  19.        dequeueReusableCellWithIdentifier:@"cachedCell"];
  20.     if (cell == nil)
  21.         cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
  22.         reuseIdentifier:@"cachedCell"] autorelease];
  23.    
  24.    
  25. #if __IPHONE_3_0
  26.     cell.textLabel.text = [photoTitles objectAtIndex:indexPath.row];
  27.     cell.textLabel.font = [UIFont systemFontOfSize:13.0];
  28. #else
  29.     cell.text = [photoTitles objectAtIndex:indexPath.row];
  30.     cell.font = [UIFont systemFontOfSize:13.0];
  31.  
  32. #endif
  33.    
  34.     NSData *imageData = [photoSmallImageData objectAtIndex:indexPath.row];
  35.    
  36.    
  37. #if __IPHONE_3_0
  38.     cell.imageView.image = [UIImage imageWithData:imageData];
  39. #else
  40.     cell.image = [UIImage imageWithData:imageData];
  41. #endif
  42.    
  43.     return cell;
  44. }

 

其中 numberOfSectionsInTableView 的方法決定的是欄位多寡,例如下面就是 = 2 的結果

image

numberOfRowsInSection 則是共有幾筆資料,這裡設定為 photoTitles 的個數

 

而以下這段程式碼則是每次在用 UITableView 的時候都會用到的片段

  • //設定 TableView 的內容
  • - (UITableViewCell *)tableView:(UITableView *)tableView
  •        cellForRowAtIndexPath:(NSIndexPath *)indexPath
  • {
  •     UITableViewCell *cell = [tableView
  •        dequeueReusableCellWithIdentifier:@"cachedCell"];
  •     if (cell == nil)
  •         cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero
  •         reuseIdentifier:@"cachedCell"] autorelease];
  •  

    cell.textLabel. xxxx 則是設定每行字的顯示格式,一個 cell 指的就是一筆資料

    而  #if __IPHONE_3_0 則是用於判斷 iOS 版本

     

    而最後一步驟,請打開 header file

    並在 @interface 部份, UIViewController 後面加上以下這段程式碼

    <UITableViewDelegate, UITableViewDataSource>

    這述宣告是讓這個 class 遵循上面的協定,才能讓此類別做為 UITableView 的委派與資料來源

    也就是說讓這個表格顯示委派的資料

     

    都結束後可以試著編譯看看,你會看到畫面顯示了從 flickr 上下 download 的資料

     

    也可以考慮直接從作者那裡下載 Xcode 專案檔

    Download iPhone, JSON and Flickr – Part 2 Xcode project

     

     

    參考資料

    iPhone 開發教學 - 使用 UITableView & UITableViewController 提供表單服務

    iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder

    0 意見:

    張貼留言

    Related Posts Plugin for WordPress, Blogger...