[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
- iOS獲得以後裝備型號等信息(全)包括iPhone7和iPhone7P
- xcode8提交ipa掉敗沒法構建版本成績的處理計劃
- Objective-C 代碼與Javascript 代碼互相挪用實例
- iOS開辟之UIPickerView完成城市選擇器的步調詳解
- iPhone/iPad開辟經由過程LocalNotification完成iOS准時當地推送功效
- iOS開辟之用javascript挪用oc辦法而非url
- iOS App中挪用iPhone各類感應器的辦法總結
- 實例講授iOS中的UIPageViewController翻頁視圖掌握器
- iOS中應用JSPatch框架使Objective-C與JavaScript代碼交互
- iOS中治理剪切板的UIPasteboard粘貼板類用法詳解
- iOS App開辟中的UIPageControl分頁控件應用小結
- 詳解iOS App中UIPickerView轉動選擇欄的添加辦法
- iOS App中UIPickerView選擇欄控件的應用實例解析
- 實例講授iOS運用開辟中UIPickerView轉動選擇欄的用法
- iOS開辟中UIPopoverController的應用詳解
