Kurzinfo

Verwenden Sie Kurzinfos, um einer Schaltfläche oder einem anderen UI-Element Kontext hinzuzufügen. Es gibt zwei Arten von Kurzinfos:

• Einfache Kurzinfos: Beschreiben Elemente oder Aktionen von Symbolschaltflächen.
• Umfangreiche Kurzinfos: Bieten mehr Details, z. B. eine Beschreibung des Werts eines Features. Kann auch einen optionalen Titel, einen Link und Schaltflächen enthalten.

API-Oberfläche

Mit der komponierbaren Funktion TooltipBox können Sie Kurzinfos in Ihrer App implementieren. Das Erscheinungsbild von TooltipBox steuern Sie mit den folgenden Hauptparametern:

• positionProvider: Platziert die Kurzinfo relativ zum Ankerinhalt. In der Regel verwenden Sie einen Standard-Positionsanbieter aus dem TooltipDefaults. Sie können aber auch einen eigenen Anbieter bereitstellen, wenn Sie eine benutzerdefinierte Positionierungslogik benötigen.
• tooltip: Die komponierbare Funktion, die den Inhalt der Kurzinfo enthält. In der Regel verwenden Sie entweder die Composables PlainTooltip oder RichTooltip.
  • Verwenden Sie PlainTooltip, um Elemente oder Aktionen von Symbolschaltflächen zu beschreiben.
  • Verwenden Sie RichTooltip, um weitere Details anzugeben, z. B. den Wert eines Features. Rich-Kurzinfos können einen optionalen Titel, einen Link und Schaltflächen enthalten.
• state: Der State Holder, der die UI-Logik und den Elementstatus für diese Kurzinfo enthält.
• content: Der zusammensetzbare Inhalt, an dem die Kurzinfo verankert ist.

Einfache Kurzinfo anzeigen

Verwenden Sie eine einfache Kurzinfo, um ein UI-Element kurz zu beschreiben. Mit diesem Code-Snippet wird eine einfache Kurzinfo über einer Symbolschaltfläche mit der Bezeichnung „Zu Favoriten hinzufügen“ angezeigt:

@Composable
fun PlainTooltipExample(
    modifier: Modifier = Modifier,
    plainTooltipText: String = "Add to favorites"
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            PlainTooltip { Text(plainTooltipText) }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Do something... */ }) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "Add to favorites"
            )
        }
    }
}
Tooltips.kt

Wichtige Punkte zum Code

• TooltipBox generiert eine Kurzinfo mit dem Text „Zu Favoriten hinzufügen“.
  • TooltipDefaults.rememberPlainTooltipPositionProvider() bietet eine Standardpositionierung für einfache Kurzinfos.
  • tooltip ist eine Lambda-Funktion, die den Inhalt der Kurzinfo mit der zusammensetzbaren Funktion PlainTooltip definiert.
  • Text(plainTooltipText) zeigt den Text in der Kurzinfo an.
  • tooltipState steuert den Status der Kurzinfo.
• Mit IconButton wird ein anklickbarer Button mit einem Symbol erstellt.
  • Mit Icon(...) wird ein Herzsymbol auf der Schaltfläche angezeigt.
  • Wenn ein Nutzer mit dem IconButton interagiert, zeigt TooltipBox die Kurzinfo mit dem Text „Zu Favoriten hinzufügen“ an. Je nach Gerät können Nutzer die Kurzinfo auf folgende Weise auslösen:
  • Mit dem Cursor auf das Symbol zeigen
  • Langes Drücken des Symbols auf einem Mobilgerät

Ergebnis

In diesem Beispiel wird eine einfache Kurzinfo über einem Symbol erstellt:

Rich-Kurzinfo anzeigen

Verwenden Sie einen Rich-Tooltip, um zusätzlichen Kontext zu einem UI-Element bereitzustellen. In diesem Beispiel wird ein mehrzeiliger Rich-Tooltip mit einem Titel erstellt, der an einem Icon verankert ist:

@Composable
fun RichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text."
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) }
            ) {
                Text(richTooltipText)
            }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Icon button's click event */ }) {
            Icon(
                imageVector = Icons.Filled.Info,
                contentDescription = "Show more information"
            )
        }
    }
}
Tooltips.kt

Wichtige Punkte zum Code

• TooltipBox verarbeitet die Event-Listener für Nutzerinteraktionen und aktualisiert TooltipState entsprechend. Wenn TooltipState angibt, dass die Kurzinfo angezeigt werden soll, wird der Kurzinfo-Lambda-Ausdruck ausgeführt und TooltipBox zeigt RichTooltip an. Das TooltipBox dient als Anker und Container für den Inhalt und die Kurzinfo.
  • In diesem Fall ist der Inhalt eine IconButton-Komponente, die das Verhalten für die Tippaktion bereitstellt. Wenn Sie lange auf eine beliebige Stelle im Inhalt von TooltipBox drücken (auf Touch-Geräten) oder den Mauszeiger darauf bewegen, wird die Kurzinfo mit weiteren Informationen angezeigt.
• Das Compose-Element RichTooltip definiert den Inhalt der Kurzinfo, einschließlich Titel und Text. TooltipDefaults.rememberRichTooltipPositionProvider() stellt Positionsinformationen für Rich-Kurzinfos bereit.

Ergebnis

In diesem Beispiel wird ein Rich-Kurzinfo mit einem Titel erstellt, der an ein Informationssymbol angehängt ist:

Rich-Kurzinfo anpassen

In diesem Code-Snippet wird eine Rich-Kurzinfo mit einem Titel, benutzerdefinierten Aktionen und einem benutzerdefinierten Caretzeichen (Pfeil) über einer Kamera-Symbolschaltfläche angezeigt:

@Composable
fun AdvancedRichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Custom Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text.",
    richTooltipActionText: String = "Dismiss"
) {
    val tooltipState = rememberTooltipState()
    val coroutineScope = rememberCoroutineScope()

    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) },
                action = {
                    Row {
                        TextButton(onClick = {
                            coroutineScope.launch {
                                tooltipState.dismiss()
                            }
                        }) {
                            Text(richTooltipActionText)
                        }
                    }
                },
            ) {
                Text(richTooltipText)
            }
        },
        state = tooltipState
    ) {
        IconButton(onClick = {
            coroutineScope.launch {
                tooltipState.show()
            }
        }) {
            Icon(
                imageVector = Icons.Filled.Camera,
                contentDescription = "Open camera"
            )
        }
    }
}
Tooltips.kt

Wichtige Punkte zum Code

• In einer RichTooltip wird eine Kurzinfo mit einem Titel und einer Aktion zum Schließen angezeigt.
• Wenn die Kurzinfo aktiviert wird, entweder durch langes Drücken oder durch Bewegen des Mauszeigers über den Inhalt von TooltipBox, wird sie etwa eine Sekunde lang angezeigt. Sie können diese Kurzinfo schließen, indem Sie entweder auf eine andere Stelle auf dem Bildschirm tippen oder auf die Schaltfläche zum Schließen klicken.
• Wenn die Aktion zum Schließen ausgeführt wird, startet das System eine Koroutine, um tooltipState.dismiss aufzurufen. So wird sichergestellt, dass die Ausführung der Aktion nicht blockiert wird, während die Kurzinfo angezeigt wird.
• onClick = coroutineScope.launch { tooltipState.show() } } startet eine Koroutine, um die Kurzinfo manuell mit tooltipState.show anzuzeigen.
• Mit dem Parameter action können Sie einer Kurzinfo interaktive Elemente wie eine Schaltfläche hinzufügen.
• Mit dem Parameter caretSize wird die Größe des Pfeils der Kurzinfo geändert.

Ergebnis

Dieses Beispiel liefert folgende Ausgabe:

Zusätzliche Ressourcen

• Material Design: Kurzinfos