【iOS】UITableView中section的展开和收起

我们在做项目时,经常遇到UITableView需要展开与收起的情况,类似手机QQ的折叠,而且根据数据的不同判断有多少行需要展开与收起.之前做项目的时候也使用过，最近有时间整理，就把之前是怎么操作的记录下来。

首先,我们先说下思路:

思路：在写代码的时候我们可以很容易的写出cell和setion。但是系统并没有提供记录section状态的方法或是属性。我们需要点击某个section的时候收起和弹出cell。怎么做呢？只有是人为的给section增加一个标记了，每个section一个标记，section被点击了就把这个状态标记取反，根据这个标记来展开和收起cell

其中,设置方式又分为两种:

第一种:

设置cell的高度，高度为0了cell就收起了，高度大于0了cell就弹出

下面就直接贴代码了。

ViewController.m

#import "ViewController.h"
#import "SectionViewController.h"

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
@property (nonatomic,strong)UITableView *tableView;

@property (nonatomic,strong)NSMutableArray *sectionArray;
@property (nonatomic,strong)NSMutableArray *flagArray;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
[self makeData];
_tableView = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStyleGrouped];
_tableView.delegate = self;
_tableView.dataSource = self;
[self.view addSubview:_tableView];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

/**
*  处理数据  _sectionArray里面存储数组
*/
- (void)makeData{
_sectionArray = [NSMutableArray array];
_flagArray  = [NSMutableArray array];
NSInteger num = 6;
for (int i = 0; i < num; i ++) {
NSMutableArray *rowArray = [NSMutableArray array];
for (int j = 0; j < arc4random()%20 + 1; j ++) {
[rowArray addObject:[NSString stringWithFormat:@"%d",j]];
}
[_sectionArray addObject:rowArray];
[_flagArray addObject:@"0"];
}
}
//设置组数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return _sectionArray.count;
}
//设置行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
NSArray *arr = _sectionArray[section];
return arr.count;
}
//组头高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 44;
}
//cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
if ([_flagArray[indexPath.section] isEqualToString:@"0"])
return 0;
else
return 44;
}
//组头
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UILabel *sectionLabel = [[UILabel alloc] init];
sectionLabel.frame = CGRectMake(0, 0, self.view.frame.size.width, 444);
sectionLabel.textColor = [UIColor orangeColor];
sectionLabel.text = [NSString stringWithFormat:@"组%d",section];
sectionLabel.textAlignment = NSTextAlignmentCenter;
sectionLabel.tag = 100 + section;
sectionLabel.userInteractionEnabled = YES;
sectionLabel.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"itembg.png"]];

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(sectionClick:)];
[sectionLabel addGestureRecognizer:tap];

return sectionLabel;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identify = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identify];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identify];
}
cell.textLabel.text= [NSString stringWithFormat:@"第%d组的第%d个cell",indexPath.section,indexPath.row];
cell.clipsToBounds = YES;//这句话很重要,防止cell覆盖显示
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
SectionViewController *sVC = [[SectionViewController alloc] init];
sVC.rowLabelText = [NSString stringWithFormat:@"第%d组的第%d个cell",indexPath.section,indexPath.row];
[self presentViewController:sVC animated:YES completion:nil];
}
- (void)sectionClick:(UITapGestureRecognizer *)tap{
int index = tap.view.tag % 100;

NSMutableArray *indexArray = [[NSMutableArray alloc]init];
NSArray *arr = _sectionArray[index];
for (int i = 0; i < arr.count; i ++) {
NSIndexPath *path = [NSIndexPath indexPathForRow:i inSection:index];
[indexArray addObject:path];
}
//展开
if ([_flagArray[index] isEqualToString:@"0"]) {
_flagArray[index] = @"1";
[_tableView reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationBottom];  //使用下面注释的方法就 注释掉这一句
} else { //收起
_flagArray[index] = @"0";
[_tableView reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationTop]; //使用下面注释的方法就 注释掉这一句
}
//另一种刷新方式
//  NSRange range = NSMakeRange(index, 1);
//  NSIndexSet *sectionToReload = [NSIndexSet indexSetWithIndexesInRange:range];
//  [_tableView reloadSections:sectionToReload withRowAnimation:UITableViewRowAnimationAutomatic];
}
@end

附上代码的下载地址：Demo地址

第二种:

设置section数组的个数，数组个数为0了cell就收起了，数组个数大于0了cell就弹出

demo:

附上主要代码片段,仅提供思路参考:

1.设置数据源:

//设置属性
@property(nonatomic, strong) NSMutableArray* listArray;/**< 数组 */
@property(nonatomic, strong) NSMutableDictionary* foldInfoDic;/**< 存储开关字典 */

@property(nonatomic, strong) NSDictionary *topDic;
@property(nonatomic, strong) NSDictionary *orderDic;
@property(nonatomic, strong) NSDictionary *userDic;
@property(nonatomic, strong) NSDictionary *accountDic;
@property(nonatomic, strong) NSDictionary *paymentDic;
@property(nonatomic, strong) NSDictionary *bootomDic;

#pragma marl ---load lazing

-(NSDictionary *)topDic
{
if (!_topDic) {
_topDic = @{@"title":@"",@"data":@[@""]};
}
return _topDic;

}

-(NSDictionary *)orderDic
{
if (!_orderDic) {
_orderDic = @{@"title":@"订单信息",@"data":@[@"订单信息",@"收益",@"交易类型",@"支付币种",@"汇率",@"备注"]};
}
return _orderDic;

}
-(NSDictionary *)userDic{
if (!_userDic) {
_userDic = @{@"title":@"用户信息",@"data":@[@"用户名",@"联系方式"]};
}
return _userDic;
}
-(NSDictionary *)accountDic
{
if (!_accountDic) {
_accountDic = @{@"title":@"收款账户信息",@"data":@[@"联系方式",@"开户银行",@"开户名"]};
}
return _accountDic;
}
-(NSDictionary *)paymentDic
{

if (!_paymentDic) {
_paymentDic = @{@"title":@"汇款凭证",@"data":@[@""]};
}
return _paymentDic;
}
-(NSDictionary *)bootomDic
{
if (!_bootomDic) {
_bootomDic = @{@"title":@"",@"data":@[@"订单编号",@"下单时间"]};
}
return _bootomDic;

}
-(NSMutableArray *)listArray
{
if (!_listArray) {
_listArray = [NSMutableArray array];
}
return _listArray;

}
-(NSMutableDictionary *)foldInfoDic
{
if (!_foldInfoDic) {
_foldInfoDic = [NSMutableDictionary dictionary];
}
return _foldInfoDic;

}

2.根据需要加载需要的数据源,并设置记录是否展开的section对应de字典

[self.listArray addObject:self.topDic];
[self.listArray addObject:self.orderDic];
[self.listArray addObject:self.userDic];
[self.listArray addObject:self.accountDic];
//根据项目需要判断需要添加哪些section数据
if (self.orderType == FinancierAcceptarbitrateType || self.orderType == FinancierAcceptFinishType) {
[self.listArray addObject:self.paymentDic];
}else{
if (self.orderType == FinancierAcceptTradingType) {

}
}

[self.listArray addObject:self.bootomDic];
//设置section属性
for (int i=0; i<self.listArray.count; i++) {
NSDictionary *dic = self.listArray[i];
NSString *key = [NSString stringWithFormat:@"%d",i];
[self.foldInfoDic setObject:@"1" forKey:key];
}

设置tableView:
#pragma mark --- UITableViewDataSource and UITableViewDelegate Methods
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{

return self.listArray.count;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

NSDictionary *dic = self.listArray[section];
NSArray *cellArray = [NSArray arrayWithArray:dic[@"data"]];

NSString *key = [NSString stringWithFormat:@"%d",(int)section];
BOOL folded = [[self.foldInfoDic objectForKey:key] boolValue];
if (folded) {
return cellArray.count;
}else{
return 0;
}
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

if (indexPath.section == 0 ) {
static NSString *CellIdentifier = @"FinancierAcceptDetailTopCell";
FinancierAcceptDetailTopCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[FinancierAcceptDetailTopCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
}
cell.orderType = self.orderType;

// cell.delegate = self;
cell.layer.masksToBounds = YES;

return cell;
}else{
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
cell.textLabel.textColor = [UIColor grayColor];
cell.textLabel.font = [UIFont systemFontOfSize:15];
cell.detailTextLabel.textColor = [UIColor blackColor];
cell.detailTextLabel.font = [UIFont systemFontOfSize:15];
}

//清界面--
for (UIView *view in cell.subviews) {
if ([view isKindOfClass:[UIImageView class]]) {
[view removeFromSuperview];
}
if ([view isKindOfClass:[UILabel class]]) {
[view removeFromSuperview];
}
}

NSDictionary *dic = self.listArray[indexPath.section];
NSArray *cellArray = [NSArray arrayWithArray:dic[@"data"]];
NSString *title = [NSString stringWithFormat:@"%@",dic[@"title"]];
if ([title isEqualToString:@"汇款凭证"]) {

cell.textLabel.text = @"";
cell.detailTextLabel.text = @"";
_paymentImg = [[UIImageView alloc] initWithFrame:CGRectMake((mainWidth-255)/2, 15, 255, 160)];
[cell addSubview:_paymentImg];
//判断下imgView
_paymentImg.image = [UIImage imageNamed:@"A5_2_payment"];

}else{
cell.textLabel.text = cellArray[indexPath.row];
cell.detailTextLabel.text = [NSString stringWithFormat:@"test%ld-%ld",indexPath.section,indexPath.row];
}
cell.layer.masksToBounds = YES;
return cell;
}
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
if (indexPath.section == 0) {
if (self.orderType ==FinancierAcceptTradingType ||self.orderType ==FinancierAcceptCancelType) {
return 140;
}
return 104;
}
NSDictionary *dic = self.listArray[indexPath.section];
NSString *title = [NSString stringWithFormat:@"%@",dic[@"title"]];
if ([title isEqualToString:@"汇款凭证"]) {
return 190;
}

return 44;
}
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[tableView deselectRowAtIndexPath:indexPath animated:YES];

}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
if (section == 0) {
return 0.01;
}else if (section == self.listArray.count-1)
{
return 0.01;
}
return 44;

}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
return 10;
}
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{

if (section == 0 || (section == self.listArray.count-1)) {
UIView *view = [[UIView alloc] init];
return view;
}else{
FinancierHeaderView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"header"];
if (!headerView) {
headerView = [[FinancierHeaderView alloc] initWithReuseIdentifier:@"header"];
}
NSDictionary *dic = self.listArray[section];
NSString *title = [NSString stringWithFormat:@"%@",dic[@"title"]];
[headerView setFoldSectionHeaderViewWithTitle:title section:section canFold:YES];
headerView.delegate = self;
NSString *key = [NSString stringWithFormat:@"%d", (int)section];
BOOL folded = [[_foldInfoDic objectForKey:key] boolValue];
headerView.fold = folded;
return headerView;
}

}
- (void)foldHeaderInSection:(NSInteger)SectionHeader {
NSString *key = [NSString stringWithFormat:@"%d",(int)SectionHeader];
BOOL folded = [[_foldInfoDic objectForKey:key] boolValue];
NSString *fold = folded ? @"0" : @"1";
[self.foldInfoDic setObject:fold forKey:key];
// NSMutableIndexSet *set = [[NSMutableIndexSet alloc] initWithIndex:SectionHeader];
// [_tableView reloadSections:set withRowAnimation:UITableViewRowAnimationNone];
//刷整个section
NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:SectionHeader];
[self.tableView reloadSections:indexSet withRowAnimation:UITableViewRowAnimationAutomatic];

//展开
// if (folded) {
// [_tableView reloadSections:set withRowAnimation:UITableViewRowAnimationBottom];
//
// } else { //收起
// [_tableView reloadSections:set withRowAnimation:UITableViewRowAnimationTop];
// }
}
其中,FinancierHeaderView自定义的tableHeaderView

FinancierHeaderView.h

#import <UIKit/UIKit.h>

@protocol FinancierHeaderViewCellDelegate <NSObject>
- (void)foldHeaderInSection:(NSInteger)SectionHeader;
@end

@interface FinancierHeaderView : UITableViewHeaderFooterView

@property(nonatomic,strong) UIImageView *rightImg;
@property(nonatomic,strong) UIView *headerView;
@property(nonatomic,strong) UIButton* rightBtn;
@property(nonatomic,strong) UILabel*titleLb;
@property(nonatomic,assign) NSInteger index;

@property(nonatomic,weak)id<FinancierHeaderViewCellDelegate> delegate;

@property(nonatomic, assign) BOOL fold;/**< 是否折叠 */
@property(nonatomic, assign) NSInteger section;/**< 选中的section */

- (void)setFoldSectionHeaderViewWithTitle:(NSString *)title section:(NSInteger)section canFold:(BOOL)canFold;

@end

FinancierHeaderView.m
#import "FinancierHeaderView.h"

@interface FinancierHeaderView()
{
BOOL _created;/**< 是否创建过 */
BOOL _canFold;/**< 是否可展开 */

}
@end

@implementation FinancierHeaderView

- (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier{

self = [super initWithReuseIdentifier:reuseIdentifier];

if (self) {

// [self setUpUI];//_init表示初始化方法
}

return self;
}
- (void)setFoldSectionHeaderViewWithTitle:(NSString *)title section:(NSInteger)section canFold:(BOOL)canFold
{
if (!_created) {
[self setUpUI];
}
_titleLb.text = title;
_section = section;
_canFold = canFold;
if (canFold) {
_rightImg.hidden = NO;
} else {
_rightImg.hidden = YES;
}
}

- (void)setUpUI
{
_created = YES;

CGFloat space = 10;
_headerView = [[UIView alloc] init];
_headerView.backgroundColor = [UIColor whiteColor];
[self addSubview:_headerView];
[_headerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(0);
make.left.mas_equalTo(0);
make.width.mas_equalTo(mainWidth);
make.height.mas_equalTo(44);
}];

_titleLb = [[UILabel alloc] init];
_titleLb.font = [UIFont systemFontOfSize:15];
[_headerView addSubview:_titleLb];
[_titleLb mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(0);
make.left.mas_equalTo(space);
make.width.mas_equalTo(mainWidth-50);
make.height.mas_equalTo(44);
}];

_rightImg = [[UIImageView alloc] initWithFrame:CGRectMake(mainWidth-40, 17, 20, 10)];
_rightImg.image = [UIImage imageNamed:@"A5_up"];
[_headerView addSubview:_rightImg];
[_rightImg mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(17);
make.left.mas_equalTo(mainWidth-40);
make.width.mas_equalTo(20);
make.height.mas_equalTo(10);
}];

_rightBtn = [UIButton buttonWithType:UIButtonTypeCustom];
_rightBtn.selected = YES;
[_rightBtn addTarget:self action:@selector(rightBtnClick:) forControlEvents:UIControlEventTouchUpInside ];
[_headerView addSubview:_rightBtn];
[_rightBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(0);
make.left.mas_equalTo(0);
make.width.mas_equalTo(mainWidth);
make.height.mas_equalTo(44);
}];

UIView *lineView = [[UIView alloc] init];
lineView.backgroundColor = [UIColor groupTableViewBackgroundColor];
[_headerView addSubview:lineView];
[lineView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(43.6);
make.left.mas_equalTo(0);
make.width.mas_equalTo(mainWidth);
make.height.mas_equalTo(0.4);
}];
}

- (void)rightBtnClick:(UIButton *)sender
{
if (_canFold) {
if ([self.delegate respondsToSelector:@selector(foldHeaderInSection:)]) {
[self.delegate foldHeaderInSection:_section];
}
}
}
- (void)setFold:(BOOL)fold {
_fold = fold;
if (fold) {
_rightImg.image = [UIImage imageNamed:@"A5_up"];
} else {
_rightImg.image = [UIImage imageNamed:@"A5_down"];
}
}

@end



OK,以后有空在整理下第二种方式的代码