如何给UItableView的headerView添加可伸展的Cell.headerView根据里面的tableView进行变化

这周在工作当中遇到的一个问题就是在UITableView要显示两组数据.tableView要展示家长的联系电话,家长的联系方式上面必须展示老师的联系方式.而且必须显示完成.因为家长和老师的数据都是直接从后台获取,具备不确定性.所以这个地方选择的是利用一个uitableView.headerView展示老师的信息.下面则展示学生的信息.本次设计的难点不在于下面家长信息的展示.而在于家长的信息cell是可变的.单击之后会变大.外面的headerView也应该随着变化.

 下面讲解一下

   在headerView上面自定义一个view.View里面包含一个tableVIEW用来展示老师的信息.蓝色则是代表,点击之后cell伸展出来的部分.本次使用的是

#import <Masonry.h>这个第三方框架对里面的空间进行约束.代码如下

 //设置约束

    [self.cellImageView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.leading.mas_equalTo(self.contentView).offset(10);

        make.top.mas_equalTo(self.contentView).offset(5);

        make.width.mas_equalTo(50);

        make.height.mas_equalTo(50);

    }];

    //添加约束

    [self.blueView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.leading.trailing.mas_equalTo(self.contentView);

        make.top.mas_equalTo(self.cellImageView.mas_bottom).offset(0);

        make.height.mas_equalTo(50);

    }];

    

    [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.leading.trailing.top.mas_equalTo(self);

        make.bottom.mas_equalTo(self.blueView.mas_bottom).offset(10);

    }];

如何实现点击之后蓝色部分取消更新cell的高度呢?

本次计算cell的高度采用的缓存行高的方式;可利用下面的代码得到当前cell的高度

 // 自己算行高: AutoLayout自动约束

        // 让cell设置对应内容,可以直接获高度,这个cell不参与显示

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

  WHTg *tg=self.tgs[indexPath.row];

    HMCell *cell=[HMCell cellWithTable:tableView];

    cell.model=tg;

    CGFloat height=[cell systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;

   // 我们最终只需要获取高度,根据view的约束获取大小

 

    // 保存行高

    tg.Rowheight = height;

    NSLog(@"当前的高度是%lf",height);

    return height;

    

}

因为这个地方要涉及到重新缓存行高,就没有对已经缓存的行高做相应的处理

要实现cell的伸展问也不是很难.当点击cell之后,我们给模型设置一个属性

这个属性是用来确定当前的CELL是伸开的还是关闭的.

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

{

    WHTg *tg=self.tgs[indexPath.row];

    tg.open=!tg.open;

   

    NSNumber *num=[NSNumber numberWithBool:tg.open];

    //通知刷新

    [[NSNotificationCenter defaultCenter] postNotificationName:@"relodedata" object:num];

//重新刷新CELL改变

     [self.tableView reloadData];

}

改变cell约束的代码如下:

-(void)setModel:(WHTg *)model

{

    _model=model;

    self.cellImageView.image=[UIImage imageNamed:model.icon];

        [self layoutIfNeeded];

   

    if (model.open) {

        //隐藏

        self.blueView.hidden=YES;

        

        //重新更改约束 利用mas_remakeConstraints:

        [self.contentView mas_remakeConstraints:^(MASConstraintMaker *make) {

            make.leading.trailing.top.mas_equalTo(self);

            make.bottom.mas_equalTo(self.cellImageView.mas_bottom).offset(0);

        }];

        

    }

    else

    {//显示

        self.blueView.hidden=NO;

   //重新更改约束

        [self.contentView mas_remakeConstraints:^(MASConstraintMaker *make) {

            make.leading.trailing.top.mas_equalTo(self);

            make.bottom.mas_equalTo(self.blueView.mas_bottom).offset(0);

        }];

    

    }

//    [self.contentView layoutIfNeeded];

//    [self layoutIfNeeded];

    

}

重点

如何让外面的headview根据里面的view进行变化呢.

这个是这么处理的,每次点击CELL之后都会发一个通知

 //通知刷新

    [[NSNotificationCenter defaultCenter] postNotificationName:@"relodedata" object:num];

在主要的tableView的控制器里面面注册一个通知

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(update:) name:@"relodedata" object:nil];

值得注意的地方,当重新给headerView里面的View赋值frame之后一定要重写

  self.tableView.tableHeaderView=self.headerView;

-(void)update:(NSNotification *)info

{

    BOOL open=[info.object boolValue];

  

        if(open)

        {

            self.allHeight-=50;

            NSLog(@"+50");

        }

        else

        {

             self.allHeight+=50;

             NSLog(@"-50");

        }

    

  

       self.headerView.frame=CGRectMake(0, 0, self.view.frame.size.width, self.allHeight);

     [self.tableView reloadData];

     [self.headerView.tableView reloadData];

      self.tableView.tableHeaderView=self.headerView;

}

实现效果展示: