主要思路

其实思路很简单，首先根据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地址