iOS Instagram 标签文本布局?它是如何完成的? [英] iOS Instagram Tags Text Layout? How Is It Done?

问题描述

我一直很好奇 instagram 如何让它的标签流畅地布局，并想知道这个功能背后的原因是什么?对我来说，似乎他们正在使用 UIButton 并且只是逐行计算按钮的位置?那正确吗?或者有没有更简单的方法来做到这一点，而不必手动计算每个标签的逐行/或并排放置，因为多个标签的宽度适合在一起?

I've always been curious how instagram gets it's tags to layout fluidly and wanted to know what goes behind this functionality? To me, it seems like they're using UIButton's and just calculating placement of the buttons line by line? Is that right? Or is there a simpler method of doing it without having to manual calculate the placement of each tag line by line / or side by side given that multiple tag's width's fit together?

或者，他们使用 NSAttributedStrings 吗?

Or, are they using NSAttributedStrings?

有什么想法吗?

这是我所指的布局示例.

Here's an example of the layout I'm referring to.

推荐答案

以下是使用 UITextView 和 NSAttributedString 的简化方法:

Here is a simplified way to do it using UITextView and NSAttributedString:

1. 使用正则表达式获取链接的字符范围.
2. 为匹配的范围添加链接样式.
3. 将自定义属性添加到引用要执行的点击操作的范围.
4. 触摸时，如果字符索引在匹配范围内，请更改链接格式以突出显示它并运行相关的点击操作.

如何在 iOS7 中获取字符索引:

How to get index of character at location in iOS7:

- (NSUInteger) getCharIndexAt: (CGPoint) location
{
    NSLayoutManager *layoutManager = self.layoutManager;
    NSUInteger characterIndex = NSNotFound;
    characterIndex = [layoutManager characterIndexForPoint:location inTextContainer:self.textContainer fractionOfDistanceBetweenInsertionPoints:NULL];

    return characterIndex;
}

另请查看 WWDC 2013 对 TextKit 演示的介绍

Also check out WWDC 2013 intro to TextKit Demo

ios7 文本实用程序

这篇关于iOS Instagram 标签文本布局?它是如何完成的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！