ios 团购信息客户端demo(三)

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

[plain] view plaincopy

1. #import <UIKit/UIKit.h>
2. #import "ASIHTTPRequest.h"
3. #import "AQGridView.h"
4. @interface KKFirstViewController : UIViewController<ASIHTTPRequestDelegate, AQGridViewDelegate, AQGridViewDataSource>
5. @property(nonatomic, retain)AQGridView *gridView;
6. @end

这里加入了AQGridViewDelegate和AQGridViewDataSource这两个委托，简单一点我们可以把AQGridView看成UITableView，同样的道理，一个是数据源的方法，一个就是选中的方法

然后就是
在-(void)viewDidLoad这个方法中，我们加入了

[plain] view plaincopy

1. self.gridView = [[AQGridView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
2. self.gridView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
3. self.gridView.autoresizesSubviews = YES;
4. self.gridView.delegate = self;
5. self.gridView.dataSource = self;
6. [self.view addSubview:gridView];

将当前的gridView加入主视图中

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

[plain] view plaincopy

1. #pragma mark AQGridViewDataSource
2. //总共有的Item
3. -(NSUInteger)numberOfItemsInGridView:(AQGridView *)gridView{
4. return [arrays count];
5. }
6. //每个Item
7. -(AQGridViewCell *)gridView:(AQGridView *)aGridView cellForItemAtIndex:(NSUInteger)index{
8. static NSString *identifier = @"PlainCell";
9. GridViewCell *cell = (GridViewCell *)[aGridView dequeueReusableCellWithIdentifier:identifier];
10. if(cell == nil){
11. cell = [[GridViewCell alloc] initWithFrame:CGRectMake(0, 0, 160, 123) reuseIdentifier:identifier];
12. }
13. //取得每一个字典
14. NSDictionary *dict = [arrays objectAtIndex:index];
15. [cell.captionLabel setText:[dict objectForKey:kName_Title]];
16. return cell;
17. }
18. //每个显示框大小
19. -(CGSize)portraitGridCellSizeForGridView:(AQGridView *)gridView{
20. return CGSizeMake(160, 123);
21. }

这里还少一个类，就是GridView，这个类继承了AQGridViewCell，里面就是我们单独要显示的一个Item

[plain] view plaincopy

1. #import "AQGridViewCell.h"
2. @interface GridViewCell : AQGridViewCell
3. @property(nonatomic, retain)UIImageView *imageView;
4. @property(nonatomic, retain)UILabel *captionLabel;
5. @end

图片显示的是团购信息中的图片，还有一个是文本

[plain] view plaincopy

1. #import "GridViewCell.h"
2. @implementation GridViewCell
3. @synthesize imageView,captionLabel;
4. - (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString *)reuseIdentifier
5. {
6. self = [super initWithFrame:frame reuseIdentifier:reuseIdentifier];
7. if (self) {
8. UIView *mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 123)];
9. [mainView setBackgroundColor:[UIColor clearColor]];
10. UIImageView *frameImageView = [[UIImageView alloc] initWithFrame:CGRectMake(9, 4, 142, 117)];
11. [frameImageView setImage:[UIImage imageNamed:@"tab-mask.png"]];
12. self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(13, 8, 135, 84)];
13. self.captionLabel = [[UILabel alloc] initWithFrame:CGRectMake(13, 92, 127, 21)];
14. [captionLabel setFont:[UIFont systemFontOfSize:14]];
15. [mainView addSubview:imageView];
16. [mainView addSubview:frameImageView];
17. [mainView addSubview:captionLabel];
18. [self.contentView addSubview:mainView];
19. }
20. return self;
21. }
22. @end

这里面定义了三个控件，两个控件是我们要传入的数据，一个图片，一个文本，还有一个就是我们单独Item的背景

做完这一些，运行一下，我们就可以看到有文字信息的效果了，但还没有加入图片显示功能，从这里我们就要考虑了，图片是我们划动的时候再加载呢还是一次性加载呢，考虑到效果和数据流量，我们还是用异步来加载数据，这就需要加入缓存的功能了，我们用一个NSMutableArray来实现缓存。

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

[plain] view plaincopy

1. //缓存图片
2. -(UIImage *)cachedImageForUrl:(NSURL *)url{
3. id cacheObject = [self.cachedImage objectForKey:url];
4. if (cacheObject == nil) {
5. //添加占位符
6. [self.cachedImage setObject:@"Loading..." forKey:url];
7. ASIHTTPRequest *picRequest = [ASIHTTPRequest requestWithURL:url];
8. picRequest.delegate = self;
9. picRequest.didFinishSelector = @selector(didFinishRequestImage:);
10. picRequest.didFailSelector = @selector(didFailRequestImage:);
11. //加入队列
12. [self.queue addOperation:picRequest];
13. [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
14. }else if(![cacheObject isKindOfClass:[UIImage class]]){
15. cacheObject = nil;
16. }
17. return cacheObject;
18. }
19. //完成图片下载，并加入缓存
20. -(void)didFinishRequestImage:(ASIHTTPRequest *)request{
21. NSData *imageData = [request responseData];
22. UIImage *image = [UIImage imageWithData:imageData];
23. if (image != nil) {
24. [self.cachedImage setObject:image forKey:request.url];
25. [self.gridView reloadData];
26. }
27. [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
28. }
29. //下载失败
30. -(void)didFailRequestImage:(ASIHTTPRequest *)request{
31. NSLog(@"Error download Image %@", [request error]);
32. //从当前缓存中移除
33. [self.cachedImage removeObjectForKey:request.url];
34. [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
35. }

最后我们在Cell中加入显示图片的代码就可以了，就实现了异步加载图片

[plain] view plaincopy

1. //利用缓存保存图片