这周在工作当中遇到的一个问题就是在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;
}
实现效果展示: