文档章节

IOS 6.0+ Autolayout — UITableViewCell 高度调整

Carson6931
 Carson6931
发布于 2015/01/03 14:52
字数 1293
阅读 7685
收藏 23

要实现的效果

要求:

一般titleLabel 仅显示一行标题,高度为固定。

imageview 大小也为固定。

detailLabel 宽度固定,但高度根据文本动态调整。 

cell 底部拒imageview 的底部以及detailLabel 底部高度都是大于等于20。

当detailLabel文字很少时,cell底部拒imageview底部维持20,这时detaillabel底部距cell 底部大于20. 

当detailLabel文字很多时,cell底部距imageview底部超过20,与detailLabel底部高度维持20.


storyboard上的准备工作 

注意将detailLabel numberOfLines 设为0

建好cell自定义AutoCell 类,关联好控件,事先准备好一些数据源

    nameArray = [NSMutableArray arrayWithObjects:@"蜗壳",@"AI",@"大詹皇",nil];
    imageArray = [NSMutableArray arrayWithObjects:@"u=4040080498,3072784853&fm=90&gp=0.jpg",@"u=2384677404,2895132414&fm=21&gp=0.jpg",@"u=262781505,2408318453&fm=21&gp=0.jpg", nil];
    descriptionArray = [NSMutableArray arrayWithObjects:@"蜗壳打球好潇洒,好飘逸,铁王之王",@"AI,史上最矮状元,无冕之王,crossover简直厉害,观赏性强,永远的MVP!!!!",@"最年轻的一万分先生,MVP,奥布莱恩杯,效率之王,天之骄子,全宇宙最强的球员没有之一,强突暴扣身体棒,发际线又高了,关键时刻又耸了,带领骑士夺冠吧,虽然看起来还没戏!!!!!!", nil];

实现tableview的委托方法

//numberOfRows
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 3;
}
//cellForRow
-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    AutoTableViewCell *cell = (AutoTableViewCell*)[tableView dequeueReusableCellWithIdentifier:@"autoCell"];
    [cell.titleLabel setText:nil];
    [cell.titleLabel setText:[nameArray objectAtIndex:indexPath.row]];
    [cell.descriptionLabel setText:nil];
    [cell.logoImageView setImage:[UIImage imageNamed:[imageArray objectAtIndex:indexPath.row]]];
    [cell.descriptionLabel setText:[descriptionArray objectAtIndex:indexPath.row]];
    return cell;
}

先不实现HeightForRow方法,直接运行,发现ios7,ios8上都没有得到想要的效果

IT'S SO BAD!!!

核心部分,HeightForRow方法实现

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static AutoTableViewCell *cell = nil;
    static dispatch_once_t onceToken;
    //只会走一次
    dispatch_once(&onceToken, ^{
        cell = (AutoTableViewCell*)[tableView dequeueReusableCellWithIdentifier:@"autoCell"];
    });
    
    //calculate
    CGFloat height = [cell calulateHeightWithtTitle:[nameArray objectAtIndex:indexPath.row] desrip:[descriptionArray objectAtIndex:indexPath.row]];
    
    return height;
}

具体的计算高度方法是现在自定义cell类中

-(CGFloat)calulateHeightWithtTitle:(NSString*)title desrip:(NSString*)descrip
{
    //这里非常重要
    CGFloat preMaxWaith =[UIScreen mainScreen].bounds.size.width-108;
    [self.detailLabel setPreferredMaxLayoutWidth:preMaxWaith];
    [self.titleLabel setText:title];
    //这也很重要
    [self.detailLabel layoutIfNeeded];
    [self.detailLabel setText:descrip];
    [self.contentView layoutIfNeeded];
    CGSize size = [self.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
    //加1是关键
    return size.height+1.0f;
}

几大需要注意的地方

  • 首先说为什么要设置 PreferredMaxLayoutWidth, 表示label的最大的布局宽度,label显示多少行与它的宽度肯定有关,所有这里要设置正确的宽度,但这里有点坑的地方


这是storyboard 上detailLabel 的该属性,默认是没有勾选的(automatic)表示系统自动计算最大布局宽度,但是查看官方文档,你会发现自动计算只有在ios8中才会有效果,低于ios8不会自动计算。这时你可能会说:那把它勾上吧!!!

如图,勾上之后你发现显示的是492,这是什么意思?这个数字是当前使用的storyboard 的宽度减去label到两边界的绝对距离。xcode6 为大尺寸storyboard 宽度600 ,减去 detailLabel 距左边界98,减去距右边界10,刚好492.

但是这样对吗?很明显不对,iphone 屏幕宽度不是已经有3种宽度了么?320、375(iphone6)、414(plus)

所以600很明显不对,应该用当前运行的宽度来减去108,所以这里勾不勾都是错,干脆不勾了直接代码算吧....

CGFloat preMaxWaith =[UIScreen mainScreen].bounds.size.width-108;
  • 关于layoutIfNeeded到底是干嘛的,我也是一知半解,只知道不加效果出不来,打算之后再去查阅...

  • 加1是关键 

[self.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
return size.height+1.0f;

这里size.height 实际上是我们要的contentview 的高度,但是我们如果直接将这个高度返回,就赋给了cell的高度,但是由于cell 分界线的原因,cell的高度比contentview高度多1,所以这里加1再返回。不要小看1像素,少了它效果还真就出不来!!!!

注意了这些,我们再运行,发现得到了想要的效果,切换模拟器,也没问题。


在ios6.0上测试

没有6.0的模拟器了,找了台6.0的真机,测试后效果如图

 

detailLabel的高度始终没有改变,维持在一行,但是可以发现cell的高度是对的,这似乎说明heightforrow方法没问题,那detailLabel为何没有自动拉伸呢?

再次检查了代码,原来问题出在cellforrow方法中,因为每个cell上的detailLabel的高度要拉伸就应该给每个detailLabel设置最大布局宽度:preferredMaxLayoutWidth。之前做的仅仅只是在heightforrow里面的得到那个用来计算的cell设置过。所以加了几句代码

-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    AutoTableViewCell *cell = (AutoTableViewCell*)[tableView dequeueReusableCellWithIdentifier:@"autoCell"];
    [cell.titleLabel setText:nil];
    [cell.titleLabel setText:[nameArray objectAtIndex:indexPath.row]];
    //补上的几句,给用来显示的DetailLabel 设置最大布局宽度
    CGFloat preMaxWaith =[UIScreen mainScreen].bounds.size.width-108;
    [cell.detailLabel setPreferredMaxLayoutWidth:preMaxWaith];
    [cell.detailLabel layoutIfNeeded];

    [cell.detailLabel setText:nil];
    [cell.logoImageView setImage:[UIImage imageNamed:[imageArray objectAtIndex:indexPath.row]]];
    [cell.detailLabel setText:[descriptionArray objectAtIndex:indexPath.row]];
    return cell;
}

再次运行,可以看到在ios6中也得到了想要的效果,

IT'S perfect!!!

总之,研究了几天布局,发现ios好坑,各种陷阱,好在查阅了中外各种资料,最终还是实现了效果。

项目源码:https://github.com/zhangxh6931/AutolayoutCell

© 著作权归作者所有

Carson6931
粉丝 17
博文 9
码字总数 7471
作品 0
徐汇
程序员
私信 提问
加载中

评论(15)

P
PLLU
如果label下面有的有图片,有的没有图片,cell怎么自适应???
Carson6931
Carson6931 博主

引用来自“moonclock”的评论

作者你好!请问能把源代码传上来么?我是菜鸟,想学习学习您的代码

引用来自“Carson6931”的评论

源码地址放博客最后了,需要的话去看看

引用来自“moonclock”的评论

恩恩 ,谢谢作者啦!

引用来自“Carson6931”的评论

不谢

引用来自“moonclock”的评论

您好,您传到github上的版本文件丢失了,只剩pod的文件了,有时间的话更新一下吧~
ok 了,再看下
moonclock
moonclock

引用来自“moonclock”的评论

作者你好!请问能把源代码传上来么?我是菜鸟,想学习学习您的代码

引用来自“Carson6931”的评论

源码地址放博客最后了,需要的话去看看

引用来自“moonclock”的评论

恩恩 ,谢谢作者啦!

引用来自“Carson6931”的评论

不谢
您好,您传到github上的版本文件丢失了,只剩pod的文件了,有时间的话更新一下吧~
Carson6931
Carson6931 博主

引用来自“moonclock”的评论

作者你好!请问能把源代码传上来么?我是菜鸟,想学习学习您的代码

引用来自“Carson6931”的评论

源码地址放博客最后了,需要的话去看看

引用来自“moonclock”的评论

恩恩 ,谢谢作者啦!
不谢
moonclock
moonclock

引用来自“moonclock”的评论

作者你好!请问能把源代码传上来么?我是菜鸟,想学习学习您的代码

引用来自“Carson6931”的评论

源码地址放博客最后了,需要的话去看看
恩恩 ,谢谢作者啦!
Carson6931
Carson6931 博主

引用来自“moonclock”的评论

作者你好!请问能把源代码传上来么?我是菜鸟,想学习学习您的代码
源码地址放博客最后了,需要的话去看看
Carson6931
Carson6931 博主

引用来自“moonclock”的评论

作者你好!请问能把源代码传上来么?我是菜鸟,想学习学习您的代码

我找找看
moonclock
moonclock
作者你好!请问能把源代码传上来么?我是菜鸟,想学习学习您的代码
Carson6931
Carson6931 博主

引用来自“新地球”的评论

你好 为什么我使用 systemLayoutSizeFittingSize 不能计算好cell的高度?
要加1 CGSize size = [self.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize]; //加1是关键 return size.height+1.0f;
新地球
新地球
你好 为什么我使用 systemLayoutSizeFittingSize 不能计算好cell的高度?
iOS开发tips-UITableView、UICollectionView行高/尺寸自适应

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianxin160/article/details/55002487 UITableView 我们都知道UITableView从iOS 8开始实现行高的自适应相对比...

KenshinCui
2017/02/12
0
0
iOS开发tips-神奇的UITableView

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianxin160/article/details/71436920 概述 UITableView是iOS开发中使用频率最高的UI控件,在前面的文章中对于...

KenshinCui
2017/05/08
0
0
有了Auto Layout,为什么你还是害怕写UITabelView的自适应布局?

Apple 算是最重视应用开发体验的公司了.从Xib到StoryBoard,从Auto Layout到Size Class,每一次的更新,都会给iOS应用的开发带来不小的便利.但是,对于绝对多数iOS攻城狮来说,我们依然还是很害怕...

ios122
2015/09/23
99
0
iOS开发系列--UITableView全面解析

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianxin160/article/details/47753205 --UIKit之UITableView 概述 在iOS开发中UITableView可以说是使用最广泛...

KenshinCui
2015/08/18
0
0
iOS开发小技巧:刷新UITableView

在很多APP界面都用到的UITableView,对iOS开发者来说一定不陌生吧。网上关于UITableView的文章早已多不胜数,尤其是关于UITableView优化方面的,对开发者来说非常值得一看。 现在就来看看,刷...

flyurt
2015/10/23
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

手写RPC框架指北另送贴心注释代码一套

Angular8正式发布了,Java13再过几个月也要发布了,技术迭代这么快,框架的复杂度越来越大,但是原理是基本不变的。所以沉下心看清代码本质很重要,这次给大家带来的是手写RPC框架。 完整代码...

全菜工程师小辉
7分钟前
2
0
【Java】开发收货

简介 谨以此篇,记载开发过程中的一些tips。 编译器 【Shift + F6】可实现变量的联动修改。

Areya
24分钟前
5
0
DOM官方定义

DOM Document Object Model 文档对象模型 DOM的官方定义:W3C的DOM,可以使程序或者脚本(JS或AS\JScript),动态的访问或者操作文档的内容、结构、样式。 DOM只是一个标准,操作网页的标准。...

前端老手
29分钟前
6
0
IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词。需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱。另外,前端开发也会细分很多个开...

老码农的一亩三分地
31分钟前
6
0
可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
46分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部