SpannableText cliccabile in Jetpack Compose

In precedenza ho pubblicato un articolo su come possiamo estendere un testo in Jetpack Compose. Vedere qui

In composizione se vuoi rendere cliccabile un testo puoi usare Modifer.clickable su Text o ClickableText .

Ma useremo ClickableText perché fornisce anche l'offset del carattere quando fai clic.

per esempio

ClickableText("Hello", onClick = { offset ->
    println("You clicked on offset $offset")
})

Questo sarà utile quando si desidera fare clic sul testo di estensione, possiamo facilmente trovare l'area di estensione cliccabile.

Creiamo un AnnotatedString (Span text)

ClickableText(text = buildAnnotatedString {
                append("I have read ")
                withStyle(style = SpanStyle(color = Color.Red), ) {
                    append("Terms and Condition")
                }
                append(" and ")
                withStyle(style = SpanStyle(color = Color.Red), ) {
                    append("Privacy policy")
                }
            }, onClick = {
                println("Clicked offset $it")
            })

Ora rileveremo la nostra area di estensione, quindi cosa facciamo all'interno dell'ambito withStyle aggiungeremo una nuova riga pushStringAnnotation conterrà la stringa annotata e potremo trovarla in seguito.

Inoltre sto refactoring del codice sopra in tale sequenza per una migliore comprensione.

1. Aggiungiamo variabili estendibili.

val tnc = "Terms and Condition"
val privacyPolicy = "Privacy policy"

val annotatedString = buildAnnotatedString {
    append("I have read ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = tnc, annotation = tnc)
        append(tnc)
    }
    append(" and ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = privacyPolicy, annotation = privacyPolicy)
        append(privacyPolicy)
    }
}

ClickableText(text = annotatedString, onClick = { offset ->
    annotatedString.getStringAnnotations(offset, offset)
        .firstOrNull()?.let { span ->
            println("Clicked on ${span.item}")
        }
})

Quando l'utente fa clic, possiamo facilmente trovare la stringa annotata utilizzando l'offset.

Frammento di codice completo.

val tnc = "Terms and Condition"
val privacyPolicy = "Privacy policy"
val annotatedString = buildAnnotatedString {
    append("I have read ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = tnc, annotation = tnc)
        append(tnc)
    }
    append(" and ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = privacyPolicy, annotation = privacyPolicy)
        append(privacyPolicy)
    }
}
ClickableText(text = annotatedString, onClick = { offset ->
    annotatedString.getStringAnnotations(offset, offset)
        .firstOrNull()?.let { span ->
            println("Clicked on ${span.item}")
        }
})

In questo articolo ho cercato di spiegare come possiamo aggiungere clic su un'area di testo. Dal momento che è statico. Possiamo ottenere la stessa cosa nei contenuti dinamici utilizzando Regex.

Se non vuoi scrivere ogni volta, ecco il file Gist che ti sarà utile nel tuo progetto. Basta copiare e incollare e la magia accadrà.

Grazie per aver letto questo articolo.

Per favore, applaudi e seguimi per altri articoli utili.

Se vuoi un articolo per l'intervallo dinamico, scrivi nel commento.

Ora APPLAUDE!!!!!!!!