UICollectionView
UICollection的实现和UITableView不一样的地方在于Item的布局，需要用UICollectionViewLayout类来描绘视图的布局。我们常用uICollectionViewFlowLayout，也可以自定义UICollectionViewLayout。
创建UICollectionViewFlowLayout
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.itemSize = CGSizeMake(100, 100);// 设置每个item的大小
flowLayout.minimumInteritemSpacing = 10;// 设置每个item的最小列间距(默认是10)
flowLayout.minimumLineSpacing = 10;// 设置每个item的最小列间距(默认是10)
flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);// 设置分区间隔(上，下，左，右)
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;// 设置UICollectionView的滚动方向
flowLayout.headerReferenceSize = CGSizeMake(100, 100);// 设置每个分区头部视图的大小
flowLayout.footerReferenceSize = CGSizeMake(100, 100);// 设置每个分区尾部视图的大小
初始化UICollectionView
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
collectionView.backgroundColor = [UIColor whiteColor];
设置代理
- UICollectionViewDalaSouce
- UICollectionViewDelegate
首先要遵守代理协议
然后指定代理
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"];
必须实现的代理方法
// 返回每个分区的cell个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 30;
}
// 创建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;
}
可以实现的方法
// 返回分区的个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
// 当cell被选中
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"被选中");
}
// 创建头部视图和尾部视图
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
// 需要判断是头部视图还是尾部视图
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
// 获取头部视图
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];
// 设置头部视图
headerView.backgroundColor = [UIColor blackColor];
// 返回头部视图
return headerView;
} else {
// 获取尾部视图
UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView" forIndexPath:indexPath];
// 设置尾部视图
footerView.backgroundColor = [UIColor grayColor];
// 返回尾部视图
return footerView;
}
}
布局协议
首先要遵守UICollectionViewDelegateFlowLayout协议
/**
* 对UICollectionViewDelegate的扩展
*/
// 返回item大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
}
// 设置分区间隔(上，下，左，右)
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
}
// 设置最小行间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
}
// 设置最小列间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
}
// 设置头部视图大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
}
// 设置尾部视图大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {
}