ios - NSAttributedString 背景颜色和圆角

Question

我对自定义的圆角和文本背景颜色有疑问UIView。

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

我认为使用的方法是：

• 使用 Core Text 来运行字形。
• 检查高光范围。
• 如果当前运行在突出显示范围内，请在绘制字形运行之前绘制一个带圆角和所需填充颜色的背景矩形。
• 绘制字形运行。

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

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

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

Answer 1

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

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

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

基本上，这意味着您可以添加任何键值对，只要它是您可以添加到NSDictionary实例中的东西。如果系统不能识别该属性，它什么也不做。作为开发人员，您可以为该属性提供自定义实现和行为。

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

CoreText对于接下来的步骤，您需要对如何完成工作有一个基本的了解。查看Apple 的核心文本编程指南以了解什么是框架/行/字形运行/字形等。

所以，这里是步骤：

1. 创建一个自定义 UIView 子类。
2. 有一个接受NSAttributedString.
3. CTFramesetter使用该NSAttributedString实例创建一个。
4. 覆盖drawRect:方法
5. 从. CTFrame_CTFramesetter
   1. 您将需要提供一个CGPathRef来创建CTFrame. 使其CGPath与您希望在其中绘制文本的框架相同。
6. 获取当前图形上下文并翻转文本坐标系。
7. 使用，获取您刚刚创建CTFrameGetLines(...)的所有行。CTFrame
8. 使用CTFrameGetLineOrigins(...)，获取CTFrame.
9. 为...for loop数组中的每一行开始一个-CTLine
10. 将文本位置设置为CTLineusing的开头CGContextSetTextPosition(...)。
11. 使用从. CTLineGetGlyphRuns(...)_CTRunRefCTLine
12. 开始另一个for loop- 对于CTRun...数组中的每个 glyphRun
13. 使用 获取运行范围CTRunGetStringRange(...)。
14. 使用CTRunGetTypographicBounds(...).
15. 使用 获取运行的 x 偏移量CTLineGetOffsetForStringIndex(...)。
16. runBounds使用上述函数返回的值 计算边界矩形（我们称之为它）。
    1. 请记住 -CTRunGetTypographicBounds(...)需要指向变量的指针来存储文本的“上升”和“下降”。您需要添加这些以获得运行高度。
17. 使用 获取运行的属性CTRunGetAttributes(...)。
18. 检查属性字典是否包含您的属性。
19. 如果您的属性存在，请计算需要绘制的矩形的边界。
20. 核心文本在基线处有行起点。我们需要从文本的最低点绘制到最高点。因此，我们需要调整下降。
21. runBounds因此，从我们在步骤 16 ( )中计算的边界矩形中减去下降。
22. 现在我们有了runBounds，我们知道要绘制哪个区域 - 现在我们可以使用任何CoreGraphis/UIBezierPath方法来绘制和填充具有特定圆角的矩形。
    1. UIBezierPath有一个方便的类方法bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:，可以让你绕过特定的角落。您可以在第二个参数中使用位掩码指定角点。
23. 现在您已经填充了矩形，只需使用CTRunDraw(...).
24. 庆祝创建自定义属性的胜利 - 喝啤酒或其他东西！:D

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

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

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

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

干杯!

Answer 2

只需自定义NSLayoutManager和覆盖drawUnderline(forGlyphRange:underlineType:baselineOffset:lineFragmentRect:lineFragmentGlyphRange:containerOrigin:) Apple API 文档

这个方法可以自己画下划线，Swift代码，

override func drawUnderline(forGlyphRange glyphRange: NSRange,
    underlineType underlineVal: NSUnderlineStyle,
    baselineOffset: CGFloat,
    lineFragmentRect lineRect: CGRect,
    lineFragmentGlyphRange lineGlyphRange: NSRange,
    containerOrigin: CGPoint
) {
    let firstPosition  = location(forGlyphAt: glyphRange.location).x

    let lastPosition: CGFloat

    if NSMaxRange(glyphRange) < NSMaxRange(lineGlyphRange) {
        lastPosition = location(forGlyphAt: NSMaxRange(glyphRange)).x
    } else {
        lastPosition = lineFragmentUsedRect(
            forGlyphAt: NSMaxRange(glyphRange) - 1,
            effectiveRange: nil).size.width
    }

    var lineRect = lineRect
    let height = lineRect.size.height * 3.5 / 4.0 // replace your under line height
    lineRect.origin.x += firstPosition
    lineRect.size.width = lastPosition - firstPosition
    lineRect.size.height = height

    lineRect.origin.x += containerOrigin.x
    lineRect.origin.y += containerOrigin.y

    lineRect = lineRect.integral.insetBy(dx: 0.5, dy: 0.5)

    let path = UIBezierPath(rect: lineRect)
    // let path = UIBezierPath(roundedRect: lineRect, cornerRadius: 3) 
    // set your cornerRadius
    path.fill()
}

然后构造你的NSAttributedString并添加属性.underlineStyle和.underlineColor.

addAttributes(
    [
        .foregroundColor: UIColor.white,
        .underlineStyle: NSUnderlineStyle.single.rawValue,
        .underlineColor: UIColor(red: 51 / 255.0, green: 154 / 255.0, blue: 1.0, alpha: 1.0)
    ],
    range: range
)

而已！

Answer 3

我通过检查文本片段的框架来做到这一点。在我的项目中，我需要在用户输入文本时突出显示主题标签。

class HashtagTextView: UITextView {

  let hashtagRegex = "#[-_0-9A-Za-z]+"

  private var cachedFrames: [CGRect] = []

  private var backgrounds: [UIView] = []

  override init(frame: CGRect, textContainer: NSTextContainer?) {
    super.init(frame: frame, textContainer: textContainer)
    configureView()
  }

  required init?(coder: NSCoder) {
    super.init(coder: coder)
    configureView()
  }

  override func layoutSubviews() {
    super.layoutSubviews()

    // Redraw highlighted parts if frame is changed
    textUpdated()
  }

  deinit {
    NotificationCenter.default.removeObserver(self)
  }

  @objc private func textUpdated() {
    // You can provide whatever ranges needed to be highlighted 
    let ranges = resolveHighlightedRanges()

    let frames = ranges.compactMap { frame(ofRange: $0) }.reduce([], +)

    if cachedFrames != frames {
      cachedFrames = frames

      backgrounds.forEach { $0.removeFromSuperview() }
      backgrounds = cachedFrames.map { frame in
        let background = UIView()
        background.backgroundColor = UIColor.hashtagBackground
        background.frame = frame
        background.layer.cornerRadius = 5
        insertSubview(background, at: 0)
        return background
      }
    }
  }

  /// General setup
  private func configureView() {
    NotificationCenter.default.addObserver(self, selector: #selector(textUpdated), name: UITextView.textDidChangeNotification, object: self)
  }

  /// Looks for locations of the string to be highlighted.
  /// The current case - ranges of hashtags.
  private func resolveHighlightedRanges() -> [NSRange] {
    guard text != nil, let regex = try? NSRegularExpression(pattern: hashtagRegex, options: []) else { return [] }

    let matches = regex.matches(in: text, options: [], range: NSRange(text.startIndex..<text.endIndex, in: text))
    let ranges = matches.map { $0.range }
    return ranges
  }
}

还有一个辅助扩展来确定范围的帧：

extension UITextView {
  func convertRange(_ range: NSRange) -> UITextRange? {
    let beginning = beginningOfDocument
    if let start = position(from: beginning, offset: range.location), let end = position(from: start, offset: range.length) {
      let resultRange = textRange(from: start, to: end)
      return resultRange
    } else {
      return nil
    }
  }

  func frame(ofRange range: NSRange) -> [CGRect]? {
    if let textRange = convertRange(range) {
      let rects = selectionRects(for: textRange)
      return rects.map { $0.rect }
    } else {
      return nil
    }
  }
}

结果文本视图：

Answer 4

我在@codeBearer 回答之后编写了以下代码。

import UIKit

class CustomAttributedTextView: UITextView {

   override func layoutSubviews() {
       super.layoutSubviews()
   }

   func clearForReuse() {
       setNeedsDisplay()
   }
   var lineCountUpdate: ((Bool) -> Void)?

   override func draw(_ rect: CGRect) {
       super.draw(rect)
       UIColor.clear.setFill()
       UIColor.clear.setFill()
       guard let context = UIGraphicsGetCurrentContext() else { return }
       context.textMatrix = .identity
       context.translateBy(x: 0, y: bounds.size.height)
       context.scaleBy(x: 1.0, y: -1.0)
       let path = CGMutablePath()
       let size = sizeThatFits(CGSize(width: self.frame.width, height: .greatestFiniteMagnitude))
       path.addRect(CGRect(x: 0, y: 0, width: size.width, height: size.height), transform: .identity)

       let framesetter = CTFramesetterCreateWithAttributedString(attributedText as CFAttributedString)
       let frame: CTFrame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, attributedText.length), path, nil)

       let lines: [CTLine] = frame.lines

       var origins = [CGPoint](repeating: .zero, count: lines.count)
       CTFrameGetLineOrigins(frame, CFRangeMake(0, 0), &origins)

       for lineIndex in 0..<lines.count {
           let line = lines[lineIndex]
           let runs: [CTRun] = line.ctruns
           var tagCountInOneLine = 0
           for run in runs {
               var cornerRadius: CGFloat = 3
               let attributes: NSDictionary = CTRunGetAttributes(run)
               var imgBounds: CGRect = .zero
               if let value: UIColor =  attributes.value(forKey: NSAttributedString.Key.customBackgroundColor.rawValue) as? UIColor {
                   var ascent: CGFloat = 0
                   imgBounds.size.width = CGFloat(CTRunGetTypographicBounds(run, CFRangeMake(0, 0), &ascent, nil, nil) + 4)
                   imgBounds.size.height = ascent + 6

                   let xOffset = CTLineGetOffsetForStringIndex(line, CTRunGetStringRange(run).location, nil)
                   imgBounds.origin.x = origins[lineIndex].x + xOffset + 3
                   imgBounds.origin.y = origins[lineIndex].y - 13

                   if lineIndex != 0 {
                       imgBounds.origin.y = imgBounds.origin.y - 1
                   }

                   let path = UIBezierPath(roundedRect: imgBounds, cornerRadius: cornerRadius)
                   value.setFill()
                   path.fill()
                   value.setStroke()
               }
           }
       }
   }
}

extension CTFrame {

    var lines: [CTLine] {
        let linesAO: [AnyObject] = CTFrameGetLines(self) as [AnyObject]
        guard let lines = linesAO as? [CTLine] else {
           return []
        }

       return lines
   }
}

extension CTLine {
   var ctruns: [CTRun] {
       let linesAO: [AnyObject] = CTLineGetGlyphRuns(self) as [AnyObject]
       guard let lines = linesAO as? [CTRun] else {
           return []
       }

       return lines
   }
}