Текст в социальных сетях и приложениях для обмена сообщениями

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

Работа с эмодзи

Эмодзи стали неотъемлемой частью современного общения, особенно в социальных сетях и приложениях для обмена сообщениями. Они преодолевают языковые барьеры, позволяя пользователям быстро и эффективно выражать эмоции и идеи.

Поддержка Emoji в Compose

Jetpack Compose, современный декларативный инструментарий пользовательского интерфейса Android, упрощает обработку смайлов:

  • Ввод : компонент TextField изначально поддерживает ввод эмодзи.
  • Отображение . Компонент Text » Compose правильно отображает смайлы, обеспечивая их единообразный вид на устройствах и платформах, которые предлагают поставщика загружаемых шрифтов, совместимого с emoji2, например на устройствах, работающих на сервисах Google Play .

Отображение смайлов охватывает отображение смайлов в Jetpack Compose, в том числе то, как убедиться, что ваше приложение отображает новейшие шрифты смайлов, как убедиться, что смайлы работают правильно, если ваше приложение использует и просмотры, и создание в одном и том же действии , и как устранить неполадки, когда смайлы не отображаются. не появляется, как ожидалось.

Поддержка Emoji в просмотрах

Если вы используете Android Views, библиотека AppCompat 1.4 или выше обеспечивает поддержку смайлов для подклассов платформы TextView :

Если вы создаете собственное представление , которое является прямым или косвенным подклассом TextView , расширьте реализацию AppCompat (а не реализацию платформы), чтобы получить встроенную поддержку эмодзи. В разделе «Поддержка современных смайлов» показано, как тестировать и устранять неполадки интеграции смайлов, поддерживать смайлы без AppCompat, поддерживать смайлы в пользовательских представлениях, поддерживать альтернативные шрифты или поставщиков шрифтов и многое другое.

Использование средства выбора эмодзи

Средство выбора эмодзи Jetpack — это представление Android, которое предоставляет категоризированный список смайлов, прикрепленные варианты и поддержку недавно использованных смайлов, совместимое с несколькими версиями Android и устройствами. Это простой способ повысить уровень интеграции смайлов в вашем приложении.

Начните с импорта библиотеки в build.gradle .

dependencies {
   implementation
("androidx.emoji2:emojipicker:$version")
}

Использование средства выбора эмодзи с Compose

Вы создаете средство выбора Emoji в Compose, используя компонуемый AndroidView . Этот фрагмент включает в себя прослушиватель, который сообщает, когда выбран эмодзи:

AndroidView(
    modifier
= Modifier.fillMaxSize(),
    factory
= { context ->
        val emojiPickerView
= EmojiPickerView(context)
        emojiPickerView
.setOnEmojiPickedListener(this::updateTextField)
        emojiPickerView
   
},
)

В Compose 1.7 добавлено множество новых функций в BasicTextField , включая поддержку TextFieldState , которая может находиться в вашей ViewModel :

private val emojiTextFieldState = TextFieldState()

@Composable fun EmojiTextField() {
   
BasicTextField(
        state
= emojiTextFieldState,
   
)
}

Вы можете использовать TextFieldState для вставки текста в позицию курсора или замены выделенного текста, как если бы вы вводили его в IME:

private fun insertStringAsIfTyping(textFieldState: TextFieldState, string: String) {
    textFieldState
.edit {
        replace
(selection.start, selection.end, string)
       
// clear selection on replace if necessary
       
if (hasSelection) selection = TextRange(selection.end)
   
}
}

Обратный вызов может обновить BasicTextField с помощью вспомогательной функции:

private fun updateTextField(emojiViewItem: EmojiViewItem) {
    insertStringAsIfTyping
(emojiTextFieldState, emojiViewItem.emoji)
}

Использование средства выбора эмодзи с представлениями

Средство выбора эмодзи также хорошо работает с представлениями.

Раздуйте EmojiPickerView . При необходимости установите emojiGridColumns и emojiGridRows в зависимости от желаемого размера каждой ячейки эмодзи.

<androidx.emoji2.emojipicker.EmojiPickerView
    …
   
app:emojiGridColumns="9" />

Вставьте символ в позицию курсора или замените выделенный текст:

// Consider unregistering/reregistering anyTextWatcher that you might have as part of this
private fun insertStringAsIfTyping(editText: EditText, string: String) {
    val stringBuffer
= StringBuffer(editText.text.toString())
    val index
= editText.selectionStart
   
if ( !editText.hasSelection() ) {
        stringBuffer
.insert(index, string)
   
} else {
        stringBuffer
.replace(index, editText.selectionEnd, string)
   
}
    editText
.setText(stringBuffer.toString())
    editText
.setSelection(index + string.length)
}

Предоставьте прослушиватель выбранных смайлов и используйте его для добавления символов в EditText .

// a listener example
emojiPickerView
.setOnEmojiPickedListener {
   val editText
= findViewById<EditText>(R.id.edit_text)
   insertStringAsIfTyping
(editText, it.emoji)
}

Стиль текста

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

Стиль текста в Compose

Компонуемый Text предлагает множество вариантов стилизации, в том числе:

  • Цвет текста : установите Color , чтобы текст выделялся.
  • Размер шрифта : Управляйте FontSize для соответствующего масштаба.
  • Стиль шрифта : используйте FontStyle для выделения текста курсивом.
  • Вес шрифта : отрегулируйте FontWeight для жирного, светлого и т. д. вариантов текста.
  • Семейство шрифтов : используйте FontFamily , чтобы выбрать подходящий шрифт.
Text(
    text
= "Hello 👋",
    color
= Color.Blue
    fontSize
= 18.sp,
    fontWeight
= FontWeight.Bold,
    fontFamily
= FontFamily.SansSerif
)

Вы можете единообразно настроить эти параметры стиля во всем приложении с помощью тем .

MaterialTheme(
   
// This theme would include Color.Blue (as appropriate for dark and light themes)
    colorScheme
= colorScheme,
    content
= content,
    typography
= Typography(
        titleLarge
= TextStyle(
            fontSize
= 18.sp,
            fontFamily
= titleFont,
            fontWeight
= FontWeight.Bold
       
),
   
),
)

Добавить несколько стилей в текст

Вы можете установить разные стили в одном компонуемом Text , используя AnnotatedString .

AnnotatedString имеет типобезопасный конструктор buildAnnotatedString , упрощающий создание.

@Composable
fun
MultipleStylesInText() {
   
Text(
        buildAnnotatedString
{
            withStyle
(style = SpanStyle(color = Color.Blue)) {
                append
("M")
           
}
            append
("y ")

            withStyle
(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append
("S")
           
}
            append
("tyle")
       
}
   
)
}

См. раздел «Стиль текста» для получения дополнительной информации о стилизации текста в Compose, включая добавление тени , расширенные стили с помощью кисти и непрозрачность .

Стиль текста в представлениях

При использовании представлений полагайтесь на стили и темы для обеспечения единообразия типографики. Дополнительные сведения о том, как применять пользовательские темы для представлений в вашем приложении, см. в разделе Стили и темы . Если вы хотите установить разные стили в одном текстовом представлении, см. раздел «Пространства» для получения дополнительной информации о том, как изменять текст различными способами, включая добавление цвета , создание кликабельности текста, масштабирование размера текста и рисование текста по индивидуальному заказу. .

Поддержка графических клавиатур и другого богатого контента.

Пользователи часто хотят общаться с помощью стикеров, анимации и другого разнообразного контента. Чтобы приложениям было проще получать разнообразный контент, в Android 12 (уровень API 31) представлен унифицированный API, который позволяет вашему приложению принимать контент из любого источника: буфера обмена, клавиатуры или перетаскивания. Для обратной совместимости с предыдущими версиями Android (в настоящее время обратно к уровню API 14) мы рекомендуем вам использовать версию этого API для Android Jetpack (AndroidX).

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

См. раздел Получение расширенного контента , чтобы узнать больше о том, как реализовать поддержку в вашем приложении. Jetpack Compose теперь имеет модификаторы dragAndDropSource и dragAndDropTarget которые упрощают реализацию перетаскивания внутри вашего приложения и между другими приложениями.