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

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

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

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

方法一

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

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

方法二

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

再看看怎么用

• (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