UItableview点击后的折叠效果的简单实现

项目有个需求。要求将主要信息列表展示，点击信息的时候，下方弹出来一个具体内容展示变化，差异等等。
之前做过这个，当时是网上找的一篇文章直接复制粘贴的，过了一段时间就给忘了，连思路都没有，今天花了一天时间，自己整理了一下，实现了这个效果，并做了一个优化，下面开始上代码

首先说下思路，tableview进入的时候展示的是各个cell的section的headerview，cell默认给一个0的高度，这时我们看到的就是各个section展示的主要部分内容，接着定义一个数组，这个数组内部保存每个section点击的结果，1是展开cell，0是收缩cell。当tableview拿到数据源dataArray的时候，就在下方写一个for循环根据dataArray的count依次遍历，循环执行N次，数组就添加N个0，得到一个dataArray的count个数的记录打开关闭的数组，留待后用。然后给section添加一个点击事件就可以了

@interface XDYCROutController ()<UITableViewDelegate,UITableViewDataSource>

@property (nonatomic , strong) UITableView *table;
@property (nonatomic,strong)NSMutableArray *flagArray;//记录状态的数组

@end

- (void)viewDidLoad {
    [super viewDidLoad];
    _flagArray = [NSMutableArray array];
    [self loadData];
    self.view.backgroundColor = ColorRGB(240, 240, 240);
    self.table = [[UITableView alloc] initWithFrame:CGRectMake(0, 20, self.view.mj_w, self.view.mj_h) style:UITableViewStyleGrouped];
    self.table.delegate = self;
    self.table.dataSource = self;
    self.table.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    [self.view addSubview:self.table];

}

接着就是网络请求回来的数据，给dataArray，然后我们给_flagArray赋值
 for (NSInteger i = 0; i<self.dataArray.count; i++) {
                [_flagArray addObject:@"0"];
            }
  // 注意，我因为点击section后弹出的始终是一个cell，所以我的flagarray内部只需要加入count个记录就可以，如果你是点击section弹出多个cell，就要像下面这样
    //  for (int i = 0; i < num; i ++) {
    //  NSMutableArray *rowArray = [NSMutableArray array];
    //      for (int j = 0; j < X（每个section对应的存有cell个数的数组个数）; j ++) {
        //      [rowArray addObject:[NSString stringWithFormat:@"%d",j]];
//      }
    //  [_sectionArray addObject:rowArray];
    //  [_flagArray addObject:@"0"];
    //}

这样我们需要的两组数据都有了，一个是保有内容的dataArray，一个是负责记录状态的flagarray

tableview的代理里面：

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

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return 1;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if ([_flagArray[indexPath.section] isEqualToString:@"0"])
        return 0;
    else
        return 100;
}

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 70;
}
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    UIView *headView = [UIView new];
    headView.tag = 100 + section;
    headView.backgroundColor = ColorRGB(240, 240, 240);
    UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(headerClick:)];
    [headView addGestureRecognizer:recognizer];

    UILabel *partNameLabel = [[UILabel alloc] init];
    partNameLabel.frame = CGRectMake(20, 0, 120, 15);
    partNameLabel.textColor = ColorRGB(140, 140, 140);
    partNameLabel.font = font(13);
    partNameLabel.text = @"配件名称";
    [headView addSubview:partNameLabel];

    xxxxx一堆view的代码

    return headView;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    [tableView registerClass:[XDYChangeRecordOutTableViewCell class] forCellReuseIdentifier:@"cell"];
    XDYChangeRecordOutTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
    cell.model=self.dataArray[indexPath.section];
    // 实现的时候，如果不加上下面这句话，cell不会默认收缩，所以我加了下面的代码，cell的bottomview内是各个子控件
    cell.bottomView.hidden = [_flagArray[indexPath.section] isEqualToString:@"0"];

    return cell;
}

-(void)headerClick:(UITapGestureRecognizer*)tap{
  long  int index = tap.view.tag - 100;

    NSMutableArray *indexArray = [[NSMutableArray alloc]init];
//    NSArray *arr = self.dataArray[index];
//    for (int i = 0; i < arr.count; i ++) {
        NSIndexPath *path = [NSIndexPath indexPathForRow:0 inSection:index];
        [indexArray addObject:path];
//    }
    //展开
 // 注意，我这里上面注释掉的部分，如果你的section点击后，弹出的是多个cell，就要把上面的注释打开，  
 // 点击时，从状态数组内取出保存的状态值，利用下面的reload方法进行数据的重写，展开或者收缩cell就行了，
    if ([_flagArray[index] isEqualToString:@"0"]) {
        _flagArray[index] = @"1";
        [self.table reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationBottom];
        // 因为我的section内有一个图片是箭头，代表展开或者收缩的提示，所以我需要对section也进行reload
        [self.table reloadSections:[NSIndexSet indexSetWithIndex:index] withRowAnimation:UITableViewRowAnimationNone];
    } else { //收起
        _flagArray[index] = @"0";
        [self.table reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationTop];
        [self.table reloadSections:[NSIndexSet indexSetWithIndex:index] withRowAnimation:UITableViewRowAnimationNone];
    }

}

好了，主要代码都写在这里了，其实很简单，当时做的时候图省事复制粘贴，现在自己做了一遍，觉得还是自己动手来的实在，效果最显著了。
附图：