模仿QQ联系人界面的折叠tableView

效果图

screenshot.gif

原理

每个分组是一个UITableViewHeaderFooterView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@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

每个分组有一个数据层viewModel

1
2
3
4
5
6
7
8
9
10
@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存储当前分组的联系人数据

每个联系人是一个UITableViewCell

1
2
3
4
5
6
7
8
9
10
11
12
13
@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

每个联系人有一个数据层cellModel

1
2
3
4
5
6
7
8
@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的方法里面简单的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- (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

UIKit
模仿QQ联系人界面的折叠tableView
http://example.com/2016/11/21/模仿QQ联系人界面的折叠tableView/
作者
guanzhendong
发布于
2016年11月21日
许可协议