最近写了个点击collectionCell展开View的效果，在此记录下。
文末附上了demo地址
demo效果如下：
demo效果.gif
主要思路
其实思路很简单，首先根据UI确定每一行有几个cell，然后按行数将数据分成相应的区数，再添加区尾，点击的时候根据点击的cell的选中状态来显示相应的cell的展开视图。是不是很简单？
主要代码
数据源返回的行数和每行的个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
//如果数据源能整除, 就返回正常结果,也就是行数
if (self.dataSource.count % kItem_Number == 0) {
return self.dataSource.count / kItem_Number;
}
//如果数据源不能整除就在结果上加1, 例如25个数据, 每行3个, 则需要25 / 3 + 1行
return self.dataSource.count / kItem_Number + 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
//如果数组中有元素的时候走下面方法
if (self.dataSource.count > 0) {
//找到最后一个分区
if (section == self.dataSource.count / kItem_Number) {
//如果能被每行的个数整除
if (self.dataSource.count % kItem_Number == 0) {
//返回每行的个数
return kItem_Number;
}
//不然返回元素个数对每行个数的取余数
return self.dataSource.count % kItem_Number;
}
//其他情况返回正常的个数
return kItem_Number;
}
return 0;
}
设置cell和footer
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
SRRCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectionCellID" forIndexPath:indexPath];
//数据源数组可以根据 indexPath.row + indexPath.section * kItem_Number 来取值
cell.textLB.text = [NSString stringWithFormat:@"%ld",indexPath.row + indexPath.section * kItem_Number];
return cell;
}
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
if (kind == UICollectionElementKindSectionHeader) {
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HomeViewCollectionViewHeader" forIndexPath:indexPath];
return headerView;
}else if (kind == UICollectionElementKindSectionFooter) {
// 底部试图
SRRCollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"HomeViewCollectionViewFooter" forIndexPath:indexPath];
footerView.backgroundColor = kViewBgColor;
if (self.isSelect) {
if (self.selectIndex.row == 0) {
footerView.bgImgV.image = [UIImage imageNamed:@"bottomBgLeftImg_LLHouse"];
}else if(self.selectIndex.row == 1) {
footerView.bgImgV.image = [UIImage imageNamed:@"bottomBgImg_LLHouse"];
}else{
footerView.bgImgV.image = [UIImage imageNamed:@"bottomBgRightImg_LLHouse"];
}
}
[self footerBtnClickActionWithFooterView:footerView];
// footerView.clipsToBounds = YES;
[footerView setLabelTextWithDays:@"10"];
return footerView;
}else {
return nil;
}
点击Cell
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
self.selectIndex = indexPath;
[self JudgeSelected:indexPath];
[self.collection reloadData];
}
#pragma mark - UICollectionViewDelegate 选中执行
- (void)JudgeSelected:(NSIndexPath *)indexPath
{
//始终保持数组中只有一个元素或则无元素
if (self.sectionAry.count > 1)
{
[self.sectionAry removeObjectAtIndex:0];
}
//如果这此点击的元素存在于数组中则状态置为NO,并将此元素移除数组
/*
这里之所以置为NO的时候把元素移除是因为, 如果不移除, 下次点击的时候代码走到这里里面还是有一个元素, 而且是上次的元素, 不会走else的代码
*/
if ([self.sectionAry containsObject:indexPath])
{
self.isSelect = NO;
[self.sectionAry removeObject:indexPath];
}else{
//当数组为空的时候或者点击的非上次元素的时候走这里
self.isSelect = YES;
[self.sectionAry addObject:indexPath];
}
}
设置区尾高度
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
if (self.sectionAry.count == 0 || self.isSelect == NO) {
return CGSizeMake(0, 0);
}
if (section == self.selectIndex.section) {
return CGSizeMake(kScreenWidth, 0.15*kScreenWidth+60);
}else{
return CGSizeMake(0, 0);
}
}
以上就是主要代码了。
demo地址
