Testo nelle app social e di messaggistica

Il testo è al centro delle applicazioni social, in cui gli utenti condividono pensieri, esprimono emozioni e raccontano storie. Questo documento spiega come utilizzare il testo in modo efficace, concentrandosi su emoji, stile e integrazione di contenuti avanzati.

Utilizzare le emoji

Le emoji sono diventate parte integrante della comunicazione moderna, in particolare le app social e di messaggistica. Superano le barriere linguistiche, consentendo agli utenti di esprimere emozioni e idee in modo rapido ed efficace.

Supporto delle emoji in Compose

Jetpack Compose, il moderno toolkit per l'interfaccia utente dichiarativa di Android, semplifica il trattamento delle emoji:

  • Input: il componente TextField supporta in modo nativo l'inserimento di emoji.
  • Visualizzazione: il componente Text di Compose esegue il rendering delle emoji correttamente, garantendone l'aspetto coerente su dispositivi e piattaforme che offrono un fornitore di caratteri scaricabili compatibile con emoji2, ad esempio i dispositivi con Google Play Services.

Mostrare emoji illustra la visualizzazione delle emoji in Jetpack Compose, inclusa la procedura per assicurarti che la tua app mostri i caratteri emoji più recenti, come fare in modo che le emoji funzionino correttamente se la tua app utilizza sia le visualizzazioni sia Compose nella stessa attività e come risolvere i problemi quando le emoji non vengono visualizzate come previsto.

Supporto delle emoji nelle Visualizzazioni

Se utilizzi Android View, la raccolta AppCompat 1.4 o versioni successive fornisce supporto di emoji per le sottoclassi della piattaforma TextView:

Se stai creando una vista personalizzata che è una sottoclasse diretta o indiretta di TextView, estendi l'implementazione di AppCompat (anziché la piattaforma implementazione) per ottenere il supporto integrato delle emoji. La pagina Supporta le emoji moderne mostra come testare e risolvere i problemi di integrazione delle emoji, supportare le emoji senza AppCompat, supportare le emoji nelle visualizzazioni personalizzate, supportare caratteri o fornitori di caratteri alternativi e altro ancora.

Uso del selettore di emoji

Jetpack Emoji Picker è una View Android che fornisce un elenco classificato di emoji, varianti fisse e supporto per le emoji usate di recente, compatibile con più versioni e dispositivi Android. È un modo semplice per migliorare l'integrazione delle emoji nella tua app.

Inizia importando la libreria in build.gradle.

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

Utilizzare il selettore di emoji con Scrivi

Costruisci il selettore di emoji in Compose utilizzando il composable AndroidView. Questo snippet include un listener che ti informa quando un'emoji è selezionata:

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

Compose 1.7 aggiunge molte nuove funzionalità a BasicTextField, tra cui supporto per TextFieldState, che può trovarsi nel tuo ViewModel:

private val emojiTextFieldState = TextFieldState()

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

Puoi utilizzare TextFieldState per inserire testo nella posizione del cursore oppure sostituisci il testo selezionato, come se stessi digitando nell'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)
    }
}

Il callback può aggiornare BasicTextField utilizzando la funzione di supporto:

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

Utilizzare il selettore di emoji con le visualizzazioni

Il selettore di emoji funziona bene anche con le visualizzazioni.

Carica EmojiPickerView. Se vuoi, imposta emojiGridColumns e emojiGridRows in base alle dimensioni desiderate di ogni cella emoji.

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

Inserisci un carattere nella posizione del cursore o sostituisci il testo selezionato:

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

Fornisci a un ascoltatore l'emoji selezionata e utilizzala per aggiungere caratteri a EditText.

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

Applica stile al testo

Applicando distinzioni visive al testo, come stili, dimensioni, spessori e colori dei caratteri, puoi migliorare la leggibilità, la gerarchia e l'estetica complessiva dell'interfaccia utente della tua app di social o messaggistica. Gli stili di testo aiutano gli utenti a analizzare rapidamente le informazioni, a distinguere tra diversi tipi di messaggi e a identificare gli elementi importanti.

Definisci lo stile del testo in Compose

Il composable Text offre una vasta gamma di opzioni di stile, tra cui:

  • Colore del testo: imposta Color per mettere in risalto il testo.
  • Dimensioni carattere: controlla FontSize per la scala appropriata.
  • Stile carattere: utilizza FontStyle per formattare il testo in corsivo.
  • Spessore carattere: regola FontWeight in base a variazioni di testo in grassetto, chiaro e così via.
  • Famiglia di caratteri: usa FontFamily per scegliere un carattere adatto.
Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

Puoi impostare queste opzioni di stile in modo coerente nell'applicazione utilizzando: temi.

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

Aggiungere più stili al testo

Puoi impostare stili diversi all'interno dello stesso componibile Text utilizzando un AnnotatedString

AnnotatedString dispone di uno generatore di annunci sicuri per il tipo, buildAnnotatedString, per semplificare la creazione.

@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 Stile del testo per molte altre informazioni sugli stili del testo in Compose. tra cui l'aggiunta di un'ombra, gli stili avanzati con un pennello e opacità.

Applicare uno stile al testo nelle visualizzazioni

Con le visualizzazioni, puoi utilizzare stili e temi per una tipografia coerente. Consulta Stili e temi per saperne di più su come applicare temi personalizzati alle visualizzazioni della tua app. Se vuoi impostare stili diversi in un'unica visualizzazione di testo, consulta Spazi per saperne di più su come modificare il testo in vari modi, ad esempio aggiungendo un colore, rendendo il testo cliccabile, modificando le dimensioni del testo e disegnando il testo in modo personalizzato.

Supporta tastiere immagine e altri contenuti avanzati

Gli utenti spesso vogliono comunicare utilizzando adesivi, animazioni e altri tipi di contenuti avanzati. Per semplificare la ricezione di contenuti avanzati per le app, Android 12 (livello API 31) ha introdotto un'API unificata che consente alla tua app di accettare contenuti da qualsiasi fonte: appunti, tastiera o trascinamento. Per retro compatibilità con le versioni precedenti di Android (attualmente tornano al livello API 14), ti consigliamo di utilizzare la versione Android Jetpack (AndroidX) di questa API.

Colleghi una OnReceiveContentListener ai componenti dell'interfaccia utente e ricevi un quando il contenuto viene inserito tramite un qualsiasi meccanismo. Il callback diventa il punto in cui il codice gestisce la ricezione di tutti i contenuti, da quelli semplici testo con stili applicati a markup, immagini, video, file audio e altro ancora.

Consulta Ricevere contenuti avanzati per scoprire di più su come implementare il supporto nella tua app. Jetpack Compose ora dispone dei modificatori dragAndDropSource e dragAndDropTarget per semplificare l'implementazione del trascinamento all'interno della tua app e tra altre app.