ios - NSAttributedString 背景色和圆角

Question

我有一个关于自定义 UIView 的圆角和文本背景颜色的问题.

基本上，我需要在自定义 UIView 中实现这样的效果(附上图片 - 注意一侧的圆角):


我认为使用的方法是:

使用 Core Text 获取字形运行。

检查高光范围。

如果当前运行在高亮范围内，请在绘制字形运行之前绘制带圆角和所需填充颜色的背景矩形。

绘制字形运行。

但是，我不确定这是否是唯一的解决方案(或者就此而言，这是否是最有效的解决方案)。

使用 UIWebView不是一个选项，所以我必须在自定义中进行 UIView .

我的问题是，这是最好的使用方法吗，我是否在正确的轨道上？还是我错过了一些重要的事情或以错误的方式去做？

Answer 1

我设法达到了上述效果，所以我想我会发布相同的答案。

如果有人对使其更有效有任何建议，请随时贡献。我一定会把你的答案标记为正确的。 :)

为此，您需要向 NSAttributedString 添加“自定义属性”。 .

基本上，这意味着您可以添加任何键值对，只要您可以将其添加到 NSDictionary 中即可。实例。如果系统无法识别该属性，则不会执行任何操作。作为开发人员，您可以为该属性提供自定义实现和行为。

出于此答案的目的，让我们假设我添加了一个名为:@"MyRoundedBackgroundColor" 的自定义属性。值为 [UIColor greenColor] .

对于接下来的步骤，您需要基本了解 CoreText完成任务。退房 Apple's Core Text Programming Guide了解什么是框架/线/字形运行/字形等。

所以，这里是步骤:

创建自定义 UIView 子类。

拥有接受 NSAttributedString 的属性.

创建一个 CTFramesetter使用该 NSAttributedString实例。

覆盖 drawRect:方法

创建一个 CTFrame来自 CTFramesetter 的实例.

你需要给一个 CGPathRef创建 CTFrame .做那个 CGPath与您希望在其中绘制文本的框架相同。

获取当前图形上下文并翻转文本坐标系。

使用 CTFrameGetLines(...) ，获取 CTFrame 中的所有行你刚刚创建。

使用 CTFrameGetLineOrigins(...) ，获取 CTFrame 的所有线起点.

开始 for loop - 对于 CTLine 数组中的每一行...

将文本位置设置为 CTLine 的开头使用 CGContextSetTextPosition(...) .

使用 CTLineGetGlyphRuns(...)从 CTRunRef 获取所有 Glyph Runs ( CTLine ) .

开始另一个 for loop - 对于 CTRun 数组中的每个 glyphRun ...

使用 CTRunGetStringRange(...) 获取运行范围.

使用 CTRunGetTypographicBounds(...) 获取排版边界.

使用 CTLineGetOffsetForStringIndex(...) 获取运行的 x 偏移量.

使用从上述函数返回的值计算边界矩形(我们称之为 runBounds)。

记住 - CTRunGetTypographicBounds(...)需要指向变量的指针来存储文本的“上升”和“下降”。您需要添加这些以获得运行高度。

使用 CTRunGetAttributes(...) 获取运行的属性.

检查属性字典是否包含您的属性。

如果您的属性存在，请计算需要绘制的矩形的边界。

核心文本的行起点位于基线处。我们需要从文本的最低点绘制到最高点。因此，我们需要调整下降。

因此，从我们在步骤 16 中计算的边界矩形中减去下降 (runBounds)。

现在我们有了 runBounds ，我们知道我们要绘制的区域 - 现在我们可以使用任何 CoreGraphis/UIBezierPath使用特定圆角绘制和填充矩形的方法。

UIBezierPath有一个名为 bezierPathWithRoundedRect:byRoundingCorners:cornerRadii: 的便利类方法让你绕过特定的角落。您可以在第二个参数中使用位掩码指定角。

现在您已经填充了矩形，只需使用 CTRunDraw(...) 绘制字形运行即可。 .

庆祝您创建自定义属性的胜利 - 喝啤酒什么的! :D

关于检测属性范围扩展到多次运行，当第一次运行遇到该属性时，您可以获得自定义属性的整个有效范围。如果你发现你的属性最大有效范围的长度大于你的run长度，你需要在右侧画尖角(对于从左到右的脚本)。更多的数学运算也可以让您检测下一行的高光角样式。 :)

附上效果截图。顶部的盒子是标准的UITextView ，为此我设置了属性文本。底部的框是使用上述步骤实现的框。为两个 textViews 设置了相同的属性字符串。


同样，如果有比我使用过的方法更好的方法，请告诉我! :D

希望这对社区有所帮助。 :)

干杯!