Эта страница переведена с помощью Cloud Translation API.

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

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

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

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

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

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

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

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

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

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

Ввод : версия EditText для AppCompat изначально поддерживает ввод эмодзи.
Display : версии AppCompat TextView , ToggleButton , Switch , Button , CheckedTextView , RadioButton , CheckBox , AutoCompleteTextView и MultiAutoCompleteTextView поддерживают отображение эмодзи, обеспечивая единообразный внешний вид на всех устройствах и платформах, которые предоставляют поставщика загружаемых шрифтов, совместимого с emoji2, например, на устройствах с питанием. сервисами Google Play .

Если вы создаете собственное представление , которое является прямым или косвенным подклассом 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 которые упрощают реализацию перетаскивания внутри вашего приложения и между другими приложениями.