多行适合宽度的 UILabel 支持每行的最大字体大小和流畅的动画答案

【问题标题】：Multiline fit-to width UILabel supporting max font size per line and slick animations多行适合宽度的 UILabel 支持每行的最大字体大小和流畅的动画
【发布时间】：2017-08-30 10:30:24
【问题描述】：

第一次在这里发帖。我正在研究如何从 adobe 重新创建 Spark Post 应用程序中的这个超级漂亮的文本容器。

图片： https://i.stack.imgur.com/6auPa.png

视频： https://www.youtube.com/watch?v=SfvkreOo3V0&feature=youtu.be

我已经查看了其他答案，深入探讨了如何通过迭代不同的大小直到达到更合适的大小来计算容器的最大字体大小。

但如果你仔细看，情况就不同了：

正在将文本标记为单词
这些词在某种程度上表现得像容器，也许是 UIView？
字词优雅地为它的新位置设置动画
最大字体大小的计算是实时进行的！
激活特殊模式，每一行都会扩展到最大字体大小
它始终保留给定的容器大小

我很想听听一些专家对此的意见。

【问题讨论】：

标签： ios animation uiview uilabel core-text

【解决方案1】：

您好，感谢您的帮助。

如上所述，解决方案的简单部分是将文本分割成单词并将其放入框中，为此您可以使用：

-(CGSize)sizeForText:(NSString*)text withHyperLabel:(TTHyperLabel*)hyperLabel{

CGSize maxSize=CGSizeMake(MAXFLOAT, MAXFLOAT);

NSDictionary *attributes=@{
                           NSFontAttributeName: [UIFont fontWithName:hyperLabel.fontName size:100],

                           };


CGRect textRect = [text boundingRectWithSize:maxSize
                                     options:0
                                  attributes:attributes
                                     context:nil];

return textRect.size; }

棘手的部分是“排序”算法。我最终编写了自己的“流体文本容器”算法，它似乎与 spark 的版本非常接近 . https://www.youtube.com/watch?v=yM13PSLW6Fg&feature=youtu.be

要点是将内盒视为倒入容器中的液体。如果有任何兴趣，我可能会在以后开源它。告诉我！

谢谢！

【讨论】：

【解决方案2】：

我认为您可以通过以下步骤解决它

将文本分解成单词。
根据矩形宽度和高度查找每个 Word 的字体大小，并字符数。
根据计算高度为每个单词创建标签。

如果你每次矩形宽度高度改变时都这样做，我认为它看起来像动画。

【讨论】：

感谢@JasmeetKaur，它强化了我最初的直觉，它似乎被分解成许多单独的 UILabel，每个单词一个。似乎不平凡的是那种“mansory”行为，特别是当每条线扩展到其最大尺寸时它的反应方式。所有这些结合在实时速度操作中似乎指向一个非常有价值的算法，可以如此快速地对所有这些进行排序......你认为它使用自动布局或类似的东西吗？
@TonyStark ，我认为不需要自动布局，因为您需要为每个单词动态创建一个 UILabel。每次调整 RectView 的大小都需要启动相同的算法。
@TonyStark，我还看到示例视频中有很多选项可以更改文本，最后一个似乎每个单词都有一个标签。但是其他对齐选项可以通过单个标签来完成。