Разрабатывая приложение под Android — мы встроили в продукт свой мессенджер и решили, что стандартные emoji в андроиде — это преступление против дизайна.
Telegram и другие популярные мессенджеры давно показали, как должны выглядеть эмоции в чате, а Google всё ещё живёт в 2015-м с Noto Color Emoji.
Хотели просто подменить парочку 😎👩💻🙂 на свои красивые… И получили войну: курсор, который живёт своей жизнью, тофу, кернинг и полный хаос при вводе.
Эта статья — история о том, как мы прошли все круги ада и всё‑таки победили систему.
Спойлер: победили костылями.
Сегодня существует более 3600 различных emoji и их комбинаций, а также их вариаций отрисовки на разных платформах.
И вот, в нашем мессенджере в Android нас одолела тоска, глядя на это
Я не хочу умалять достоинства дизайнеров Google, о вкусах не спорят, но если вам что-то не нравится - никто не мешает сделать красивое самому.
Для начала стоит понять, что emoji уже имеют свои стандарты, и что в текстовое поле мессенджера могут вставить заранее скопированный текст, содержащий emoji.
Кроме того, современные emoji могут состоять не из одного UTF‑символа, а из нескольких, объединяясь и преобразуясь в другие с помощью Zero Width Joiner (ZWJ) — специального символа Unicode, который «склеивает» несколько эмодзи-кодов в один.
Пример:
👨👩👧👦 (семья) = 👨 (мужчина) + ZWJ + 👩 (женщина) + ZWJ + 👧 (девочка) + ZWJ + 👦 (мальчик).
В Android эмодзи устроены по тем же общим принципам, но с особенностями реализации.
Ключевое отличие — Google разработала свой собственный шрифт "Noto Color Emoji", который интегрирован глубоко в Android OS. Это означает, что любое приложение, использующее стандартные механизмы рендеринга текста, автоматически отображает эмодзи через этот системный шрифт.
Часть 2. Самое простое
Так как наш мессенджер написан на Compose — основная задача научиться выводить наши emoji, вместо стандартных. С компонентом Text всё просто: необходимо создать AnnotatedString, который найдёт emoji в тексте и через appendInlineContent подставит изображение. Для примера научимся подменять три emoji: 🙂👩💻😎
Emoji.kt
/** * Объект, который содержит информацию об обрабатываемом emoji */ data class Emoji(val emoji: String, @DrawableRes val resource: Int) /** * Список emoji, которые ��ы умеем кастомизировать */ val EMOJIS: List<Emoji> = listOf( Emoji("\ud83d\ude42", R.drawable.simple_smile), // 🙂 Emoji("\ud83d\udc69\u200d\ud83d\udcbb", R.drawable.female_engineer), // 👩💻 Emoji("\ud83d\ude0e", R.drawable.smiling_with_sunglasses) // 😎 ) /** * Генерирует регулярное выражение для поиска всех emoji из списка */ fun List<Emoji>.toRegex(): Regex { val pattern = joinToString(separator = "|") { emoji -> Regex.escape(emoji.emoji) } return Regex(pattern) } /** * Получает Emoji объект по найденному тексту emoji */ fun List<Emoji>.getEmojiByText(emojiText: String): Emoji? { return firstOrNull { it.emoji == emojiText } } /** * Находит все вхождения emoji из списка в тексте */ fun List<Emoji>.findEmojisInText(text: String): List<EmojiRange> { return toRegex().findAll(text).mapNotNull { match -> getEmojiByText(match.value)?.let { emoji -> EmojiRange(emoji, match.range) } }.toList() } data class EmojiRange( val emoji: Emoji, val range: IntRange, )
А вот и сам компонент, который умеет выводить кастомные emoji.
TextWithCustomEmoji.kt
@Composable fun TextWithCustomEmoji( text: String, modifier: Modifier = Modifier, emojis: List<Emoji> = EMOJIS ) { val emojiRanges = emojis.findEmojisInText(text) val annotatedString = buildAnnotatedString { var lastIndex = 0 emojiRanges.forEach { emojiRange -> append(text.substring(lastIndex, emojiRange.range.first)) appendInlineContent( id = "emoji_${emojiRange.range.first}", alternateText = emojiRange.emoji.emoji ) lastIndex = emojiRange.range.last + 1 } if (lastIndex < text.length) { append(text.substring(lastIndex)) } } val inlineContent = emojiRanges.associate { emojiRange -> "emoji_${emojiRange.range.first}" to InlineTextContent( placeholder = Placeholder( width = 20.sp, height = 20.sp, placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter ) ) { Image( painter = painterResource(id = emojiRange.emoji.resource), contentDescription = emojiRange.emoji.emoji ) } } Text( text = annotatedString, inlineContent = inlineContent, modifier = modifier ) }
Тут кажется все довольно понятно. Emoji, которые мы умеем кастомизировать - будут заменены на наши drawable изображения:
Отлично, отображать текст мы научились, а что на счёт ввода?
Часть 3. Экспериментальная
Задача:
Преобразовывать вводимые emoji сразу в кастомные.
BasicTextField дает нам decorationBox, которым можно “украсить” вводимый текст. Это Composable функция, в которую входным параметром передается innerTextField, который сам также является Composable функцией, на которую мы уже повлиять не можем. Нам дают возможность, добавить leadIcons или оформить вводимый текст в рамку, но вот с самим полем ввода сделать ничего нельзя. Проблема еще и в том, что innerTextField – управляет курсором. И если мы его уберем, то придется отрисовывать и обрабатывать действия курсора. А вот это может превратиться уже в очень большую задачу.
Решение:
Сделать текст в innerTextField прозрачным (через стили), при этом сохранив поведение курсора. Поверх него наложить Text, который умеет отображать кастомные emoji.
TextFieldWithCustomEmoji.kt
BasicTextField( value = value, onValueChange = onValueChange, textStyle = textStyle.copy(color = Color.Transparent), // Делаем весь текст прозрачным decorationBox = { innerTextField -> TextFieldDefaults.DecorationBox( value = value, innerTextField = { Box { // Прозрачное поле для ввода и курсора innerTextField() // А поверх обычный Text, который умеет отображать кастомные emoji DisplayTextWithEmoji( value = AnnotatedString(value), textStyle = textStyle ) } } ) } )
DisplayTextWithEmoji, отображающий наши emoji
DisplayTextWithEmoji.kt
@Composable private fun DisplayTextWithEmoji( value: AnnotatedString, textStyle: TextStyle, ) { val textMeasurer = rememberTextMeasurer() val density = LocalDensity.current val emojiRanges = EMOJIS.findEmojisInText(value.text) val annotatedString = buildAnnotatedString { var lastIndex = 0 emojiRanges.forEach { emojiRange -> append(value.text.substring(lastIndex, emojiRange.range.first)) appendInlineContent( id = "emoji_${emojiRange.range.first}", alternateText = emojiRange.emoji.emoji ) lastIndex = emojiRange.range.last + 1 } if (lastIndex < value.text.length) { append(value.text.substring(lastIndex)) } } val inlineContent = emojiRanges.associate { emojiRange -> val originalEmojiMeasurement = textMeasurer.measure( text = AnnotatedString(emojiRange.emoji.emoji), style = textStyle ) val widthSp = with(density) { originalEmojiMeasurement.size.width.toFloat().toDp().toSp() } val heightSp = with(density) { originalEmojiMeasurement.size.height.toFloat().toDp().toSp() } "emoji_${emojiRange.range.first}" to InlineTextContent( placeholder = Placeholder( width = widthSp, height = heightSp, placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter ) ) { Image( painter = painterResource(id = emojiRange.emoji.resource), contentDescription = emojiRange.emoji.emoji, modifier = Modifier.fillMaxSize() ) } } Text( text = annotatedString, inlineContent = inlineContent, style = textStyle ) }
Основное отличие DisplayTextWithEmoji от Text в том, что мы ищем emoji в тексте и измеряем его размер через textMeasurer, чтобы в границах оригинального emoji отрисовать наше изображение.
Представим, что одного emoji нам недостаточно для выражения наших чувств:
Однако, если вводить просто текст без улыбок, то все работает как и ожидалось:
Чтобы понять что происходит - попробуем отобразить сразу два слоя - оригинальный input и наш DisplayTextWithEmoji и чтобы было нагляднее - оригинальный текст сделаем красным, а наложенному – добавим прозрачности:
Теперь отчетливо видно, что буква “i” начинает отображаться уже перед курсором. Но как же так, ведь мы через textMeasurer измерили оригинальный emoji и ровно в эти размеры вписали наш! Были опробованы разные способы измерить оригинальные emoji, вплоть до отрисовки его на canvas. И каждый раз получалась погрешность, которую не удалось систематизировать.
Давайте еще раз вспомним - как устроены emoji в Android:
Google разработала свой собственный шрифт эмодзи под названием "Noto Color Emoji"
Т.е. каждый смайлик это элемент шрифта. А у шрифта очень много параметров, например оптический кернинг или отрицательный трекинг. И все эти свойства могут меняться в зависимости от соседних символов, размеров шрифта и еще кучи разных параметров, которые необходимы для достижения наилучшей читаемости. Поверьте, в Google очень хорошо над этим потрудились. И чтобы победить это – придется сильно постараться. Вычислять размер нескольких emoji идущих подряд, или замерять все emoji, находящиеся в строке, тоже не помогало. Единственное, что всегда имело правильный размер при подсчетах – обычные буквы. И даже если вы решите, что ваш пользователь не будет вводить много emoji – вы можете нарваться на “тофу”, символ, который не отрисован в шрифте и обычно выглядит как прямоугольник.
Если вписать наш кастомный emoji в этот символ, то он будет существенно меньше, чем остальные и будет смотреться максимально нелепо.
Кроме того, если вы захотите использовать составные emoji, которых точно нет в вашем шрифте, то ваш кастомный emoji также будет вписан либо в слишком широкую, либо в слишком узкую область.
Часть 4. Право неожиданности
Раз размеры обычных букв измеряются корректно – заменим emoji буквой, занимающем максимально большое пространство (например М). Осталось только продумать как пометить, какому символу М соответствует тот или иной emoji, а какой настоящий и к emoji не относится.
И вот оно, в compose есть AnnotationStrings! И он вполне успешно используется в TextFieldValue, а значит мы можем заменять оригинальные emoji на любой символ или их набор, рисовать поверх этого символа наш кастомный emoji, а сам символ заключить в тег с информацией об оригинальном emoji.
Тем более, что у нас уже есть emojiRange, в котором имеются все “координаты” наших emoji. Но этот вариант потерпит неудачу.
Все дело в том, что для управления текстом у вас есть входной value и тот, что вы получите на выходе в onValueChange. И вот тут кроется неочевидная подстава:
val message = TextFieldValue(annotatedString = AnnotatedString("some string with tags")) //<-- Строка с тегами BasicTextField( value = message, onValueChange = { newValue: TextFieldValue -> newValue.annotatedString // <-- Вот тут вы получите строку без тегов } )
Мы нашли все emoji в тексте, заменили их на маркер M, тегами указали, что теперь эта конкретная М является emoji с кодом "\ud83d\udc69\u200d\ud83d\udcbb" и как только пользователь изменит строку - вы потеряете всю служебную информацию о заменах и получите только М в тех местах, где должны быть смайлы. Все дело в том, что под капотом onValueChange преобразует ваш value в String, произведет изменения и затем вернет этот String заново, обернутый в чистый AnnotatedString.
Часть 5. Костыльная
Делаем ход конем. AnnotationString со всеми тегами, которые попадают в value для TextField, там и сохраняются. AnnotationString отображается со всеми тегами так, как и положено. Значит все, что нам нужно сделать - это добиться того, чтобы оригинальные emoji в тексте вообще не занимали пространство, при этом перед ними добавим нашу букву М, на которую будем накладывать наш кастомный emoji. А чтобы нашу букву отличать от обычных М - сразу после нее добавим служебный непечатаемый символ для того, чтобы при передаче текста “вверх” по иерархии – возвращать его в обычном виде, без служебной информации.
Напишем функции расширения, которые будут добавлять и удалять маркеры к оригинальному тексту, которые будут устанавливать размер текста для оригинальных emoji в 0.sp, а перед ними добавлять и удалять наш маркер.
А для функции DisplayTextWithEmoji укажем, что теперь мы измеряем размер маркера, а не оригинального emoji:
textMeasurer.measure( text = MARKER.toString(), style = textStyle )
Заключение
Мы прошли весь путь: от наивной веры в textMeasurer и InlineTextContent до полного осознания, что Noto Color Emoji — это шрифт с кернингом, оптическими компенсациями и злым умыслом Google.
Пробовали всё: измерять на Canvas, использовать Annotation, бороться с тофу и составными эмодзи.
В итоге победил самый честный Android-костыль — замена эмодзи на маркер и overlay поверх. Да, это костыль. Но он:
решает проблему курсора раз и навсегда
работает с любыми составными emoji
при этом работает с родными emoji
легко расширяется под сотни кастомных изображений
уже живёт в нашем продакшене
Всё, что осталось за рамками этой статьи (maxLines/maxLines, поиск в отдельном потоке, кэширование, копирование текста без маркеров, анимации, RTL, доступность) — это уже приятные улучшения, которые каждый может допилить под свои нужды.
Главная боль — непредсказуемый размер системных эмодзи при вводе — решена. Остальное гуглится за вечер.
Полный рабочий код лежит на GitHub (форкайте, улучшайте, кидайте PR — я буду рад)
Зато теперь у нас самые красивые 😎 в чате, и можем себе позволить колобка, бьющегося о стену ;-)
Спасибо, что дочитали до конца.
Надеюсь, ваш курсор больше не болит.
