Texto en apps de redes sociales y mensajería

El texto es el centro de las aplicaciones sociales, en las que los usuarios comparten pensamientos, expresan emociones y cuentan historias. En este documento, se explora cómo trabajar con texto de manera eficaz, con un enfoque en los emojis, el estilo y la integración de contenido enriquecido.

Trabajar con emojis

Los emojis se convirtieron en una parte integral de la comunicación moderna, en particular en las apps de redes sociales y de mensajería. Trascienden las barreras lingüísticas, lo que les permite a los usuarios expresar emociones e ideas con rapidez y eficacia.

Compatibilidad con emojis en Compose

Jetpack Compose, el kit de herramientas declarativas de IU moderno de Android, simplifica los emojis manejo:

  • Entrada: El componente TextField admite de forma nativa la entrada de emojis.
  • Pantalla: El componente Text de Compose renderiza los emojis correctamente. lo que garantiza su apariencia coherente en todos los dispositivos y plataformas que ofrecen un proveedor de fuentes descargables compatible con emojis2, como dispositivos con tecnología de Servicios de Google Play.

En Cómo mostrar emojis, se explica cómo mostrar emojis en Jetpack Compose, lo que incluye cómo asegurarte de que tu app muestre las fuentes de emojis más recientes, cómo asegurarte de que los emojis funcionen correctamente si tu app usa Views y Compose en la misma actividad, y cómo solucionar problemas cuando los emojis no aparecen como se espera.

Compatibilidad con emojis en Views

Si usas objetos View de Android, la biblioteca de AppCompat 1.4 o versiones posteriores proporciona compatibilidad con emojis para subclases de plataforma de TextView:

Si creas una vista personalizada que es una subclase directa o indirecta de TextView, extiende la implementación de AppCompat (en lugar de la implementación de la plataforma) para obtener compatibilidad integrada con emojis. Admite programas de emojis modernos cómo probar y solucionar problemas de integración de emojis, admitir emojis sin AppCompat, admite emojis en vistas personalizadas y admite fuentes o fuentes alternativas proveedores, entre otros.

Cómo usar el Selector de emojis

El selector de emojis de Jetpack es una vista de Android que proporciona un lista categorizada de emojis, variantes fijas y compatibilidad con los modelos emojis, que son compatibles con múltiples dispositivos y versiones de Android. Es una forma fácil de mejorar la integración de emojis de tu app.

Comienza por importar la biblioteca en build.gradle.

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

Cómo usar el Selector de emojis con Compose

Puedes crear el Selector de emojis en Compose con el elemento componible AndroidView. Este fragmento incluye un objeto de escucha que te informa cuando se selecciona un emoji:

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

Compose 1.7 agrega muchas funciones nuevas a BasicTextField, como las siguientes: Compatibilidad con TextFieldState, que puede ubicarse en tu ViewModel:

private val emojiTextFieldState = TextFieldState()

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

Puedes usar TextFieldState para insertar texto en la posición del cursor o reemplazar el texto seleccionado, como si estuvieras escribiendo en el 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)
    }
}

La devolución de llamada puede actualizar el BasicTextField con la función de ayuda:

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

Cómo usar el selector de emojis con vistas

El selector de emojis también funciona bien con Views.

Expande el EmojiPickerView. De manera opcional, establece emojiGridColumns y emojiGridRows según el tamaño deseado de cada celda de emoji.

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

Inserta un carácter en la posición del cursor o reemplaza el texto seleccionado:

// 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)
}

Proporcionar un objeto de escucha para el emoji seleccionado y usarlo para agregar caracteres a EditText

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

Estilo del texto

Cuando aplicas distinciones visuales al texto, como estilos de fuente, tamaños, grosores y colores, puedes mejorar la legibilidad, la jerarquía y el atractivo estético general de la interfaz de usuario de tu app de redes sociales o de mensajería. Los estilos de texto ayudan a los usuarios a analizar información rápidamente, distinguir entre diferentes tipos de mensajes y, además, identificar elementos importantes.

Cómo aplicar estilo al texto en Compose

El elemento componible Text ofrece una gran variedad de opciones de estilo, como las siguientes:

  • Color del texto: Establece Color para que el texto se destaque.
  • Tamaño de fuente: Controla FontSize para establecer la escala adecuada.
  • Font Style: Usa FontStyle para poner el texto en cursiva.
  • Grosor de la fuente: Ajusta FontWeight para ver variaciones de texto en negrita, claro, etc.
  • Familia de fuentes: Usa FontFamily para elegir una fuente adecuada.
Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

Puedes configurar estas opciones de estilo de manera coherente en toda tu aplicación usando temas.

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
        ),
    ),
)

Agrega varios estilos en el texto

Puedes configurar diferentes estilos dentro del mismo elemento Text componible con un AnnotatedString

AnnotatedString tiene un compilador de tipo seguro, buildAnnotatedString, para facilitar la creación.

@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")
        }
    )
}

Consulta Cómo aplicar estilo al texto para obtener más información sobre cómo dar estilo al texto en Compose. como agregar una sombra, diseños avanzados con un pincel y opacidad.

Cómo aplicar estilo al texto en Views

Con Views, puedes usar estilos y temas para lograr una tipografía coherente. Consulta Estilos y temas para obtener más información sobre cómo aplicar temas personalizados en las vistas en tu app. Si quieres configurar diferentes estilos en un solo texto vista, consulta Intervalos para obtener más información sobre cómo cambiar el texto de una variedad de diversas maneras, como agregar color, hacer que el texto se pueda hacer clic, escalar el tamaño del texto y dibujarlo de forma personalizada.

Compatibilidad con teclados de imágenes y otro contenido enriquecido

Con frecuencia, los usuarios quieren comunicarse con calcomanías, animaciones y otros tipos de contenido enriquecido. Para que las apps puedan recibir contenido enriquecido de manera simple, Android 12 (nivel de API 31) incorporó una API unificada que permitirá que tu app acepte contenido de cualquier fuente: portapapeles, teclado o mediante la función de arrastrar y soltar. Para brindar retrocompatibilidad con versiones anteriores de Android (actualmente, hasta el nivel de API 14), te recomendamos que uses la versión de esta API de Android Jetpack (AndroidX).

Adjuntas un OnReceiveContentListener a los componentes de la IU y obtienes un cuando se inserta contenido a través de cualquier mecanismo. La devolución de llamada pasa a ser un único lugar para que tu código se encargue de recibir todo el contenido, desde solicitudes texto con estilo para lenguaje de marcado, imágenes, videos, archivos de audio, entre otros.

Consulta Cómo recibir contenido enriquecido para obtener más información sobre cómo implementar la compatibilidad en tu app. Jetpack Compose ahora tiene modificadores dragAndDropSource y dragAndDropTarget para simplificar la implementación de arrastrar y soltar dentro de tu app y entre otras apps.