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 qui permettent des interactions utilisateur.

Sélectionner le texte

Par défaut, les composables ne sont pas sélectionnables, ce qui signifie que les utilisateurs ne peuvent pas sélectionner et copier du texte à partir de votre application. Pour activer la sélection de texte, 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é.

Créer des sections de texte cliquables avec LinkAnnotation

Pour écouter les clics sur Text, vous pouvez ajouter le modificateur clickable. Cependant, vous pouvez joindre des informations supplémentaires à une certaine partie de la valeur Text, comme une URL associée à un mot donné à ouvrir dans une navigateur. Dans ce cas, vous devez utiliser un LinkAnnotation, qui est Annotation représentant une partie cliquable du texte.

Avec LinkAnnotation, vous pouvez associer une URL à une partie d'un composable Text. qui s'ouvre automatiquement lorsque l'utilisateur clique dessus, comme illustré dans l'extrait de code suivant:

@Composable
fun AnnotatedStringWithLinkSample() {
    // Display a link in the text
    Text(
        buildAnnotatedString {
            append("Build better apps faster with ")
            withLink(
                LinkAnnotation.Url(
                    "https://developer.android.com/jetpack/compose",
                    TextLinkStyles(style = SpanStyle(color = Color.Blue))
                )
            ) {
                append("Jetpack Compose")
            }
        }
    )
}
TextSnippets.kt

Vous pouvez également configurer une action personnalisée en réponse à un clic d'un utilisateur sur une partie de le composable Text. Dans l'extrait de code suivant, lorsque l'utilisateur clique sur Jetpack Compose, un lien s'affiche et des métriques sont enregistrées si l'utilisateur clique sur le lien:

@Composable
fun AnnotatedStringWithListenerSample() {
    // Display a link in the text and log metrics whenever user clicks on it. In that case we handle
    // the link using openUri method of the LocalUriHandler
    val uriHandler = LocalUriHandler.current
    Text(
        buildAnnotatedString {
            append("Build better apps faster with ")
            val link =
                LinkAnnotation.Url(
                    "https://developer.android.com/jetpack/compose",
                    TextLinkStyles(SpanStyle(color = Color.Blue))
                ) {
                    val url = (it as LinkAnnotation.Url).url
                    // log some metrics
                    uriHandler.openUri(url)
                }
            withLink(link) { append("Jetpack Compose") }
        }
    )
}
TextSnippets.kt