UITableView的折叠收缩和QQ好友分组效果

可折叠展开的tableView，QQ好友分组列表

demo下载地址https://github.com/zhengwenming/ExpandTableView

原理分析：这个可以折叠的table，我们点击的是table的section，每个section下面都对应一个数组，点击section，就展开sction然后展示数组数据。每次点击section都要刷新当前点击的这个section，不用reloadData，提高效率。那么点击的这个sction怎么知道自己是展开呢还是折叠起来呢？那么关键就是对这里的处理，我们自己要加一个条件判断是展开还是折叠。下面上代码看看具体实现。

方法一

NSMutableArray *stateArray = [NSMutableArray array];

for (int i = 0; i < dataSource.count; i++)
{
//所有的分区都是闭合
[stateArray addObject:@"0"];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
if ([stateArray[section] isEqualToString:@"1"]){
//如果是展开状态
NSArray *array = [dataSource objectAtIndex:section];
return array.count;
}else{
//如果是闭合，返回0
return 0;
}
}

方法一的原理是用一个stateArray去记录每个section的状态，当然光记录还是不行的，还是不断的改变这个stateArray对应section的值，展开了就把值替换为1，闭合了替换了0.那么这个0和1就是我们的依据，依据这个就可以返回这个scetion对应的row了。

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];
[button setTag:section+1];
button.backgroundColor = [UIColor whiteColor];
[button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 60)];
[button addTarget:self action:@selector(buttonPress:) forControlEvents:UIControlEventTouchUpInside];
UIImageView *line = [[UIImageView alloc]initWithFrame:CGRectMake(0, button.frame.size.height-1, button.frame.size.width, 1)];
[line setImage:[UIImage imageNamed:@"line_real"]];
[button addSubview:line];

UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(10, (kCell_Height-22)/2, 22, 22)];
[imgView setImage:[UIImage imageNamed:@"ico_faq_d"]];
[button addSubview:imgView];

UIImageView *_imgView = [[UIImageView alloc]initWithFrame:CGRectMake(self.view.frame.size.width-30, (kCell_Height-6)/2, 10, 6)];

if ([stateArray[section] isEqualToString:@"0"]) {
_imgView.image = [UIImage imageNamed:@"ico_listdown"];
}else if ([stateArray[section] isEqualToString:@"1"]) {
_imgView.image = [UIImage imageNamed:@"ico_listup"];
}
[button addSubview:_imgView];

UILabel *tlabel = [[UILabel alloc]initWithFrame:CGRectMake(45, (kCell_Height-20)/2, 200, 20)];
[tlabel setBackgroundColor:[UIColor clearColor]];
[tlabel setFont:[UIFont systemFontOfSize:14]];
[tlabel setText:sectionArray[section]];
[button addSubview:tlabel];
return button;
}
- (void)buttonPress:(UIButton *)sender//headButton点击
{
//判断状态值
if ([stateArray[sender.tag - 1] isEqualToString:@"1"]){
//修改
[stateArray replaceObjectAtIndex:sender.tag - 1 withObject:@"0"];
}else{
[stateArray replaceObjectAtIndex:sender.tag - 1 withObject:@"1"];
}
[expandTable reloadSections:[NSIndexSet indexSetWithIndex:sender.tag-1] withRowAnimation:UITableViewRowAnimationAutomatic];

}

给section中的按钮添加点击事件，然后设置按钮的tag值为section。

方法二

方法二中用一个类去记录和不断的替换状态，用一个model类。看看这个model类的定义

@interface GroupModel : NSObject
@property (nonatomic, assign)BOOL isOpened;
@property (nonatomic, retain)NSString *groupName;
@property (nonatomic, assign)NSInteger groupCount;

@property (nonatomic, retain)NSArray *groupFriends;
@end

再看看怎么用

for (NSDictionary *groupInfoDic in JSONDic[@"group"]) {
GroupModel *model = [[GroupModel alloc]init];
model.groupName = groupInfoDic[@"groupName"];
model.groupCount = [groupInfoDic[@"groupCount"] integerValue];
model.isOpened = NO;
model.groupFriends = groupInfoDic[@"groupArray"];
[dataSource addObject:model];
}

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

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
GroupModel *groupModel = dataSource[section];
NSInteger count = groupModel.isOpened?groupModel.groupFriends.count:0;
return count;
}

(UIView )tableView:(UITableView )tableView viewForHeaderInSection:(NSInteger)section

{

UIView *sectionView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];

sectionView.backgroundColor = [UIColor colorWithWhite:0.9 alpha:0.8];

GroupModel *groupModel = dataSource[section];

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

[button setFrame:sectionView.bounds];

[button setTag:section];

[button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];

[button setTitle:groupModel.groupName forState:UIControlStateNormal];

[button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 60)];

[button addTarget:self action:@selector(buttonPress:) forControlEvents:UIControlEventTouchUpInside];

[sectionView addSubview:button];

UIImageView *line = [[UIImageView alloc]initWithFrame:CGRectMake(0, button.frame.size.height-1, button.frame.size.width, 1)];

[line setImage:[UIImage imageNamed:@”line_real”]];

[sectionView addSubview:line];

UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(10, (44-16)/2, 14, 16)];

[imgView setImage:[UIImage imageNamed:@”ico_list”]];

[sectionView addSubview:imgView];

UILabel *numberLabel = [[UILabel alloc]initWithFrame:CGRectMake(self.view.frame.size.width-40, (44-20)/2, 40, 20)];

[numberLabel setBackgroundColor:[UIColor clearColor]];

[numberLabel setFont:[UIFont systemFontOfSize:14]];

NSInteger onLineCount = 0;

for (NSDictionary *friendInfoDic in groupModel.groupFriends) {

if ([friendInfoDic[@”status”] isEqualToString:@”1”]) {

onLineCount++;

}

}

[numberLabel setText:[NSString stringWithFormat:@”%ld/%ld”,onLineCount,groupModel.groupCount]];

[sectionView addSubview:numberLabel];

return sectionView;

}

- (void)tableView:(UITableView )tableView didSelectRowAtIndexPath:(NSIndexPath )indexPath

{

GroupModel *groupModel = dataSource[indexPath.section];

NSDictionary *friendInfoDic = groupModel.groupFriends[indexPath.row];

NSLog(@”%@ %@”,friendInfoDic[@”name”],friendInfoDic[@”shuoshuo”]);

}

(void)buttonPress:(UIButton *)sender//headButton点击

{

GroupModel *groupModel = dataSource[sender.tag];

groupModel.isOpened = !groupModel.isOpened;

[expandTable reloadSections:[NSIndexSet indexSetWithIndex:sender.tag] withRowAnimation:UITableViewRowAnimationAutomatic];

}

看看关键代码，就是按钮点击事件里面buttonPress，这一句话

groupModel.isOpened = !groupModel.isOpened;

的意思是如果是展开，那么点击之后就是折叠，

如果是折叠，点击之后就是展开。这个状态被记录下来了，而且可以不断的改变。

好，到此为止。两种方法介绍完毕。想看demo的同学可以直接到Github上下载https://github.com/zhengwenming/ExpandTableView