基本
调用协议:<UICollectionViewDataSource,UICollectionViewDelegate>
//特点一:创建CollectionView之前,先要创建CollectionView中的布局
UICollectionViewFlowLayout* layOut = [[UICollectionViewFlowLayout alloc]init];
//指定每个方格的尺寸
layOut.itemSize =CGSizeMake(self.view.bounds.size.width \/ 2 - 20, 150);
//指定每个方格的边距上、左、下、右
`layOut.sectionInset =UIEdgeInsetsMake(10, 10, 10, 10);`
//横向item最小间距,默认为0
layOut.minimumInteritemSpacing= 0;
//设置纵向item最小间距
//layOut.minimumLineSpacing = 5;
//更改CollectionView的滚定方向
//layOut.scrollDirection = UICollectionViewScrollDirectionHorizontal;
//如果CollectionView需要头尾视图,必须在layOut中指定头尾视图对应的尺寸(不指定默认0,0)
layOut.headerReferenceSize= CGSizeMake(320, 100);
UICollectionView *myCollectionView = [[UICollectionView alloc]initWithFrame:self.view.boundscollectionViewLayout:layOut];
//特点四:在使用collenctionView的时候,切记将collenctionView的背景颜色清空,默认为透明,不清空则会变成黑色
myCollectionView.backgroundColor= [UIColor clearColor];
//在创建collenctionView的同时就要指定当前collenctionView中要使用的cell
[myCollectionView registerClass:[CustomCollectionViewCellclass] forCellWithReuseIdentifier:collenctionID];
//特点五:CollectionView的头尾视图
[myCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView"];//重用标识随便写
myCollectionView.delegate= self;
myCollectionView.dataSource= self;
[self.viewaddSubview:myCollectionView];
协议方法:
-(NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:(NSInteger)section {
return 24;
}
-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionViewcellForItemAtIndexPath:(NSIndexPath *)indexPath {
//特点二:重用
CustomCollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:collenctionIDforIndexPath:indexPath];
cell.backgroundColor =[UIColor redColor];
//如果不用CustomCollectionViewCell进行创建,则要用for的方式进行移除,方法同UITableView,不然会黑(重复创建)
//特点三:collenctionView的cell只有contentView
UILabel * label =[[UILabel alloc]initWithFrame:CGRectMake(0, 30, 100, 30)];
label.text =@"Cell";
[cell.contentViewaddSubview:label];
return cell;
}
//负责添加CollectionView的头尾视图
-(UICollectionReusableView*)collectionView:(UICollectionView *)collectionViewviewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath*)indexPath {
UICollectionReusableView* RView = nil;
if ([kindisEqualToString:UICollectionElementKindSectionHeader]) {
//定制头视图
RView =[collectionViewdequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:@"HeaderView" forIndexPath:indexPath];
UIView * view =[[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 100)];
view.backgroundColor =[UIColor greenColor];
[RViewaddSubview:view];
} else {
//尾视图
}
return RView;
}
-(void)collectionView:(UICollectionView*)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"%ld",indexPath.item);
}
CustomCollectionViewCell中的内容:
-(id)initWithFrame:(CGRect)frame {
if (self = [superinitWithFrame:frame]) {
self.backgroundColor =[UIColor orangeColor];
}
return self;
}
常用方法
出现问题
当设置collectionView横向时,item大小一致或不一致时会出现问题
代码:
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
// layout.itemSize = CGSizeMake(66 * LHQScaleX, 62);
layout.sectionInset = UIEdgeInsetsMake(0, 15 * LHQScaleX, 0, 0);
//最小item间间距
layout.minimumInteritemSpacing = 30;
// 设置最小行间距
layout.minimumLineSpacing = 30;
//设置方向为横向
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
- layout.itemSize在
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
里根据类型设置对应大小,此处不设置 - 当item大小一致时会出现,因为设置了方向为横向,系统默认将相邻item的间距判断为既是行间距又是列间距,此时如果不同时设置最小行间距
minimumLineSpacing
,则其大小会根据最小行间距默认大小(10)展示。也即如果方向为横向UICollectionViewScrollDirectionHorizontal
时,minimumInteritemSpacing
和minimumLineSpacing
都要设置一样的数值 - 当我们手动设置
layout.itemSize
,使其有尺寸不一致的item存在时无需考虑此问题,可能系统在此处判断所有item不在同一列,而只是在同一行 - 该问题为iOS本身bug
网友评论