[iPhone中级] iPhone团购信息客户端的开发 (3)_Iphone

[iPhone中级] iPhone团购信息客户端的开发 (三)

接上二篇的内容，今天我们就来介绍一下如何将解析出来的数据放入AQGridView中显示出来，因为我们的工程中已经将AQGridView导入了，所以我们在KKFirstViewController中直接可以引用

#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这个方法中，我们加入了

    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加入主视图中

接着还有两个方法一定需要实现的

#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

#import "AQGridViewCell.h"@interface GridViewCell : AQGridViewCell@property(nonatomic, retain)UIImageView *imageView;@property(nonatomic, retain)UILabel *captionLabel;@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来实现缓存。

看一下代码呢，这代码也是参考了别人写的

//缓存图片-(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中加入显示图片的代码就可以了，就实现了异步加载图片

//利用缓存保存图片    [cell.imageView setImage:[self cachedImageForUrl:[NSURL URLWithString:[dict objectForKey:kName_Img]]]];

好了，这个程序中主要介绍了AQGridView库，MBProgressHUD，KissXML，ASIHttpRequest这几个库，综合利用各个类库将可以使我们的程序美观，也可以缩短我们的开发周期。好了，谢谢大家有耐心看完。这里提供了源码下载

程序源码