[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