效果圖

screenshot.gif

原理

每個(gè)分組是一個(gè)UITableViewHeaderFooterView

@class FoldedTableViewHeaderFooterViewModel;

typedef void(^DidSelectBlock)(BOOL isExpanded);

@interface FoldedTableViewHeaderFooterView : UITableViewHeaderFooterView

@property (nonatomic, strong) UIImageView *arrowImageView;
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UILabel *numberLabel;
@property (nonatomic, strong) UIView *topLineView;
@property (nonatomic, strong) UIView *bottomLineView;

- (void)setupWithModel:(FoldedTableViewHeaderFooterViewModel *)model
               section:(NSInteger)section
        didSelectBlock:(DidSelectBlock)block;

@end

每個(gè)分組有一個(gè)數(shù)據(jù)層viewModel

@class FoldedTableViewCellModel;

@interface FoldedTableViewHeaderFooterViewModel : NSObject

@property (nonatomic, assign, getter=isExpanded) BOOL expanded;///< 是否展開
@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *number;
@property (nonatomic, strong) NSArray<FoldedTableViewCellModel *> *cellModelArray;

@end

expanded判斷分組是否展開，cellModelArray存儲(chǔ)當(dāng)前分組的聯(lián)系人數(shù)據(jù)

每個(gè)聯(lián)系人是一個(gè)UITableViewCell

@class FoldedTableViewCellModel;

@interface FoldedTableViewCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UIImageView *leftImageView;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (weak, nonatomic) IBOutlet UILabel *contentLabel;
@property (weak, nonatomic) IBOutlet UIView *bottomLineView;
@property (nonatomic, strong) CALayer *imageViewMaskLayer;///< 離線頭像蒙版

- (void)setupWithModel:(FoldedTableViewCellModel *)model;

@end

每個(gè)聯(lián)系人有一個(gè)數(shù)據(jù)層cellModel

@interface FoldedTableViewCellModel : NSObject

@property (nonatomic, copy) NSString *imageName;
@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *content;
@property (nonatomic, assign, getter=isOnline) BOOL online;///< 是否在線

@end

然后在tableView的方法里面簡單的設(shè)置

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return self.sectionData.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    FoldedTableViewHeaderFooterViewModel *model = self.sectionData[section];
    return model.isExpanded ? model.cellModelArray.count : 0;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    FoldedTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"FoldedTableViewCell" forIndexPath:indexPath];
    FoldedTableViewHeaderFooterViewModel *viewModel = self.sectionData[indexPath.section];
    FoldedTableViewCellModel *cellModel = viewModel.cellModelArray[indexPath.row];
    [cell setupWithModel:cellModel];
    if (indexPath.row == viewModel.cellModelArray.count - 1) {
        cell.bottomLineView.hidden = YES;
    }else {
        cell.bottomLineView.hidden = NO;
    }
    return cell;
}

Demo

https://github.com/guanzhendong/FoldedTableView