Attiva le interazioni degli utenti

Jetpack Compose consente un'interattività granulare in Text. La selezione del testo è ora più flessibile e può essere eseguita in vari layout componibili. Le interazioni degli utenti nel testo sono diverse da altri layout componibili, in quanto non è possibile aggiungere un modificatore a una porzione di un componibile Text. Questa pagina evidenzia le API che consentono le interazioni degli utenti.

Seleziona testo

Per impostazione predefinita, gli elementi componibili non sono selezionabili, il che significa che gli utenti non possono selezionare e copiare testo dalla tua app. Per attivare la selezione del testo, aggrega gli elementi di testo con un elemento componibile SelectionContainer:

@Composable
fun SelectableText() {
    SelectionContainer {
        Text("This text is selectable")
    }
}

Un breve passaggio di testo, selezionato dall'utente.

Puoi disattivare la selezione di parti specifiche di un'area selezionabile. Per farlo, devi racchiudere la parte non selezionabile in un elemento componibile DisableSelection:

@Composable
fun PartiallySelectableText() {
    SelectionContainer {
        Column {
            Text("This text is selectable")
            Text("This one too")
            Text("This one as well")
            DisableSelection {
                Text("But not this one")
                Text("Neither this one")
            }
            Text("But again, you can select this one")
            Text("And this one too")
        }
    }
}

Un passaggio di testo più lungo. L'utente ha provato a selezionare l'intero passaggio, ma poiché su due righe era applicata la selezione, non è stata selezionata.

Ottieni la posizione di un clic sul testo

Per ascoltare i clic su Text, puoi aggiungere il modificatore di clickable. Tuttavia, per ottenere la posizione di un clic all'interno di un componibile Text, nel caso in cui tu abbia azioni diverse in base a parti diverse del testo, dovrai utilizzare invece un ClickableText:

@Composable
fun SimpleClickableText() {
    ClickableText(text = AnnotatedString("Click Me"), onClick = { offset ->
        Log.d("ClickableText", "$offset -th character is clicked.")
    })
}

Clic con annotazione

Quando un utente fa clic su un componibile Text, può essere opportuno collegare ulteriori informazioni a una parte del valore Text, ad esempio un URL allegato a una parola specifica da aprire in un browser. Per farlo, devi allegare un'annotazione, che utilizza come parametri un tag (String), un elemento (String) e un intervallo di testo. Da un AnnotatedString, queste annotazioni possono essere filtrate in base ai relativi tag o intervalli di testo. Ecco un esempio:

@Composable
fun AnnotatedClickableText() {
    val annotatedText = buildAnnotatedString {
        append("Click ")

        // We attach this *URL* annotation to the following content
        // until `pop()` is called
        pushStringAnnotation(
            tag = "URL", annotation = "https://developer.android.com"
        )
        withStyle(
            style = SpanStyle(
                color = Color.Blue, fontWeight = FontWeight.Bold
            )
        ) {
            append("here")
        }

        pop()
    }

    ClickableText(text = annotatedText, onClick = { offset ->
        // We check if there is an *URL* annotation attached to the text
        // at the clicked position
        annotatedText.getStringAnnotations(
            tag = "URL", start = offset, end = offset
        ).firstOrNull()?.let { annotation ->
            // If yes, we log its value
            Log.d("Clicked URL", annotation.item)
        }
    })
}