Mensagens de texto em apps de redes sociais e mensagens

O texto é o centro dos aplicativos sociais, em que os usuários compartilham pensamentos, expressam emoções e contam histórias. Este documento explica como trabalhar com texto de maneira eficaz, com foco em emojis, estilos e integração de conteúdo rico.

Como trabalhar com emojis

Os emojis se tornaram parte integrante da comunicação moderna, principalmente em apps de redes sociais e mensagens. Eles superam as barreiras linguísticas, permitindo que os usuários expressar emoções e ideias de forma rápida e eficaz.

Suporte a emojis no Compose

O Jetpack Compose, o kit de ferramentas declarativo moderno de IU do Android, simplifica o processamento de emojis:

Entrada: o componente TextField oferece suporte nativo à entrada de emojis.
Exibição: o componente Text do Compose renderiza emojis corretamente, garantindo a aparência consistente em dispositivos e plataformas que oferecem um provedor de fontes para download compatível com emoji2, como dispositivos com Google Play Services.

A opção Mostrar emojis aborda a exibição de emojis no Jetpack Compose, incluindo instruções de como garantir que seu app mostre as fontes de emojis mais recentes, como garantir que os emojis funcionam corretamente se o app usa as visualizações e o Compose na mesma atividade, e como resolver problemas quando os emojis não aparecem como esperado.

Suporte a emojis no Views

Se você estiver usando visualizações do Android, a biblioteca AppCompat 1.4 ou mais recente oferece suporte a emoji para subclasses de plataforma de TextView:

Entrada: a versão do AppCompat de EditText oferece suporte nativo à entrada de emojis.
Display: as versões AppCompat de TextView, ToggleButton Switch, Button, CheckedTextView, RadioButton, CheckBox, AutoCompleteTextView e MultiAutoCompleteTextView são compatíveis com a exibição de emojis, garantindo uma a aparência em dispositivos e plataformas que fornecem uma interface provedor de fontes para download, como dispositivos Google Play Services.

Se você estiver criando uma visualização personalizada que seja uma subclasse direta ou indireta de TextView, estenda a implementação da AppCompat (em vez da implementação da plataforma) para receber suporte integrado a emojis. O Suporte a emojis modernos mostra como testar e resolver problemas de integração de emojis, oferecer suporte a emojis sem AppCompat, oferecer suporte a emojis em visualizações personalizadas, oferecer suporte a fontes ou provedores alternativos e muito mais.

Como usar o seletor de emojis

O Jetpack Emoji Picker é uma View do Android que fornece uma lista categorizada de emojis, variantes fixas e suporte a emojis usados recentemente, compatível com várias versões e dispositivos Android. É uma maneira fácil de melhorar a integração de emojis do seu app.

Comece importando a biblioteca para build.gradle.

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

Como usar o seletor de emojis com o Compose

Para criar o seletor de emojis no Compose, use o AndroidView. combinável. Esse snippet inclui um listener que informa quando um emoji está selecionado:

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

O Compose 1.7 adiciona várias funcionalidades novas ao BasicTextField, incluindo: Suporte a TextFieldState, que pode estar no seu ViewModel:

private val emojiTextFieldState = TextFieldState()

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

É possível usar TextFieldState para inserir texto na posição do cursor ou substituir o texto selecionado, como se você estivesse digitando no 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)
    }
}

O callback pode atualizar o BasicTextField usando a função auxiliar:

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

Como usar o seletor de emojis com visualizações

O seletor de emojis também funciona bem com visualizações.

Infle a EmojiPickerView. Opcionalmente, defina emojiGridColumns e emojiGridRows com base no tamanho desejado de cada célula de emoji.

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

Insira um caractere na posição do cursor ou substitua o texto selecionado:

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

Forneça um listener para o emoji escolhido e use-o para anexar caracteres ao EditText.

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

Estilo do texto

Ao aplicar distinções visuais ao texto, como estilos de fonte, tamanhos, pesos e cores, é possível melhorar a legibilidade, a hierarquia e o apelo estético geral da interface do usuário do seu app de rede social ou de mensagens. Os estilos de texto ajudam os usuários a analisar rapidamente as informações, distinguir entre diferentes tipos de mensagens e identificar elementos importantes.

Estilo de texto no Compose

O elemento combinável Text oferece várias opções de estilo, incluindo:

Cor do texto: defina Color para destacar o texto.
Tamanho da fonte: controle FontSize para ajustar a escala adequada.
Estilo da fonte: use FontStyle para aplicar itálico ao texto.
Espessura da fonte: ajuste FontWeight para variações de texto em negrito, itálico etc.
Família de fontes: use FontFamily para escolher uma fonte adequada.

Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

Você pode definir essas opções de estilo de forma consistente em todo o aplicativo 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
        ),
    ),
)

Adicionar vários estilos a um texto

É possível definir estilos diferentes no mesmo elemento combinável Text usando uma AnnotatedString.

A AnnotatedString tem um builder de tipo seguro, buildAnnotatedString, para facilitar a criação.

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

Consulte Estilizar texto para saber mais sobre os estilos de texto no Compose. incluindo adicionar uma sombra, estilo avançado com um pincel e opacidade.

Estilo de texto no Views

Com o Views, use estilos e temas para manter a consistência da tipografia. Consulte Estilos e temas para mais informações sobre como aplicar temas personalizados às visualizações do seu app. Se você quiser definir estilos diferentes em uma única visualização de texto, consulte Períodos para mais informações sobre como mudar o texto de várias maneiras, incluindo adicionar cor, tornar o texto clicável, dimensionar o tamanho do texto e desenhar o texto de uma maneira personalizada.

Suporte a teclados de imagens e outros conteúdos avançados

Os usuários geralmente querem se comunicar usando adesivos, animações e outros tipos de conteúdo avançado. Para facilitar o recebimento de conteúdo avançado por parte dos apps, o Android 12 (API de nível 31) introduziu uma API unificada que permite que seu aplicativo aceite conteúdo de qualquer fonte: área de transferência, teclado ou arrastar e soltar. Para trás compatibilidade com versões anteriores do Android (atualmente de volta ao nível 14 da API), recomendamos que você use a versão do Android Jetpack (AndroidX) dessa API.

Você anexa um OnReceiveContentListener aos componentes da IU e recebe uma quando o conteúdo é inserido por meio de qualquer mecanismo. O callback passa a ser o único local em que o código processa o recebimento de todos os conteúdos, desde textos simples e estilizados até marcações, imagens, vídeos, arquivos de áudio e outros.

Consulte Receber conteúdo avançado para saber mais sobre como implementar o suporte na seu app. O Jetpack Compose agora tem dragAndDropSource e Modificadores do dragAndDropTarget para simplificar a implementação do recurso de arrastar e soltar dentro e entre outros apps.

Mensagens de texto em apps de redes sociais e mensagens Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.