iOS中Cell约束--使用xib实现多label的自动约束--高度随内容自适应

made in 小蠢驴的配图

       说起iOS开发,很多人的印象就是-弄一个tableView,把数据全丢到上面展示,听起来好像很粗糙,不过仔细一想,确实展示数据内容的,用的tableView是最多的了吧,说到这里,今天的男一号-tableViewCell就要登场了。

      本文的主题是--tableViewCell的高度自适应,计算cell高度的方法确实有好几种,因为做cell的时候,比较简单的界面我都是直接拉xib,手动连接约束比较省事,所以今天就来探索一波-- 使用xib实现cell高度自适应的简单方法;

手动设置数据源,初始展示

如图,这是最简单的tableView了,只有两个label,没有任何其他的控件,在未做任何处理的情况下,我们发现,内容是会越界(跑的屏幕之外的),首先第一步,我们得先解决这个问题,至少让内容都在屏幕内展示;

通过试图-发现内容越界

-->探索:难道是因为,tableView的高度不够,比如高度只有44,内容就只能这样显示了吗? 

首先:改变tableViewCell的高度 

其次:设置内容行数_valueLabel.numberOfLines=0;

如图,发现内容还是越界了

怀疑:内容label的宽度 = 无穷大? 所以并不会换行

xib的约束展示

如图,我们知道label只要设置两条约束,宽和高都可以自动实现内容的自适应,但是,这里如果不设置宽(添加右侧约束 == 确定 宽),label的宽会无限大,无限跑到内容的外部去

添加右侧约束

约束报错

如图,添加完右侧约束之后,我们发现约束报错了,原因:两个label都没设置宽度,都是根据内容自动设定的,这样就会导致均无法确定两个的frame,所有约束报错


-->小tips:这里只有两个label,并且没设置宽度约束(如果竖直方法,就是高度约束),都根据内容显示的时候,才会报错,如果你比如左侧label的内容是固定的(比如都是“姓名”),直接添加一个宽度约束,就可以解决,或者,左侧不是label,而是其他可以确定frame的空间,比如Btn,imageView都不会出现上述问题! 因为:当我们没设置label的frame的时候,默认的frame就是根据内容自适应的,所以不能两个需要自适应的出现在一起;

-->不信邪的:约束报错的情况下测试:

两个label约束下的展示

如图,我们发现,内容确实会自动换行了,也都有显示了,也证明了我们设置宽度约束的思路是没错的

但是! --> keyLabel不见了,因为我们做的两个label都是自适应的,所以并无法确定他们的准确位置!


解决办法:手动计算valueLabel的高度,但是,设置的是父试图(valueView)的高度-->通过高度约束修改!

设置valueView的高度约束

如图,添加一个View的高度约束,我们打算实现:valueLabel直接在valueView上显示,然后直接设置valueView的frame

高度约束设置完成

-->接下去:计算label的高度-->内容高度计算公式:CGRect rect = [str boundingRectWithSize:CGSizeMake(BottomW,CGFLOAT_MAX)options:optionsattributes:attrDiccontext:nil];

第一步:先拿到当前View的宽度!

第二步:设置valueLabel的宽度!

第三步:计算内容高度!

第四步:设置valueView高度!

操作完成,发现值设置进来了

内容虽然有换行,但是valueLabel还是宽度越界了

如图:虽然content拿到了数据,但是label的宽度此时却没跟着改变

解决办法-->手动算keyLabelLabel的宽度!

思路:1.设置keyLabel的宽度约束;

           2.根据keyLabel的实际内容,算出具体宽度,修改宽度约束;

           3.右侧valueLabel不设置宽度约束,设置右侧约束 = 0,通过计算得到valueLabel的宽度;

约束设置图

如图,因为如果同一行,两个label都不设置宽度约束,由于label默认会根据内容自适应,两个不确定的约束 -->导致约束报错!所以暂定,左侧设置宽度约束,然后再根据实际内容,修改左侧的宽度,而右侧的宽度 = 屏幕宽 - 左侧宽度!

设置keyLabel的宽度约束

设置valueLabel的右侧约束

此时我们发现,由于左侧的label是有宽度约束的,所以右侧的label此时约束设置(添加右侧约束 = 0)并不会再报错了!

根据keyLabel的内容计算宽度

通过内容,计算keyLabel的宽度,同时设置到keyLabel的宽度约束上,更新约束;

随后,valueView由于自适应,其宽度就自动 = 屏幕宽度 - keyLabel的宽度,不需要我们再次设置;

展示的内容如上

此时我们发现,有部分内容,还是被遮住了,label并不会完全显示出所有的内容

修改:label的宽度稍微加一点

发生这种情况,是由于Xcode8.0之后,字体的长度计算有了些许改变,我们在设置宽度时,稍微加一点,就可以解决这个问题。

修改完的展示

此时,label相互之间的约束冲突就解决了~


接下去,就是设置tableViewCell的高度自适应的问题了;

xib的快捷设置方法:1.在xib中,设置 顶部 和 底部 约束之后;                                   2.手动计算 高度 约束的值                                   3.使用Xcode自动适应Cell高度的方法

value高度的计算

自动计算高度

最终结果

如图,我们发现,keyLabel的宽度跟随内容自适应,vauleLabel的宽度 随 keyLabel的宽度自适应,valueLabel的高度 随 内容自适应,cell的高度随内容自适应~

小tips-->如果设置完_tableView.rowHeight=UITableViewAutomaticDimension 之后,发现高度还是固定的,检查一下,是否有设置了 tableView的高度代理方法-->(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath,有的话将其注释掉~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python3

body标签中相关标签

字体标签包含:h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

1441
来自专栏Young Dreamer

CSS——图片替换方法比较

图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示。其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要...

26110
来自专栏算法channel

Python-GUI|Tkinter模块

01 Tkinter Tkinter模块是Python的标准Tk GUI工具包的接口,它并不是必须掌握的,但是掌握一个Python的标准图形库还是非常有意思的...

52210
来自专栏我和未来有约会

CaseStudy(showcase)布局篇-如何做一个自适应窗口大小的布局

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

1878
来自专栏闻道于事

正式学习第一天下午——基础标签及其属性

今天下午学习了html中的基础标签及其属性。以下面的HTML代码为例。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

2655
来自专栏V站

自适应丨Html5响应式(自适应)网页设计

viewport是网页默认的宽度和高度, 上面这行代码的意思是:网页宽度默认等于屏幕宽度(width=device-width), 原始缩放比例(initia...

3855
来自专栏web开发

img标签实现和背景图一样的显示效果——object-fit和object-position

不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实...

3926
来自专栏地方网络工作室的专栏

图片自适应父元素大小,并左右上下居中的css方法

图片自适应父元素大小,并左右上下居中的css方法 前言 这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果。这个效果可以很简单的用css来实现,虽然...

2318
来自专栏知晓程序

开发 | 手把手,教你在小程序里做一个圆形进度条

今天想把之前在微信小程序开发过程中,制作的一个圆形进度条做成一个组件,方便以后直接拿来用。

983
来自专栏Coding01

推荐一款快速生成海报的微信小插件

现在很多小程序都有生成海报,分享海报的功能。我们自己的几个小程序 (如:爸妈搜商城、爸妈搜云课堂、幼师大学、跟着外教学英语等) 也都有生成海报的功能。因此技术团...

832

扫码关注云+社区