UITableViewCell 扩展动画带自调整大小的标签,视觉动画问题
UITableViewCell expanding animation with self-sizing labels, visual animation problem
我在自动调整大小和 animatable table 视图单元格方面遇到了问题,只有动画部分。
问题是当单元格展开时,其中 2 个标签在其他项目展开时重叠。如果您查看下面的 gif,顶部标签 "370 Base Axle Ratio" 会与中间元素重叠。那些中间的元素成组往下滑,也是不可取的,仔细看,中间的字下面的“0”"Original Production"也重叠了,展开或者显示不正确
顶部的粗体标签“370 Base Axle”设置为 0 行文本,因此它可以展开以容纳多行。中心标签组固定在该标签的底部。底部长文本标签锚定到中间“0”标签的底部。
如果我将中间的项目组以固定的数量锚定到视图的顶部,那么展开就不会产生重叠效果,但这当然会破坏在该顶部具有多行文本的动态特性标签。
此布局是使用自动布局构建的,但未使用堆栈视图(此时不是我的首选解决方案)。
没有使用特定代码来设置任何布局大小,仅在我添加或删除底部标签中的文本后 tableViewController 中使用此代码:
tableView.beginUpdates()
tableView.endUpdates()
我该如何解决这个问题,使唯一会扩展的元素是文本量较长的最底部标签,但顶部的标签高度仍然可变?
TL;DR: 当其他多行标签以 "show more" 扩展样式 table 动画时,多行文本标签会中断动画细胞.
您可以几乎 只需很少的更改即可解决您的问题。
两件重要的事情:
- 对于所有个标签,将Hugging和Compression Resistance都设置为
1000
(必需)
- 确保你有一个完整的垂直约束链。
不过,您设置/清除标签文本的方法存在一些缺点。展开动画效果很好,但折叠动画看起来就像在原始 gif 中一样——文本消失而不是被覆盖。另外,底部有额外的间距。
为了解决这个问题,您可以设置一个从 "description" 标签底部到内容视图底部的约束条件……这将是 "expanded" 约束,AND 添加另一个约束,从 "center 0" 标签的底部到内容视图的底部...这将是 "collapsed" 约束。
这些约束一开始会发生冲突...因此将其中一个约束(无关紧要)的优先级更改为 750
(默认高),将另一个约束更改为 250
(默认低)。
当您的应用程序 运行 时,您可以根据您希望单元格展开还是折叠来交换优先级。
我使用您的布局制作了一个示例应用程序 - 您可以在此处下载:https://github.com/DonMag/Maverick
我使用背景颜色以便于查看框架。 cellForRowAt
中有一行可以取消注释以清除颜色。
使用您的设置/明文方法的结果:
并使用约束方法:
我在自动调整大小和 animatable table 视图单元格方面遇到了问题,只有动画部分。
问题是当单元格展开时,其中 2 个标签在其他项目展开时重叠。如果您查看下面的 gif,顶部标签 "370 Base Axle Ratio" 会与中间元素重叠。那些中间的元素成组往下滑,也是不可取的,仔细看,中间的字下面的“0”"Original Production"也重叠了,展开或者显示不正确
顶部的粗体标签“370 Base Axle”设置为 0 行文本,因此它可以展开以容纳多行。中心标签组固定在该标签的底部。底部长文本标签锚定到中间“0”标签的底部。
如果我将中间的项目组以固定的数量锚定到视图的顶部,那么展开就不会产生重叠效果,但这当然会破坏在该顶部具有多行文本的动态特性标签。
此布局是使用自动布局构建的,但未使用堆栈视图(此时不是我的首选解决方案)。
没有使用特定代码来设置任何布局大小,仅在我添加或删除底部标签中的文本后 tableViewController 中使用此代码:
tableView.beginUpdates()
tableView.endUpdates()
我该如何解决这个问题,使唯一会扩展的元素是文本量较长的最底部标签,但顶部的标签高度仍然可变?
TL;DR: 当其他多行标签以 "show more" 扩展样式 table 动画时,多行文本标签会中断动画细胞.
您可以几乎 只需很少的更改即可解决您的问题。
两件重要的事情:
- 对于所有个标签,将Hugging和Compression Resistance都设置为
1000
(必需) - 确保你有一个完整的垂直约束链。
不过,您设置/清除标签文本的方法存在一些缺点。展开动画效果很好,但折叠动画看起来就像在原始 gif 中一样——文本消失而不是被覆盖。另外,底部有额外的间距。
为了解决这个问题,您可以设置一个从 "description" 标签底部到内容视图底部的约束条件……这将是 "expanded" 约束,AND 添加另一个约束,从 "center 0" 标签的底部到内容视图的底部...这将是 "collapsed" 约束。
这些约束一开始会发生冲突...因此将其中一个约束(无关紧要)的优先级更改为 750
(默认高),将另一个约束更改为 250
(默认低)。
当您的应用程序 运行 时,您可以根据您希望单元格展开还是折叠来交换优先级。
我使用您的布局制作了一个示例应用程序 - 您可以在此处下载:https://github.com/DonMag/Maverick
我使用背景颜色以便于查看框架。 cellForRowAt
中有一行可以取消注释以清除颜色。
使用您的设置/明文方法的结果:
并使用约束方法: