Постановка задачи

Дано: многострочный текст.
Найти: красиво оформленный фон.

«Да это же на часок», — подумал я. — Нужно всего лишь поставить backgroundColor в attributedText». Но этого оказалось недостаточно. Дело в том, что стандартное выделение — это закрашенный прямоугольник. Некрасиво. Решение — нужен кастом! Тернистый путь его создания натолкнул меня на мысль описать процесс, дабы будущим поколениям не пришлось столько страдать. Заинтересовавшихся прошу под кат.

Принятие

Первым действием было классическое обращение в интернет с вопросом правильной реализации. В ответ нашлось немного предложений. В самых адекватных все сходилось к переопределению метода fillBackgroundRectArray. В обычной жизни он отвечает за покраску текста при задействовании свойства attributedText, упомянутого выше. Чтобы посмотреть, что это за зверь, я попробовал готовое решение в надежде, что задача все-таки на пару часов. Не получилось. Решение творило что попало.

Документация — наше все

Решив больше так не делать, я обратился к документации. Отсюда стало понятно, что UITextView — это простой наследник UIScrollView для текста, которым рулят три товарища:

NSTextStorage — по сути обертка над NSMutableAtributedString, нужен для хранения текста и его атрибутов;
NSTextContainer — NSObject, отвечающий за геометрическую фигуру, в которой представлен текст. По умолчанию это прямоугольник, закастомить можно что угодно;
NSLayoutManager — управляет первыми двумя: берет текст, ставит отступы, делит на абзацы и в том числе отвечает за необходимую нам закраску.

Алгоритмы — это круто

В итоге задача сводится к созданию кастомного NSLayoutManadger’a и переопределению в нем нужного метода.

class SelectionLayoutManager: NSLayoutManager {
    
override func fillBackgroundRectArray(_ rectArray: UnsafePointer<CGRect>, count rectCount: Int, forCharacterRange charRange: NSRange, color: UIColor) {
	
}

В основной реализации fillBackgroundRectArray получает прямоугольники слов и закрашивает их. Так как предоставляемые фигуры, как правило, являются отдельными частями одной строки со стыком где попало, от них пришлось отказаться. Отсюда подзадача раз: определить правильные прямоугольники, которые начинаются в начале линии и неразрывны до ее конца.

Метод, разрешающий эту задачу, представляет собой следующий алгоритм: он проходит в цикле по словам абзаца и проверяет, вместится ли в одну линию строка, если к ней добавить следующее слово? Если нет, то это отдельная полная строка, переходим на следующую. Если да — берём следующее слово и проверяем условие снова. Да, реализация крайне проста, была задумка сделать рекурсивный метод, но руки пока не дошли. В комментарии прошу ваши оптимизированные варианты.

private func detectLines(from string: String, width: CGFloat, font: UIFont) -> [String] {
    var strings: [String] = []
    var cumulativeString = ""
    let words = string.components(separatedBy: CharacterSet.whitespaces)
    
    for word in words {
      let checkingString = cumulativeString + word
      if checkingString.size(withFont: font).width < width {
        cumulativeString.append(word)
      } else {
        if cumulativeString.isNotEmpty {
          strings.append(cumulativeString)
        }
        
        if word.size(withFont: font).width < width {
          cumulativeString = word
        } else {
          var stringsFromWord: [String] = []
          var handlingWord = word
          
          while handlingWord.isNotEmpty {
            let fullFillString = detectFullFillString(from: handlingWord, width: width, font: font)
            stringsFromWord.append(fullFillString)
            handlingWord = word.replacingOccurrences(of: stringsFromWord.reduce("") { $0 + $1 }, with: "")
          }
          
          stringsFromWord.removeLast()
          strings.append(contentsOf: stringsFromWord)
          let remainString = word.replacingOccurrences(of: stringsFromWord.reduce("") { $0 + $1 }, with: "")
          cumulativeString = remainString
        }
      }
      
    }
    
    if cumulativeString.isNotEmpty {
      strings.append(cumulativeString)
    }
    
    return strings
  }

Стоит отметить особый случай слов, которые сами по себе в одну линию не помещаются. UITextView работает с ними очень просто — перенос на следующую строку той части, которая не вошла. Дублируем данную логику в отдельном методе с тем же подходом последовательного прохода, но в этом случае по символам. Что вместилось: полная строка, остальное — либо тоже полная строка, в случае очень длинного слова, либо просто новое слово на новой строке.

private func detectFullFillString(from word: String, width: CGFloat, font: UIFont) -> String {
    var string = ""
    
    for character in word {
      let checkingString = string.appending(String(character))
      if checkingString.size(withFont: font).width > width {
        break
      } else {
        string.append(contentsOf: String(character))
      }
    }
    
    return string
  }

В результате работы метода detectLines(from:width:font:) получаем массив строк, правильно поделённых по линиям. Далее из метода frames(for lines:width:font) получаем массив координат и размеров линий.

private func frames(for lines: [String], width: CGFloat, font: UIFont) -> [CGRect] {
    var rects: [CGRect] = []
    let stringsSizes = lines.map { $0.size(withFont: font) }
    stringsSizes.forEach {
      let rect = CGRect(origin: CGPoint(x: (width - $0.width) / 2,
                                        y: $0.height * CGFloat(rects.count)),
                        size: $0)
      rects.append(rect)
    }
    
    return rects
  }

Наводим красоту

Подзадача номер два: закрасить прямоугольники. Под понятием «красиво» предполагалось закрашивание выбранным цветом прямоугольника со скруглением углов. Решение: отрисовка дополнительного слоя по заданным координатам в контексте с использованием UIBezierPath. Чтобы стыки смотрелись лучше, не будем закруглять края прямоугольника, который меньше по ширине. Метод прост: проходим по координатам каждого прямоугольника и рисуем контур.

private func path(from rects: [CGRect], cornerRadius: CGFloat, horizontalInset: CGFloat) -> CGPath {
    let path = CGMutablePath()
    
    rects.enumerated().forEach { (index, rect) in
      
      let hasPrevious = index > 0
      let isPreviousWider = hasPrevious ? rects[index - 1].width >= rect.width || abs(rects[index - 1].width - rect.width) < 5 : false
      
      let hasNext = index != rects.count - 1
      let isNextWider = hasNext ? rects[index + 1].width >= rect.width || abs(rects[index + 1].width - rect.width) < 5 : false
      
      path.move(to: CGPoint(x: rect.minX - horizontalInset + (isPreviousWider ? 0 : cornerRadius),
                            y: rect.minY))
      //      top
      path.addLine(to: CGPoint(x: rect.maxX + horizontalInset - (isPreviousWider ? 0 : cornerRadius),
                               y: rect.minY))
      
      if isPreviousWider == false {
        path.addQuadCurve(to: CGPoint(x: rect.maxX + horizontalInset,
                                      y: rect.minY + cornerRadius),
                          control: CGPoint(x: rect.maxX + horizontalInset,
                                           y: rect.minY))
      }
      
      //      right
      path.addLine(to: CGPoint(x: rect.maxX + horizontalInset,
                               y: rect.maxY - (isNextWider ? 0 : cornerRadius)))
      
      if isNextWider == false {
        path.addQuadCurve(to: CGPoint(x: rect.maxX + horizontalInset - cornerRadius,
                                      y: rect.maxY),
                          control: CGPoint(x: rect.maxX + horizontalInset,
                                           y: rect.maxY))
      }
      
      //      bottom
      path.addLine(to: CGPoint(x: rect.minX - horizontalInset + (isNextWider ? 0 : cornerRadius),
                               y: rect.maxY))
      
      if isNextWider == false {
        path.addQuadCurve(to: CGPoint(x: rect.minX - horizontalInset,
                                      y: rect.maxY - cornerRadius),
                          control: CGPoint(x: rect.minX - horizontalInset,
                                           y: rect.maxY))
      }
      
      //      left
      path.addLine(to: CGPoint(x: rect.minX - horizontalInset,
                               y: rect.minY + (isPreviousWider ? 0 : cornerRadius)))
      
      if isPreviousWider == false {
        path.addQuadCurve(to: CGPoint(x: rect.minX - horizontalInset + cornerRadius,
                                      y: rect.minY),
                          control: CGPoint(x: rect.minX - horizontalInset,
                                           y: rect.minY))
      }
      
      path.closeSubpath()
      
    }
    
    return path
  }

Далее в методе draw(_:color:) заливаем контур.

private func draw(_ path: CGPath, color: UIColor) {
    color.set()
    if let ctx = UIGraphicsGetCurrentContext() {
      ctx.setAllowsAntialiasing(true)
      ctx.setShouldAntialias(true)
      
      ctx.addPath(path)
      ctx.drawPath(using: .fillStroke)
    }
  }

Полный код метода fillBackgroundRectArray(_:count:forCharacterRange:color:)

override func fillBackgroundRectArray(_ rectArray: UnsafePointer<CGRect>, count rectCount: Int, forCharacterRange charRange: NSRange, color: UIColor) {
    let cornerRadius: CGFloat = 8
    let horizontalInset: CGFloat = 5
    
    guard
      let font = (textStorage?.attributes(at: 0, effectiveRange: nil).first { $0.key == .font })?.value as? UIFont,
      let textContainerWidth = textContainers.first?.size.width
      else { return }
    
    /// Divide the text into paragraphs
    let lines = paragraphs(from: textStorage?.string ?? "")
    
    /// Divide the paragraphs into separate lines
    let strings = detectLines(from: lines, width: textContainerWidth, font: font)
    
    /// Get rects from the lines
    let rects = frames(for: strings, width: textContainerWidth, font: font)
    
    /// Get a contour by rects
    let rectsPath = path(from: rects, cornerRadius: cornerRadius, horizontalInset: horizontalInset)
    
    /// Fill it
    draw(rectsPath, color: color)
  }

Запускаем. Проверяем. Работает на отлично.

В качестве завершения: кастом — это иногда сложно и тошно, но как же красиво, когда работает как нужно. Творите кастом, это здорово.

Полный код можно посмотреть тут SelectionLayoutManager.

Ссылки

Как научить UITextView красиво выделяться