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

2010年12月28日 星期二

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

Bookmark and Share

此篇延續之前的 iphone app 開發 (三十三) flickr API 研究之二

但是本篇將會完成文字輸入以及搜尋 flickr 照片的功能

原始的教學是英文然後開放的,可以到 這裡 來觀看,而且原本的教學有影片可以讓你看到效果

 

完成本篇教學將可以達成以下兩個成果

(1) 有一個搜尋框,可以搜尋 flickr 的照片

(2) 下面用 table 顯示照片的縮圖與說明,點一下則會在上面顯示大圖

image image

 

好了,讓我們來開始吧

請從上一篇 iphone app 開發 (三十三) flickr API 研究之二 的進度開始

 

首先我們建立一個觀看大圖片的類別 Class

請先在 classes 上面按右鍵,選擇 Add New File

然後選擇 Objective-C Class 並命名為 ZoomedImageView

這時專案裡會多出一個 ZoomedImageView.h 與 ZoomedImageView.m 檔

這就是我們觀看大圖的類別

 

  1. //ZoomedImageView.h 宣告了一個 UIImageView 以前
  2. @interface ZoomedImageView : UIView
  3. {
  4.    UIImageView *fullsizeImage;
  5. }
  6.  
  7. //建立一個送訊息給某特定 URL 的方法 
  8. - (id)initWithURL:(NSURL *)url;
  9.  
  10. @end

 

再來是 implement

  1. #import "ZoomedImageView.h"
  2.  
  3. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  4. * Private interface definitions (隱藏的方法)
  5. *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  6. @interface ZoomedImageView(private)
  7. - (void)slideViewOffScreen;
  8. @end
  9.  
  10. @implementation ZoomedImageView
  11.  
  12. /**************************************************************************
  13. * Private implementation section (隱藏方法的實作)
  14. **************************************************************************/
  15.  
  16. #pragma mark -
  17. #pragma mark Private Methods
  18.  
  19.  // 此方法的用意是當使用者觸碰圖片的時候,圖片會跑進來畫面 (因為 x = –320 會跑進來)
  20. - (void)slideViewOffScreen
  21. {
  22.   // 抓到 View 的 frame 物件
  23.   CGRect frame = self.frame;
  24.  
  25.   // 告訴 UIView 開始動畫,且圖片移入移出都是一部動畫
  26.   [UIView beginAnimations:nil context:NULL];
  27.   [UIView setAnimationDuration:.45];
  28.  
  29.   // 讓 frame 往左移 320 pixel ,新圖片會移進畫面,舊圖片會移出
  30.   frame.origin.x = -320;
  31.   self.frame = frame;
  32.  
  33.   // 觀看 view
  34.   [UIView commitAnimations];
  35. }
  36.  
  37. /**************************************************************************
  38. * Class implementation section
  39. **************************************************************************/
  40.  
  41. #pragma mark -
  42. #pragma mark Initialization
  43.  
  44. - (id)initWithURL:(NSURL *)url
  45. {
  46.   if (self = [super init])
  47.   {
  48.     // 預先在畫面外面右邊創造放置圖片的 view(x,y,width,height)
  49.     self.frame = CGRectMake(320, 0, 320, 240);
  50.  
  51.     // 設定大圖片內容
  52.     NSData *imageData = [NSData dataWithContentsOfURL:url];
  53.     fullsizeImage = [[UIImageView alloc] initWithImage:[UIImage
  54.         imageWithData:imageData]];
  55.  
  56.     // 讓圖片置中
  57.     int width = fullsizeImage.frame.size.width;
  58.     int height = fullsizeImage.frame.size.height;
  59.  
  60.     int x = (320 - width) / 2;
  61.     int y = (240 - height) / 2;
  62.  
  63.     // 設定圖片位置
  64.     [fullsizeImage setFrame:CGRectMake(x, y, width, height)];    
  65.     fullsizeImage.userInteractionEnabled = YES;                                     
  66.     [self addSubview:fullsizeImage];
  67.  
  68.   }
  69.  
  70.   return self; 
  71. }
  72.  
  73. #pragma mark -
  74. #pragma mark Event Mgmt
  75.  
  76. - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
  77. {
  78.   [self slideViewOffScreen];
  79.  
  80.   // 我們在這裡送了一個訊息給 (JSONFlickrViewController) 以重新開始搜尋
  81.   [self.nextResponder touchesBegan:touches withEvent:event];
  82.  
  83. }
  84.  
  85. #pragma mark -
  86. #pragma mark Cleanup
  87.  
  88. - (void)dealloc
  89. {
  90.   [fullsizeImage release];
  91.   [super dealloc];
  92. }
  93.  
  94. @end

 

接下來要實作搜尋框的部份

請先在 header 檔宣告會用到的變數

 

  1. // 記得要加入 UITextFieldDelegate 的委派
  2. @interface flickrViewController : UIViewController <UITableViewDelegate,
  3.     UITableViewDataSource, UITextFieldDelegate>
  4. {
  5.   UITextField     *searchTextField;     // 輸入的文字框
  6.   UITableView     *theTableView;        // 裝圖片的表格
  7.   NSMutableArray  *photoTitles;         // Titles of images
  8.   NSMutableArray  *photoSmallImageData; // Image data (thumbnail)
  9.   NSMutableArray  *photoURLsLargeImage; // URL to larger image
  10.  
  11.   ZoomedImageView  *fullImageViewController; // 宣告上面用於顯示大圖的類別
  12.   UIActivityIndicatorView *activityIndicator;  // 即旋轉的小圈圈
  13. }

 

而 search box 與 activityIndicator 的實作則是以下代碼,從 init 開始就必須被載入

 

  1. - (id)init
  2.  
  3.    ...
  4.  
  5.     // 產生搜尋框的代碼,下面幾行都是預設的參數
  6.     searchTextField = [[[UITextField alloc] initWithFrame:CGRectMake(110,
  7.         100, 100, 40)] retain];
  8.     [searchTextField setBorderStyle:UITextBorderStyleRoundedRect];
  9.      searchTextField.placeholder = @"search";
  10.      searchTextField.returnKeyType = UIReturnKeyDone;
  11.      searchTextField.clearButtonMode = UITextFieldViewModeWhileEditing;
  12.      searchTextField.delegate = self;
  13.     [self.view addSubview:searchTextField];
  14.     [searchTextField release];
  15.  
  16.     // Create activity indicator (就是等待 loading 的那個小圈圈)
  17.     activityIndicator = [[UIActivityIndicatorView alloc]
  18.          initWithFrame:CGRectMake(220, 110, 15, 15)];
  19.     activityIndicator.activityIndicatorViewStyle =
  20.          UIActivityIndicatorViewStyleWhite;
  21.     activityIndicator.autoresizingMask =
  22.          (UIViewAutoresizingFlexibleLeftMargin |
  23.                       UIViewAutoresizingFlexibleRightMargin |
  24.                       UIViewAutoresizingFlexibleTopMargin |
  25.                       UIViewAutoresizingFlexibleBottomMargin);
  26.     [activityIndicator sizeToFit];
  27.     activityIndicator.hidesWhenStopped = YES;
  28.     [self.view addSubview:activityIndicator];
  29.  
  30.   ...
  31. }

 

當你輸入新的搜尋關鍵字時,會呼叫 textFieldShouldReturn  這個方法,會清除之前搜尋結果,把 UITableView 清空,並把新的資料丟進去,在等待的過程會呼叫 activity indicator

 

  1. - (BOOL)textFieldShouldReturn:(UITextField *)textField
  2. {
  3.   [textField resignFirstResponder];
  4.  
  5.   // 把之前的結果都移除掉
  6.   [photoTitles removeAllObjects];
  7.   [photoSmallImageData removeAllObjects];
  8.   [photoURLsLargeImage removeAllObjects];
  9.  
  10.   // 重新開始從 flickr 抓資料
  11.   [self searchFlickrPhotos:searchTextField.text];
  12.  
  13.   // 告知 activityIndicator 開始動作,表示正在 loading data
  14.   [activityIndicator startAnimating];
  15.  
  16.   return YES;
  17. }

 

接下來要實作的動作為:如果使用者點選其他縮圖,我們必須把現在的大圖移除,然後移入新的大圖,這部份我們必須先把 searchbox 關掉,再來判斷現在只否已經有大圖正在顯示,如果有的話就先移掉,然後再把新的大圖帶入。

 

  1. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:
  2.     (NSIndexPath *)indexPath
  3. {
  4.   // 讓 searchbox 先消失
  5.   searchTextField.hidden = YES;
  6.  
  7.   // 如果不是第一次載入大圖,已經在顯示了,則必須考量這裡面的情況
  8.   if (fullImageViewController != nil)
  9.   {
  10.     // 先讓一個 frame 變數接到現在的 VC
  11.     CGRect frame = fullImageViewController.frame;
  12.  
  13.     [UIView beginAnimations:nil context:NULL];
  14.     [UIView setAnimationDuration:.45]; // 設定動畫時間
  15.  
  16.     // 把這張大圖移出去
  17.     frame.origin.x = -320;
  18.     fullImageViewController.frame = frame;
  19.  
  20.     [UIView commitAnimations]; // 開始動畫
  21.   }
  22.  
  23.   // 顯示新的大圖
  24.   [self performSelector:@selector(showZoomedImage:) withObject:indexPath
  25.        afterDelay:0.1];
  26. }

 

上面的最後階段我們 call 了 showZoomedImage 的方法,即重新顯示使用者 request 的圖片

實現的程式碼如下:

 

  1. - (void)showZoomedImage:(NSIndexPath *)indexPath
  2. {
  3.   // 把之前的 view 移除掉
  4.   if ([fullImageViewController superview])
  5.     [fullImageViewController removeFromSuperview];
  6.  
  7.   fullImageViewController = [[ZoomedImageView alloc] initWithURL:
  8.     [photoURLsLargeImage objectAtIndex:indexPath.row]];
  9.  
  10.   [self.view addSubview:fullImageViewController];
  11.  
  12.   // 把 view 移除的動畫
  13.   CGRect frame = fullImageViewController.frame;
  14.  
  15.   [UIView beginAnimations:nil context:NULL];
  16.   [UIView setAnimationDuration:.45];
  17.  
  18.   // 把新的大圖移到新的地點(畫面當中)
  19.   frame.origin.x = 0;
  20.   fullImageViewController.frame = frame;
  21.  
  22.   [UIView commitAnimations];
  23. }

 

到此大致已經完成了,使用者可以試著編譯看看

或是直接下載作者的專案檔來玩看看

Download iPhone, JSON and Flickr – Part 3 Xcode project

0 意見:

張貼留言

Related Posts Plugin for WordPress, Blogger...