Nutzerinteraktionen aktivieren

Jetpack Compose ermöglicht detaillierte Interaktivität in Text. Die Textauswahl ist jetzt flexibler und kann auch in zusammensetzbaren Layouts erfolgen. Nutzerinteraktionen im Text unterscheiden sich von anderen zusammensetzbaren Layouts, da Sie einem Teil einer zusammensetzbaren Text-Funktion keinen Modifizierer hinzufügen können. Auf dieser Seite werden die APIs vorgestellt, die Nutzerinteraktionen ermöglichen.

Text auswählen

Standardmäßig können zusammensetzbare Funktionen nicht ausgewählt werden. Das bedeutet, dass Nutzer keinen Text aus Ihrer App auswählen und kopieren können. Um die Textauswahl zu aktivieren, umschließen Sie Ihre Textelemente mit einer zusammensetzbaren Funktion vom Typ SelectionContainer:

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

Eine kurze Textpassage, die vom Nutzer ausgewählt wird.

Sie können die Auswahl für bestimmte Bereiche eines auswählbaren Bereichs deaktivieren. Dazu müssen Sie den nicht auswählbaren Teil mit einer zusammensetzbaren Funktion DisableSelection zusammenfassen:

@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")
        }
    }
}

Eine längere Textpassage. Der Nutzer hat versucht, den gesamten Abschnitt auszuwählen, aber da auf zwei Zeilen „DisableSelection“ angewendet wurde, wurden sie nicht ausgewählt.

Position eines Textklicks abrufen

Sie können den Modifikator clickable hinzufügen, um Klicks auf Text zu überwachen. Wenn Sie jedoch die Position eines Klicks innerhalb einer zusammensetzbaren Text abrufen möchten und verschiedene Aktionen basierend auf verschiedenen Teilen des Textes haben, müssen Sie stattdessen ein ClickableText-Objekt verwenden:

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

Klick mit Anmerkung

Wenn ein Nutzer auf eine zusammensetzbare Funktion Text klickt, möchten Sie vielleicht zusätzliche Informationen an einen Teil des Text-Werts anhängen, z. B. eine URL, die an ein bestimmtes Wort angehängt ist und in einem Browser geöffnet werden soll. Dazu müssen Sie eine Anmerkung anhängen, die aus einem Tag (String), einem Element (String) und einem Textbereich als Parameter besteht. In einem AnnotatedString können diese Annotationen nach ihren Tags oder Textbereichen gefiltert werden. Hier ein Beispiel:

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