UITableViewCell设置间距的坑
今天在设置UITableViewCell的间距,遇到了一些问题,在此记录一下
设置UITableViewCell间距的几种方法
- 将
cell.backgroundColor
和contentView.backgroundColor
都设置为clearColor
,在cell中添加一个白色的背景View,距离cell的有一定的距离 - 间距用
UITableViewHeaderFooterView
来显示,设置有多个section,每个section只有一行 - 通过重写cell的
setFrame:
方法来修改cell的高度或y值
遇到的问题
我选择了使用方式三来实现,重写了setFrame:
方法,tableView.rowHeight
设置为cell的高度加上间距
- (void)setFrame:(CGRect)frame{
frame.origin.y += 15;
frame.size.height -= 15;
[super setFrame:frame];
}
原本没有任何问题,但另外还需要给cell添加左滑删除的功能,那么问题就来了
看到问题,想必大家都知道问题出在哪里了,在滑动cell时,setFrame:
传入的frame已经是修改后的frame,再继续减去10的高度,就会比实际想要的高度更小,y值也会变大。
尝试解决
在显示cell是setFrame:
方法传入的frame的高度为tableView.rowHeight = 100 + 10
,若实现了tableView:heightForRowAtIndexPath
则为该方法返回的高度,那么就在修改frame时加个判断不就好了吗?恩,是的,那样应该是可以的,于是加个判断
- (void)setFrame:(CGRect)frame{
if (self.frame.size.height != frame.size.height) {
frame.origin.y += 10;
frame.size.height -= 10;
}
[super setFrame:frame];
}
我的间距去哪了😂
加句Log看下呗
- (void)setFrame:(CGRect)frame{
NSLog(@"%p.frame = %@ frame = %@",self,NSStringFromCGRect(self.frame),NSStringFromCGRect(frame));
if (self.frame.size.height != frame.size.height) {
frame.origin.y += 10;
frame.size.height -= 10;
}
[super setFrame:frame];
}
来看下Log(只取了其中一个Cell)
1.0x7fa396079a00.frame = {{-160, -51}, {320, 100}} frame = {{0, 0}, {320, 100}}
2.0x7fa396079a00.frame = {{0, 0}, {375, 110}} frame = {{0, 0}, {375, 110}}
3.0x7fa396079a00.frame = {{0, 0}, {375, 110}} frame = {{0, 0}, {375, 110}}
我去,什么鬼,第一次设置完frame高度应该是100的呀,为什么第二次取出来的时候是110了
真正解决
为了方便调试,就新建了一个测试工程,使用Storyborad自定义cell,却发现结果不一样,我的间距没有消失啊
查看下Log
self.frame = {{-160, -50}, {375, 100}} frame = {{0, 0}, {375, 100}}
self.frame = {{0, 0}, {375, 100}} frame = {{0, 0}, {375, 110}}
self.frame = {{0, 0}, {375, 100}} frame = {{0, 0}, {375, 110}}
可以看到第二次拿到的self.frame
就是上一次设置的值
这我就纳闷了啊,Storyboard长得好看些?
我的Debug思路是在cell的创建到加载到tableView上都打印一下frame,看下系统在什么时候修改了cell的高度
- (instancetype)initWithCoder:(NSCoder *)coder
{
self = [super initWithCoder:coder];
if (self) {
NSLog(@"%s %@",__func__,NSStringFromCGRect(self.frame));
}
return self;
}
- (void)awakeFromNib {
[super awakeFromNib];
NSLog(@"%s %@",__func__,NSStringFromCGRect(self.frame));
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"TableViewCell"];
NSLog(@"%s",__func__);
return cell;
}
得到如下的Log
self.frame = {{-160, -50}, {320, 100}} frame = {{0, 0}, {320, 100}}
-[TableViewCell initWithCoder:] {{0, 0}, {320, 100}}
-[TableViewCell awakeFromNib] {{0, 0}, {320, 100}}
-[ViewController tableView:cellForRowAtIndexPath:]
self.frame = {{0, 0}, {375, 110}} frame = {{0, 0}, {375, 110}}
self.frame = {{0, 0}, {375, 110}} frame = {{0, 0}, {375, 110}}
可以看到第二次调用setFrame:
是在tableView:cellForRowAtIndexPath:
之后,所以应该是tableView在布局子控件时调用的,那么xib的cell会该变frame,而storyboard不会呢?
仔细查看Log后发现,xib的cell不仅仅改变了高度,宽度也由原来的320变成了375,而storyboard的cell第一次调用setFrame时的宽度就是375,那么我猜想是因为tableView在布局子控件时,发现cell的宽度和自身不一样,就会将宽度cell的宽度设置为自己的宽度,高度设置为rowHeight的值。而新建的xib cell默认是320的宽度,storyboard是375的宽度,程序又都是运行在iPhone7的模拟器上。
那么就在系统布局之前把cell的宽度设置成tableView的宽度(这里等于屏幕的宽度)?
- (void)awakeFromNib{
[super awakeFromNib];
NSLog(@"%s %@",__func__,NSStringFromCGRect(self.frame));
self.frame = CGRectMake(0, 0, kScreenWidth, 100);
}
再次看下Log
self.frame = {{-160, -50}, {320, 100}} frame = {{0, 0}, {320, 100}}
-[TableViewCell initWithCoder:] {{0, 0}, {320, 100}}
-[TableViewCell awakeFromNib] {{0, 0}, {320, 100}}
self.frame = {{0, 0}, {320, 100}} frame = {{0, 0}, {375, 100}}
-[ViewController tableView:cellForRowAtIndexPath:]
self.frame = {{0, 0}, {375, 100}} frame = {{0, 0}, {375, 110}}
self.frame = {{0, 0}, {375, 100}} frame = {{0, 0}, {375, 110}}
果然,高度没有改变,我的间距又回来了,加上判断,cell终于可以愉快的左滑了