先來看一張效果圖
需求分析
做一個(gè)商品分類展示印衔，有三級(jí)列表啡捶，要求第一級(jí)列表能展開，顯示二三級(jí)列表奸焙，同時(shí)就還能收起瞎暑。每展開一級(jí)列表，要滾到頂部与帆。（默認(rèn)展開第一個(gè)一級(jí)列表）
實(shí)現(xiàn)
一級(jí)分類使用TableView的viewForHeader展示
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
FoldingSectionHeader *sectionHeaderView = [[FoldingSectionHeader alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, [self tableView:self heightForHeaderInSection:section]) withTag:section];
[sectionHeaderView setupWithBackgroundColor:[UIColor whiteColor]
titleString:[self titleForSection:section]
titleColor:[UIColor darkTextColor]
titleFont:[UIFont systemFontOfSize:14]
headerImage:[self imageForSection:section]];
sectionHeaderView.tapDelegate = self;
return sectionHeaderView;
}
同時(shí)實(shí)現(xiàn)viewForHeader點(diǎn)擊事件
#pragma mark - FoldingSectionHeaderDelegate
-(void)foldingSectionHeaderTappedAtIndex:(NSInteger)index
{
NSNumber *section = [NSNumber numberWithInteger:index];
if ([_multopenSectionArray containsObject:section]) {
NSArray *deleteArray = [self buildEditRowsWithSection:index];
[_multopenSectionArray removeObject:section];
[self deleteRowsAtIndexPaths:deleteArray withRowAnimation:UITableViewRowAnimationTop];
} else {
[[_multopenSectionArray copy] enumerateObjectsUsingBlock:^(NSNumber *obj, NSUInteger idx, BOOL * _Nonnull stop) {
NSArray *otherDeleteArray = [self buildEditRowsWithSection:[obj integerValue]];
[_multopenSectionArray removeObject:obj];
[self deleteRowsAtIndexPaths:otherDeleteArray withRowAnimation:UITableViewRowAnimationTop];
}];
[_multopenSectionArray addObject:section];
NSArray *insertArray = [self buildEditRowsWithSection:index];
[self insertRowsAtIndexPaths:insertArray withRowAnimation:UITableViewRowAnimationTop];
if (_foldingDelegate && [_foldingDelegate respondsToSelector:@selector(foldingTableView:scrollForHeaderInSection:)]) {
[_foldingDelegate foldingTableView:self scrollForHeaderInSection:index];
}
}
}
- 注意
deleteRowsAtIndexPaths是UITableView中移除表試圖中具體某行的API了赌，如果你對(duì)UITableView的機(jī)制不是很了解的話，直接調(diào)用該函數(shù)很可能會(huì)導(dǎo)致XCode拋出異常玄糟。本人就遇到了勿她。后來在斷點(diǎn)跟蹤這個(gè)API時(shí)發(fā)現(xiàn)，IOS在調(diào)用deleteRowsAtIndexPaths之后又重新調(diào)用了tableView:numberOfRowsInSection阵翎。要記住逢并，在deleteRowsAtIndexPaths之后要更新數(shù)據(jù)源。
三級(jí)列表一行需要展示多個(gè)數(shù)據(jù)郭卫，選擇CollectionView就比較合適了砍聊。所以，TableView的每一個(gè)cell上面放一個(gè)CollectionView贰军，二級(jí)分類展示在CollectionView的UICollectionElementKindSectionHeader上面
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
if (kind == UICollectionElementKindSectionHeader) {
CategoryItemHeaderCell *cell = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:CategoryItemHeaderCellIdentifier forIndexPath:indexPath];
cell.headerTitle = self.model.name;
return cell;
}
return nil;
}
三級(jí)分類展示在CollectionView的每一個(gè)item上
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CategoryItemCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CategoryItemCellIdentifier forIndexPath:indexPath];
ThirdCateforyModel *thirdModel = self.model.array[indexPath.item];
cell.model = thirdModel;
return cell;
}
- 注意
在TableView的自定義cell里面要調(diào)用下面的方法玻蝌，否則三級(jí)分類會(huì)不顯示
- (void)layoutSubviews
{
[super layoutSubviews];
[itemCollectionView setFrame:CGRectMake(0, 0, kScreenWidth, self.frame.size.height)];
}
