UICollectionView
先方一波效果圖
- UICollectionLayout
UICollectionLayout布局類能扒,是一個抽象的類,用來管理item的大小和位置等布局信息操禀。
UICollectionFlowLayout是UICollectionLayout子類,系統(tǒng)提供給我們封裝好的基礎瀑布流的布局類
代碼部分??
/** 創(chuàng)建布局類對象*/
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
/** 設置item的大小 默認值:(50, 50)*/
flowLayout.itemSize = CGSizeMake(100, 100);
/** 設置滾動方向*/
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
/** 設置頭部視圖的大小*/
flowLayout.headerReferenceSize = CGSizeMake(100, 50);
/** 設置尾部視圖的大小*/
flowLayout.footerReferenceSize = CGSizeMake(200, 100);
/** 設置兩列之間間距的最小值*/
// flowLayout.minimumInteritemSpacing = 100;
/** 設置兩行之間間距的最小值*/
flowLayout.minimumLineSpacing = 50;
flowLayout.sectionInset = UIEdgeInsetsMake(20, 50, 50, 100);
// 先寫這個在寫UICollectionFlowLayout你就懂了??
// collectionView初始化方法的第二個參數(shù)就是上面說的布局類對象??
/** 根據(jù)布局類對象蝌箍,創(chuàng)建conllectionView.*/
UICollectionView *girlCollectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
[self.view addSubview:girlCollectionView];
[flowLayout release];
[girlCollectionView release];
girlCollectionView.backgroundColor = [UIColor whiteColor];
//跟特么tableView的協(xié)議長得差不多??
//長這樣:<UICollectionViewDataSource, UICollectionViewDelegate>族吻。。姐浮。??
/** 指定代理人*/
girlCollectionView.delegate = self;
girlCollectionView.dataSource = self;
/** 注冊collectionView cell 的重用池*/
[girlCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
/** 注冊collectionView 頭視圖的重用池*/
[girlCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
/** 注冊collectionView 尾部視圖的重用池*/
[girlCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
以上就是創(chuàng)建UICollectionView的代碼??看著好像很多其實頭部跟尾部的重用池并不常用主要還是協(xié)議代理人不要忘了谷遂,以及一些布局類對象UICollectionFlowLayout的一些屬性,下面是協(xié)議方法卖鲤,協(xié)議方法也跟UITableView差不多肾扰,他倆共同繼承于UIScrollView類,很多人誤認為UICollectionView是UITabelView的兒子蛋逾,其實他是UIScrollView的兒子集晚,而UICollectionView和UITableView是兄妹關系,亂区匣。甩恼。。沉颂。關系
下面是協(xié)議方法的代碼部分??????
- 首先是UICollectionViewDataSource的協(xié)議方法,他有兩個必須實現(xiàn)的"賣身契"
返回每個分區(qū)item的個數(shù)
/** 必須實現(xiàn)的兩個協(xié)議方法*/
/** 返回item的個數(shù)*/
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 50;
}
返回cell說白了就是給每個cell里邊加東西用的??
/** 返回cell*/
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor colorWithRed:arc4random() % 265 / 255.0 green:arc4random() % 265 / 255.0 blue:arc4random() % 265 / 255.0 alpha:0.5];
return cell;
}
- 非必須實現(xiàn)的賣身契??
返回分區(qū)數(shù)
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 5;
}
返回頭部視圖或者尾部視圖
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
if (kind == UICollectionElementKindSectionHeader) {
/** 從重用池當中取出頭部視圖*/
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
headerView.backgroundColor = [UIColor redColor];
return headerView;
} else {
UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath];
footerView.backgroundColor = [UIColor orangeColor];
return footerView;
}
}
- 還有個UICollectionViewDelegate協(xié)議方法??
就是item塊的點擊方法
/** 點擊item的協(xié)議方法*/
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"item: %ld", indexPath.row);
}
這一塊的方法就很重要了?? 他可以實現(xiàn)很多東西比如頁面跳轉是做項目是常用的方法
就像介個樣子??點一個電影進去就會進入詳情界面
OK,CollectionView就這么些東西了T梦邸V搿烧颖!