UICollectionView
UICollection的實現(xiàn)和UITableView不一樣的地方在于Item的布局，需要用UICollectionViewLayout類來描繪視圖的布局。我們常用uICollectionViewFlowLayout噪窘，也可以自定義UICollectionViewLayout佩谣。
創(chuàng)建UICollectionViewFlowLayout
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.itemSize = CGSizeMake(100, 100);// 設(shè)置每個item的大小
flowLayout.minimumInteritemSpacing = 10;// 設(shè)置每個item的最小列間距(默認是10)
flowLayout.minimumLineSpacing = 10;// 設(shè)置每個item的最小列間距(默認是10)
flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);// 設(shè)置分區(qū)間隔(上监憎，下，左运吓，右)
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;// 設(shè)置UICollectionView的滾動方向
flowLayout.headerReferenceSize = CGSizeMake(100, 100);// 設(shè)置每個分區(qū)頭部視圖的大小
flowLayout.footerReferenceSize = CGSizeMake(100, 100);// 設(shè)置每個分區(qū)尾部視圖的大小
初始化UICollectionView
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
collectionView.backgroundColor = [UIColor whiteColor];
設(shè)置代理
- UICollectionViewDalaSouce
- UICollectionViewDelegate
首先要遵守代理協(xié)議
然后指定代理
collectionView.dataSource = self;
collectionView.delegate = self;
注冊Cell唾琼、頭部視圖兄春、尾部視圖
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"reuse"];
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];
必須實現(xiàn)的代理方法
// 返回每個分區(qū)的cell個數(shù)
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 30;
}
// 創(chuàng)建item視圖對象
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuse" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:random() % 256 / 255.0 green:random() % 256 / 255.0 blue:random() % 256 / 255.0 alpha:random() % 256 / 255.0];
return cell;
}
可以實現(xiàn)的方法
// 返回分區(qū)的個數(shù)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
// 當cell被選中
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"被選中");
}
// 創(chuàng)建頭部視圖和尾部視圖
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
// 需要判斷是頭部視圖還是尾部視圖
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
// 獲取頭部視圖
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];
// 設(shè)置頭部視圖
headerView.backgroundColor = [UIColor blackColor];
// 返回頭部視圖
return headerView;
} else {
// 獲取尾部視圖
UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView" forIndexPath:indexPath];
// 設(shè)置尾部視圖
footerView.backgroundColor = [UIColor grayColor];
// 返回尾部視圖
return footerView;
}
}
布局協(xié)議
首先要遵守UICollectionViewDelegateFlowLayout協(xié)議
/**
* 對UICollectionViewDelegate的擴展
*/
// 返回item大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
}
// 設(shè)置分區(qū)間隔(上，下父叙，左神郊，右)
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
}
// 設(shè)置最小行間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
}
// 設(shè)置最小列間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
}
// 設(shè)置頭部視圖大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
}
// 設(shè)置尾部視圖大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {
}