[iPhone中級] iPhone團購信息客戶端的開發 (三) – iPhone手機開發技術文章 iPhone軟體開發教學課程

接上二篇的內容,今天我們就來介紹一下如何將解析出來的數據放入AQGridView中顯示出來,因為我們的工程中已經將AQGridView導入瞭,所以我們在KKFirstViewController中直接可以引用

[plain]
#import <UIKit/UIKit.h> 
#import "ASIHTTPRequest.h" 
#import "AQGridView.h" 
 
 
@interface KKFirstViewController : UIViewController<ASIHTTPRequestDelegate, AQGridViewDelegate, AQGridViewDataSource> 
 
@property(nonatomic, retain)AQGridView *gridView; 
 
@end 
#import <UIKit/UIKit.h>
#import "ASIHTTPRequest.h"
#import "AQGridView.h"

@interface KKFirstViewController : UIViewController<ASIHTTPRequestDelegate, AQGridViewDelegate, AQGridViewDataSource>

@property(nonatomic, retain)AQGridView *gridView;

@end這裡加入瞭AQGridViewDelegate和AQGridViewDataSource這兩個委托,簡單一點我們可以把AQGridView看成UITableView,同樣的道理,一個是數據源的方法,一個就是選中的方法

然後就是
在-(void)viewDidLoad這個方法中,我們加入瞭

[plain]
self.gridView = [[AQGridView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)]; 
self.gridView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 
self.gridView.autoresizesSubviews = YES; 
self.gridView.delegate = self; 
self.gridView.dataSource = self; 
 
[self.view addSubview:gridView]; 
    self.gridView = [[AQGridView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
    self.gridView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    self.gridView.autoresizesSubviews = YES;
    self.gridView.delegate = self;
    self.gridView.dataSource = self;
   
    [self.view addSubview:gridView];將當前的gridView加入主視圖中

接著還有兩個方法一定需要實現的

[plain]
#pragma mark AQGridViewDataSource 
//總共有的Item 
-(NSUInteger)numberOfItemsInGridView:(AQGridView *)gridView{ 
     
    return [arrays count]; 

//每個Item 
-(AQGridViewCell *)gridView:(AQGridView *)aGridView cellForItemAtIndex:(NSUInteger)index{ 
     
    static NSString *identifier = @"PlainCell"; 
     
    GridViewCell *cell = (GridViewCell *)[aGridView dequeueReusableCellWithIdentifier:identifier]; 
     
    if(cell == nil){ 
         
        cell = [[GridViewCell alloc] initWithFrame:CGRectMake(0, 0, 160, 123) reuseIdentifier:identifier]; 
    } 
     
    //取得每一個字典 
    NSDictionary *dict = [arrays objectAtIndex:index]; 
     
    [cell.captionLabel setText:[dict objectForKey:kName_Title]]; 
     
    return cell; 
     

 
//每個顯示框大小 
-(CGSize)portraitGridCellSizeForGridView:(AQGridView *)gridView{ 
     
    return CGSizeMake(160, 123); 

#pragma mark AQGridViewDataSource
//總共有的Item
-(NSUInteger)numberOfItemsInGridView:(AQGridView *)gridView{
   
    return [arrays count];
}
//每個Item
-(AQGridViewCell *)gridView:(AQGridView *)aGridView cellForItemAtIndex:(NSUInteger)index{
   
    static NSString *identifier = @"PlainCell";
   
    GridViewCell *cell = (GridViewCell *)[aGridView dequeueReusableCellWithIdentifier:identifier];
   
    if(cell == nil){
       
        cell = [[GridViewCell alloc] initWithFrame:CGRectMake(0, 0, 160, 123) reuseIdentifier:identifier];
    }
   
    //取得每一個字典
    NSDictionary *dict = [arrays objectAtIndex:index];
   
    [cell.captionLabel setText:[dict objectForKey:kName_Title]];
   
    return cell;
   
}

//每個顯示框大小
-(CGSize)portraitGridCellSizeForGridView:(AQGridView *)gridView{
   
    return CGSizeMake(160, 123);
}
這裡還少一個類,就是GridView,這個類繼承瞭AQGridViewCell,裡面就是我們單獨要顯示的一個Item

[plain] view plaincopyprint?#import "AQGridViewCell.h" 
 
@interface GridViewCell : AQGridViewCell 
 
@property(nonatomic, retain)UIImageView *imageView; 
@property(nonatomic, retain)UILabel *captionLabel; 
 
@end 
#import "AQGridViewCell.h"

@interface GridViewCell : AQGridViewCell

@property(nonatomic, retain)UIImageView *imageView;
@property(nonatomic, retain)UILabel *captionLabel;

@end圖片顯示的是團購信息中的圖片,還有一個是文本

[plain]
#import "GridViewCell.h" 
 
@implementation GridViewCell 
 
@synthesize imageView,captionLabel; 
 
 
– (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString *)reuseIdentifier 

    self = [super initWithFrame:frame reuseIdentifier:reuseIdentifier]; 
    if (self) { 
         
        UIView *mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 123)]; 
        [mainView setBackgroundColor:[UIColor clearColor]]; 
         
        UIImageView *frameImageView = [[UIImageView alloc] initWithFrame:CGRectMake(9, 4, 142, 117)]; 
        [frameImageView setImage:[UIImage imageNamed:@"tab-mask.png"]]; 
         
        self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(13, 8, 135, 84)]; 
         
        self.captionLabel = [[UILabel alloc] initWithFrame:CGRectMake(13, 92, 127, 21)]; 
        [captionLabel setFont:[UIFont systemFontOfSize:14]]; 
         
        [mainView addSubview:imageView]; 
        [mainView addSubview:frameImageView]; 
        [mainView addSubview:captionLabel]; 
         
        [self.contentView addSubview:mainView]; 
         
    } 
    return self; 

 
@end 
#import "GridViewCell.h"

@implementation GridViewCell

@synthesize imageView,captionLabel;

– (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithFrame:frame reuseIdentifier:reuseIdentifier];
    if (self) {
       
        UIView *mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 123)];
        [mainView setBackgroundColor:[UIColor clearColor]];
       
        UIImageView *frameImageView = [[UIImageView alloc] initWithFrame:CGRectMake(9, 4, 142, 117)];
        [frameImageView setImage:[UIImage imageNamed:@"tab-mask.png"]];
       
        self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(13, 8, 135, 84)];
       
        self.captionLabel = [[UILabel alloc] initWithFrame:CGRectMake(13, 92, 127, 21)];
        [captionLabel setFont:[UIFont systemFontOfSize:14]];
       
        [mainView addSubview:imageView];
        [mainView addSubview:frameImageView];
        [mainView addSubview:captionLabel];
       
        [self.contentView addSubview:mainView];
       
    }
    return self;
}

@end
這裡面定義瞭三個控件,兩個控件是我們要傳入的數據,一個圖片,一個文本,還有一個就是我們單獨Item的背景

做完這一些,運行一下,我們就可以看到有文字信息的效果瞭,但還沒有加入圖片顯示功能,從這裡我們就要考慮瞭,圖片是我們劃動的時候再加載呢還是一次性加載呢,考慮到效果和數據流量,我們還是用異步來加載數據,這就需要加入緩存的功能瞭,我們用一個NSMutableArray來實現緩存。

看一下代碼呢,這代碼也是參考瞭別人寫的

[plain]
//緩存圖片 
-(UIImage *)cachedImageForUrl:(NSURL *)url{ 
     
    id cacheObject = [self.cachedImage objectForKey:url]; 
     
    if (cacheObject == nil) { 
        //添加占位符 
        [self.cachedImage setObject:@"Loading…" forKey:url]; 
         
        ASIHTTPRequest *picRequest = [ASIHTTPRequest requestWithURL:url]; 
        picRequest.delegate = self; 
        picRequest.didFinishSelector = @selector(didFinishRequestImage:); 
        picRequest.didFailSelector = @selector(didFailRequestImage:); 
        //加入隊列 
        [self.queue addOperation:picRequest]; 
         
        [UIApplication sharedApplication].networkActivityIndicatorVisible = YES; 
         
    }else if(![cacheObject isKindOfClass:[UIImage class]]){ 
        cacheObject = nil; 
    } 
     
    return cacheObject; 
     

 
//完成圖片下載,並加入緩存 
-(void)didFinishRequestImage:(ASIHTTPRequest *)request{ 
     
    NSData *imageData = [request responseData]; 
    UIImage *image = [UIImage imageWithData:imageData]; 
    if (image != nil) { 
        [self.cachedImage setObject:image forKey:request.url]; 
         
        [self.gridView reloadData]; 
    } 
     
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO; 

 
//下載失敗 
-(void)didFailRequestImage:(ASIHTTPRequest *)request{ 
     
    NSLog(@"Error download Image %@", [request error]); 
    //從當前緩存中移除 
    [self.cachedImage removeObjectForKey:request.url]; 
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO; 
     

//緩存圖片
-(UIImage *)cachedImageForUrl:(NSURL *)url{
   
    id cacheObject = [self.cachedImage objectForKey:url];
   
    if (cacheObject == nil) {
        //添加占位符
        [self.cachedImage setObject:@"Loading…" forKey:url];
       
        ASIHTTPRequest *picRequest = [ASIHTTPRequest requestWithURL:url];
        picRequest.delegate = self;
        picRequest.didFinishSelector = @selector(didFinishRequestImage:);
        picRequest.didFailSelector = @selector(didFailRequestImage:);
        //加入隊列
        [self.queue addOperation:picRequest];
       
        [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
       
    }else if(![cacheObject isKindOfClass:[UIImage class]]){
        cacheObject = nil;
    }
   
    return cacheObject;
   
}

//完成圖片下載,並加入緩存
-(void)didFinishRequestImage:(ASIHTTPRequest *)request{
   
    NSData *imageData = [request responseData];
    UIImage *image = [UIImage imageWithData:imageData];
    if (image != nil) {
        [self.cachedImage setObject:image forKey:request.url];
       
        [self.gridView reloadData];
    }
   
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
}

//下載失敗
-(void)didFailRequestImage:(ASIHTTPRequest *)request{
   
    NSLog(@"Error download Image %@", [request error]);
    //從當前緩存中移除
    [self.cachedImage removeObjectForKey:request.url];
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
   
}
 

最後我們在Cell中加入顯示圖片的代碼就可以瞭,就實現瞭異步加載圖片

[plain] 
//利用緩存保存圖片 
    [cell.imageView setImage:[self cachedImageForUrl:[NSURL URLWithString:[dict objectForKey:kName_Img]]]]; 
//利用緩存保存圖片
    [cell.imageView setImage:[self cachedImageForUrl:[NSURL URLWithString:[dict objectForKey:kName_Img]]]];好瞭,這個程序中主要介紹瞭AQGridView庫,MBProgressHUD,KissXML,ASIHttpRequest這幾個庫,綜合利用各個類庫將可以使我們的程序美觀,也可以縮短我們的開發周期。好瞭,謝謝大傢有耐心看完。
作者:kangkangz4
 

發佈留言