Отображение текста в Android01.08.2019 10:20

textView.setText(R.string.title)

Но если требуется что-то более сложное, например, смена шрифта, то html уже не получится использовать. Решением будет использовать специальный тег . Этот тег позволяет определить любую пару ключ-значение в xml-файле. Когда мы вытащим строку из ресурсов, эти теги автоматически сконвертируются в span«ы Annotation, расставленными по тексту с соответствующими ключами и значениями. После этого можно распарсить список аннотаций в тексте и применить нужные span«ы.

Предположим, нам надо поменять шрифт при помощи CustomTypefaceSpan.

Добавим тег и определим для него ключ «font» и значение — тип шрифта, который мы хотим использовать — «title_emphasis»:

Best practices for text in Android


Texto en Android: mejores prácticas

Вытащим строку из ресурсов, найдем аннотации с ключом «font» и расставим span«ы:

// Вытаскиваем из ресурсов текст как SpannedString, чтобы найти в нем span’ы
val titleText = getText(R.string.title) as SpannedString

// Получаем все аннотации
val annotations = titleText.getSpans(0, titleText.length, Annotation::class.java)

// Делаем копию строки как SpannableString
// теперь можно менять разметку текста
val spannableString = SpannableString(titleText)

// проходим по всем аннотациям
for (annotation in annotations) {  

  // находим аннотации с ключом "font"
  if (annotation.key == "font") {
    val fontName = annotation.value

    // проверяем значение аннотации, чтобы установить нужный шрифт
    if (fontName == "title_emphasis") {
      val typeface = getFontCompat(R.font.permanent_marker)
      // устанавливаем span в тот же диапазон, что и аннотации
      spannableString.setSpan(
        CustomTypefaceSpan(typeface),
        titleText.getSpanStart(annotation),
        titleText.getSpanEnd(annotation),
        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
      )
    }
  }
}

styledText.text = spannableString

Выше упоминалось, что span«ы не из Android-фреймворка не могут имплементировать Parcelable и передаваться через Intent. Но это не относится к аннотациям, которые имплементируют Parcelable. Так что аннотированную строку можно передать через Intent и распарсить точно таким же образом, расставив свои span«ы.

TextView умеет отображать не только текст, но и картинки. Также можно задавать различные отступы перед текстом. Под капотом это работает так, что TextView создает дочерний класс Layout, ответственный непосредственно за отображение текста. Это абстрактный класс, который имеет три реализации, напрямую с ними обычно не приходится работать, если не писать свой элемент управления:

• BoringLayout используется для простых текстов, не поддерживает переносы строк, RTL и другие вещи, но при этом является самым легковесным. TextView использует его, если текст удовлетворяет всем ограничениям.
• StaticLayout используется в TextView для остальных случаев.
• DynamicLayout используется для изменяемого текста в EditText.

У Layout есть много методов, которые позволяют узнать различные параметры отображаемого текста: координаты строк, baseline, координаты начала и конца текста в строке и т.д. (подробнее можно посмотреть в документации)

Такие методы могут быть очень полезны. Например, некоторые разработчики сталкиваются с задачей выделения части текста в прямоугольники с закругленными углами, и пытаются искать ее решение через span«ы, которые не применимы в решении этой проблемы.

Зато на помощь могут прийти методы класса Layout. Вот примерное решение:

При помощи аннотаций выделяем слова, которые должны быть обведены в прямоугольники.

Затем создаем 4 drawable ресурса для всех случаев переноса текста, который должен быть заключен в прямоугольники:

Далее находим нужные нам аннотации в тексте, как это описывалось выше. Теперь у нас есть индексы начала и конца такой аннотации. Через методы Layout можно узнать номер строки, на которой начинается проаннотированный текст, и на которой заканчивается:

val startLine = layout.getLineForOffset(spanStartIndex)
val endLine = layout.getLineForOffset(spanEndIndex)

Далее придется нарисовать один или несколько прямоугольников. Рассмотрим простой случай, когда проаннотированная часть текста оказалась на одной строке, тогда нам понадобится всего один прямоугольник с четырьмя закругленными углами. Определим его координаты и нарисуем:

...

if (startLine == endLine) {
  val lineTop = layout.getLineTop(startLine) // координаты верха строки
  val lineBottom = layout.getLineBottom(startLine) // координаты низа строки
  val startCoor = layout.getPrimaryHorizontal(spanStartIndex).toInt() // координаты начала прямоугольника
  val endCoor = layout.getPrimaryHorizontal(spanEndIndex).toInt() // координаты конца прямоугольника

  // Рисуем прямоугольник
  drawable.setBounds(startCoor, lineTop, endCoor, lineBottom)
  drawable.draw(canvas)

...

Как видно из этого примера, Layout хранит очень много полезной информации по отображаемому тексту, которая может помочь в реализации разных нестандартных задач.

TextView, как и любая View, при отображении проходит через три фазы: onMeasure(), onLayout() и onDraw(). При этом onMeasure() занимает больше всего времени, в отличие от двух других методов: в этот момент пересоздается класс Layout и производится расчет размеров текста. Так что изменение размера текста (например, смена шрифта) влечет за собой много работы. Изменение же цвета текста будет более легковесным, потому что потребует только вызова onDraw(). Как упоминалось выше, в системе есть глобальный кэш слов с рассчитанными размерами. Если слово уже есть в кэше, то повторный вызов onMeasure() для него займет 11–16% от времени, которое потребовалось бы для полного расчета.

Ускорение показа текста

В 2015 году разработчики Instagram ускорили показ комментариев к фотографиям, используя глобальный кэш. Идея была в том, чтобы виртуально рисовать текст до показа его на экране, таким образом «разогрев» системный кэш. Когда подходила очередь показа текста, пользователь видел его гораздо быстрее, так как текст уже был измерен и лежал в кэше.

Начиная с Android P (28) разработчики Google добавили в API возможность выполнить фазу измерения размера текста заранее в фоновом потоке — PrecomputedText (и бэкпорт для API начиная с Android I (14) — PrecomputedTextCompat). С использованием нового API в фоновом потоке будет выполнено 90% работы.

Пример:

// UI thread

val params: PrecomputedText.Params = textView.getTextMetricsParams()
val ref = WeakReference(textView)

executor.execute {

  // background thread
  val text = PrecomputedText.create("Hello", params)
  val textView = ref.get()
   textView?.post {

    // UI thread
    val textView = ref.get()
    textView?.text = text
  }
}

Показ большого текста

Если надо показать большой текст, то не стоит его сразу передавать в TextView. Иначе приложение может перестать плавно работать или вовсе начать зависать, так как будет делать много работы на главном потоке, чтобы показать огромный текст, который пользователь, возможно, даже и не прокрутит до конца. Решением будет разбиение текста на части (например, параграфы) и показ отдельных частей в RecyclerView. Для еще большего ускорения можно заранее рассчитывать размер блоков текста, используя PrecomputedText.

Для облегчения встраивания PrecomputedText в RecyclerView разработчики Google сделали специальные методы PrecomputedTextCompat.getTextFuture() и AppCompatTextView.setTextFuture():

fun onBindViewHolder(vh: ViewHolder, position: Int) {

  val data = getData(position)
  vh.textView.setTextSize(...)
  vh.textView.setFontVariationSettings(...)

  // запускаем расчет заранее
  val future = PrecomputedTextCompat.getTextFuture(
    data.text, vh.textView.getTextMetricsParamsCompat(), myExecutor
  )

  // передадим future в TextView, который будет ждать результат до onMeasure()
  vh.textView.setTextFuture(future)
}

Так как RecyclerView во время скролла создает новые элементы, которые еще не видны пользователю, то такое решение будет иметь достаточно времени для выполнения работы в фоне до того, как элемент будет показан пользователю.

Следует помнить, что после вызова метода getTextFuture() нельзя менять стиль текста (например, поставить новый шрифт), в противном случае произойдет исключение, так как значения, с которыми вызывался getTextFuture(), не будут совпадать с теми, которые окажутся в TextView.

Что нужно знать, когда устанавливаешь текст в TextView

При вызове метода TextView.setText() на самом деле внутри создается копия строки:

if (type == SPANNABLE || movementMethod != null) {
  text = spannableFactory.newSpannable(spannable) // Копирование
} else {
  text = new SpannedString(spannable) // Копирование
}

То есть если установить текст со span«ами в TextView, а затем попытаться изменить переданный в setText() объект, то в отображении ничего не произойдет.

Как видно из кода, новый объект создается при помощи фабрики. В TextView имеется возможность заменить фабрику, используемую по-умолчанию, на свою реализацию. Это может быть полезно, чтобы не делать лишних копирований строк. Для этого пишем фабрику, возвращающую тот же объект, и устанавливаем ее в TextView через сеттер spannableFactory:

class MySpannableFactory : Spannable.Factory() {
  override fun newSpannable(source: CharSequence): Spannable {
    return source as? Spannable ?: super.newSpannable(source)
  }
}

textView.spannableFactory = MySpannableFactory()

При установке текста надо не забывать делать вызов textView.setText(spannable, BufferType.SPANNABLE), чтобы происходило обращение к нашей фабрике.

Разработчики Google советуют использовать это решение для отображения текста со span«ами в RecyclerView, чтобы уменьшить потребление ресурсов нашим приложением.

Если текст уже установлен в TextView, и надо добавить новый span, то совсем не нужно делать повторный вызов setText(). Надо просто взять текст из TextView и добавить в него новый span. TextView автоматически слушает spannable-строку на добавление новых span«ов, и перерисовывается:

val spannable = textView.getText() as Spannable
val span = CustomTypefaceSpan(span)

spannable.setSpan(span, ...)

Если же у нас есть span, который стоит в тексте у TextView, то можно обновить значения его параметров и заставить TextView перерисоваться. Если новое изменение не затрагивает размер текста, достаточно вызвать invalidate(), в противном случае — requestLayout():

val spannable = textView.getText() as Spannable
val span = CustomTypefaceSpan(span)

spannable.setSpan(span, ...)

span.setTypeface(anotherTypeface)

textView.requestLayout() // re-measure and re-draw

// or

textView.invalidate() // re-draw

Использование autoLink

В TextView есть возможность автоматического обнаружения ссылок. Для ее включения достаточно указать в разметке атрибут autoLink. При значении autoLink=”web” TextView во время установки нового текста найдет в нем все URL через регулярное выражение и установит на найденные диапазоны символов URLSpan. Вот примерный код, как это происходит в SDK при вызове setText():

spannable = new SpannableString(string);
Matcher m = pattern.matcher(text);

while (...) { // проходимся по всем найденным ссылкам
  String utl = …
  URLSpan span = new URLSpan(url);
  spannable.setSpan(span, ...);
}

Так как это происходит на UI потоке, то не стоит использовать autoLink=”web” внутри элементов RecyclerView. В таком случае лучше вынести определение ссылок в фоновый поток. И здесь на помощь нам приходит класс LinkifyCompat:

// Вытаскиваем ссылки, когда подготавливаем данные к показу на background thread

val spannable = SpannableString(string)
LinkifyCompat.addLinks(spannable, Linkify.WEB_URLS)

// В адаптере RecyclerView
override fun onBindViewHolder(holder: ViewHolder, position: Int) {

  holder.textView.setText(spannable, BufferType.SPANNABLE)

  // ...
}

У autoLink еще есть возможность указать значение map — распознавание почтовых адресов (оно же будет включено при значении all). Эту возможность лучше вообще никогда не использовать. Проблема в том, что под капотом там будет создание экземпляра WebView, через который будет осуществляться поиск адреса! В исходном коде SDK в методе Linkify.gatherMapLinks() можно увидеть такую строку, этот код выполняется на главном потоке:

while ((address = WebView.findAddress(string)) != null) {
        ...
}

А внутри WebView стоит TODO от разработчиков SDK:

public static String findAddress(String addr) {

  // TODO: Rewrite this in Java so it is not needed to start up chromium
  // Could also be deprecated

  return getFactory().getStatics().findAddress(addr);
}

Но что же тогда использовать? Решением будет новая технология Smart Linkify, к сожалению доступная только начиная с Android P (28), которая работает на основе нейронных сетей и распознает различную информацию, в том числе и почтовые адреса. Вот небольшой пример использования:

// UI thread

val text: Spannable = …
val request = TextLinks.Request.Builder(text)
val ref = WeakReference(textView)

executor.execute {

  // background thread
  TextClassifier.generateLinks(request).apply(text)

  val textView = ref.get()
  textView?.post {
    // UI thread
    val textView = ref.get()
    textView?.text = text
  }
}

В отличие старого Linkify, распознанные адреса не будут простыми ссылками. Над адресами при нажатии будет отображаться контекстный toolbar с возможными действиями, например показ адреса на Google карте.

Технология Smart Linkify способна распознавать различные данные: номера телефонов, авиарейсы и многое другое.

Начиная с Android P (28), появился новый элемент управления — Magnifier, который показывает увеличенные символы при выделении текста. С его помощью пользователю гораздо проще установить курсор на нужную позицию.

По умолчанию он работает в TextView, EditText и WebView, но при желании его можно использовать при написании своих элементов пользовательского интерфейса: его API достаточно прост.

В данной статье были опущены многие нововведения последних версий Android и смежные темы, заслуживающие отдельных статей, например:

• работа со стилями и темами при отображении текста
• работа со шрифтами
• работа с классами, производными от TextView (например, EditText)

Если кому-то интересна одна из этих тем, рекомендую посмотреть презентацию с прошедшего Google I/O'19 «Best Practices for Using Text in Android».

Статьи

Доклады

© Habrahabr.ru