一、集合視圖的概念
1、如何創(chuàng)建UIColletionView
2、集合視圖的布局UICollectionViewFlowLayyout
3、自定義cell
4、布局協(xié)議UICollectionViewDelegateFlowLayout
5、UICollectonView與UITableView的實現(xiàn)類似，都需要設(shè)置delegate和dataSource
6、在collectionView中,cell的布局比tableView要復(fù)雜，需要使用一個類來描述集合視圖的布局---UICollectionViewLayout->UICollectionViewFlowLayout
二、創(chuàng)建步驟
1.使用系統(tǒng)布局UICollectionViewFlowLayout
2.創(chuàng)建UICollectionView
3.設(shè)置代理，設(shè)置數(shù)據(jù)源
4.設(shè)置自定義Cell
數(shù)據(jù)源
我們需要給collectionView指定一個數(shù)據(jù)源，它負(fù)責(zé)給對collectionView提供數(shù)據(jù)與顯示
#import"JYFViewController.h"
#import"Model.h"
#import"MyCell.h"
#import"MyHeader.h"
#import"MyFooter.h"
#import"UIImageView+WebCache.h"
@interfaceJYFViewController()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
@property(nonatomic,retain)NSMutableArray*allDataArray;
@end
@implementationJYFViewController
- (void)viewDidLoad
{
[superviewDidLoad];
// 1.獲取文件路徑
NSString*filePath = [[NSBundlemainBundle]pathForResource:@"Data"ofType:@"json"];
// 2.讀取文件數(shù)據(jù)
NSData*data = [NSDatadataWithContentsOfFile:filePath];
// 3.解析數(shù)據(jù)
NSArray*array = [NSJSONSerializationJSONObjectWithData:dataoptions:NSJSONReadingAllowFragments error:nil];
// 4.遍歷放入大數(shù)組中
self.allDataArray= [NSMutableArrayarray];
for(NSDictionary*dictinarray) {
Model*model = [Modelnew];
[modelsetValuesForKeysWithDictionary:dict];
[_allDataArrayaddObject:model];
[modelrelease];
NSLog(@"%@",_allDataArray);
}
// 1.創(chuàng)建UICollectionViewFlowLayout
UICollectionViewFlowLayout*flowLayout = [[UICollectionViewFlowLayoutalloc]init];
// 1.1設(shè)置每個Item的大小
flowLayout.itemSize=CGSizeMake(90,210);
// 1.2 設(shè)置每列最小間距
flowLayout.minimumInteritemSpacing=10;
// 1.3設(shè)置每行最小間距
flowLayout.minimumLineSpacing=10;
// 1.4設(shè)置滾動方向
flowLayout.scrollDirection=UICollectionViewScrollDirectionVertical;
// 1.5設(shè)置header區(qū)域大小
flowLayout.headerReferenceSize=CGSizeMake(self.view.bounds.size.width,50);
// 1.6設(shè)置footer區(qū)域大小
flowLayout.footerReferenceSize=CGSizeMake(self.view.bounds.size.width,50);
// 1.7 設(shè)置item內(nèi)邊距大小
flowLayout.sectionInset=UIEdgeInsetsMake(10,10,10,10);
// 2.創(chuàng)建UICollectionView
UICollectionView*collectionView = [[UICollectionViewalloc]initWithFrame:self.view.boundscollectionViewLayout:flowLayout];
// 3.設(shè)置數(shù)據(jù)源代理、collection代理
collectionView.dataSource=self;
collectionView.delegate=self;
[self.viewaddSubview:collectionView];
[collectionViewrelease];
[flowLayoutrelease];
collectionView.backgroundColor= [UIColorcolorWithRed:0.895green:1.000blue:0.656alpha:1.000];
// 4.注冊cell的類型和重用標(biāo)示符
[collectionViewregisterClass:[MyCellclass]forCellWithReuseIdentifier:@"cell"];
// 5.注冊footer和header類型的重用標(biāo)識符
[collectionViewregisterClass:[MyHeaderclass]forSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:@"headerView"];
[collectionViewregisterClass:[MyFooterclass]forSupplementaryViewOfKind:UICollectionElementKindSectionFooter
withReuseIdentifier:@"footerView"];
}
#pragma mark - UICollectionViewDataSource Methods
#pragma mark 設(shè)置有多少個section
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView
{
return5;
}
#pragma mark 設(shè)置某個分組有多少行
- (NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:(NSInteger)section
{
return13;
}
#pragma mark 設(shè)置某個Item顯示什么內(nèi)容
- (UICollectionViewCell*)collectionView:(UICollectionView*)collectionView cellForItemAtIndexPath:(NSIndexPath*)indexPath
{
// 1.去重用隊列中查找
MyCell*cell = [collectionViewdequeueReusableCellWithReuseIdentifier:@"cell"forIndexPath:indexPath];
// 2.使用
//CGFloat red = arc4random()% 256 / 255.0;
//CGFloat green = arc4random() % 256 / 255.0;
//CGFloat blue = arc4random() % 256 / 255.0;
//cell.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
cell.label.text= [NSStringstringWithFormat:@"s = %ld r =%ld", indexPath.section, indexPath.row];
// 3.獲取將要顯示的模型
Model*model =_allDataArray[indexPath.row];
// 4.使用第三方獲取圖片并自動緩存
NSURL*imageUrl = [NSURLURLWithString:model.thumbURL];
[cell.imageViewsd_setImageWithURL:imageUrlplaceholderImage:[UIImageimageNamed:@"default_head_image@2x.png"]];
returncell;
}
#pragma mark 處理點擊事件
- (void)collectionView:(UICollectionView*)collectionView didSelectItemAtIndexPath:(NSIndexPath*)indexPath
{
NSLog(@"我被點擊了");
}
#pragma mark - UICollectionViewDelegateFlowLayout Method
#pragma mark 設(shè)置item的大小
- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*)indexPath
{
returnCGSizeMake(90,120);
}
#pragma mark 設(shè)置footer和header
- (UICollectionReusableView*)collectionView:(UICollectionView*)collectionView viewForSupplementaryElementOfKind:(NSString*)kind atIndexPath:(NSIndexPath*)indexPath
{
if(kind ==UICollectionElementKindSectionHeader) {
// 去重用隊列取可用的header
MyHeader*reusableView = [collectionViewdequeueReusableSupplementaryViewOfKind:kindwithReuseIdentifier:@"headerView"forIndexPath:indexPath];
// 使用
reusableView.headerImage.image= [UIImageimageNamed:@"屏幕快照 2014-0 9.30.50 9-11 上午.png"];
// 返回
returnreusableView;
}else{
// 去重用隊列取可用的footer
MyFooter*reusableView = [collectionViewdequeueReusableSupplementaryViewOfKind:kindwithReuseIdentifier:@"footerView"forIndexPath:indexPath];
// 使用
reusableView.backgroundColor= [UIColorredColor];
// 返回
returnreusableView;
}
}
#pragma mark 設(shè)置header和footer高度
- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
returnCGSizeMake(self.view.bounds.size.width,70);
}
- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
returnCGSizeMake(self.view.bounds.size.width,70);
}
- (void)didReceiveMemoryWarning
{
[superdidReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)dealloc
{
[_allDataArrayrelease];
[superdealloc];
}
@end
總結(jié)：
集合視圖UICollectionView和表示圖UITableView很相似，可根據(jù)layout屬性設(shè)置，顯示單元格集合內(nèi)容
UICollectionViewDataSource類作為集合視圖的數(shù)據(jù)源，向集合視圖提供數(shù)據(jù)。集合視圖依賴于委托（Delegate）中定義的方法對用戶進(jìn)行響應(yīng)
