Activer les interactions utilisateur

Jetpack Compose permet une interactivité ultraprécise dans Text. La sélection de texte est désormais plus flexible et peut être effectuée sur différentes mises en page modulables. Les interactions utilisateur dans le texte sont différentes des autres mises en page modulables, car vous ne pouvez pas ajouter de modificateur à une partie d'un composable Text. Cette page présente les API permettant les interactions utilisateur.

Sélectionner le texte

Par défaut, les composables ne peuvent pas être sélectionnés, ce qui signifie que les utilisateurs ne peuvent pas sélectionner ni copier de texte à partir de votre application. Pour activer la sélection de texte, encapsulez vos éléments de texte avec un composable SelectionContainer:

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

Court passage de texte sélectionné par l'utilisateur

Vous pouvez désactiver la sélection à des endroits spécifiques d'une zone sélectionnable. Pour ce faire, vous devez encapsuler l'emplacement non sélectionnable avec un composable 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")
        }
    }
}
TextSnippets.kt

Long passage de texte. L'utilisateur a essayé de sélectionner l'intégralité du passage, mais deux lignes n'ont pas été sélectionnées, car le composable DisableSelection leur est appliqué.

Obtenir la position d'un clic sur du texte

Pour écouter les clics sur Text, vous pouvez ajouter le modificateur clickable. Toutefois, si vous souhaitez obtenir la position d'un clic dans un composable Text, dans le cas où vous avez différentes actions en fonction de différentes parties du texte, vous devez utiliser un ClickableText à la place:

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

Clic avec annotation

Lorsqu'un utilisateur clique sur un composable Text, vous pouvez joindre des informations supplémentaires à une partie de la valeur Text, comme une URL associée à un mot spécifique à ouvrir dans un navigateur. Pour ce faire, vous devez joindre une annotation, qui utilise une balise (String), un élément (String) et une plage de texte en tant que paramètres. Avec AnnotatedString, ces annotations peuvent être filtrées par leurs balises ou plages de texte. Voici un exemple :

@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)
        }
    })
}
TextSnippets.kt