Zum Schließen wischen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Die Wisch-zu-Schließen-Animation vermittelt den Übergang, wenn Nutzer zur vorherigen Seite wechseln.
Die Animationsdetails für das Wischen zum Schließen ähneln denen für das Drücken der Rück-/Ladetaste. Mit Ihrem Finger lässt sich der Fortschritt der Animation um bis zu 50 % steuern.
In der App-Ansicht gibt es eine zusätzliche Animation, die mit der Geste zum Schließen verknüpft ist. Der in der App-Ansicht angezeigte Ausmaß der Bewegung entspricht nicht genau der Strecke, die der Finger bewegen muss. Die App-Ansicht sollte niemals den Rand des Bildschirms verlassen und einen Drück-Effekt mit etwas Widerstand zeigen.
Implementierung
SwipeDismissableNavHost aus der Navigationsbibliothek bietet standardmäßig die Touch-Geste zum Schließen durch Wischen.
Wenn Sie die Navigationsbibliothek nicht verwenden, können Sie diese Geste für die Vollbildnavigation auch direkt mit BasicSwipeToDismissBox unterstützen.
Design
Beim Entwerfen der Aktion „Zum Schließen wischen“ sind die folgenden beiden Prinzipien zu beachten:
Rand des Bildschirms
Berücksichtigen Sie auch andere UI-Elemente, die blätterbar sind, z. B. paginierte App-Ansichten.
Wenn das Wischen zum Schließen möglich ist, reservieren Sie 20% des Bildschirmrands, um diese Aktion auszulösen.
In diesem Beispiel aus der Compose Material for Wear OS-Codebase wird das Wischen am Rand veranschaulicht, wenn der Inhalt horizontal scrollbar ist.
Grenzwert, um zur App-Ansicht zurückzukehren oder dort zu bleiben
Wenn der Nutzer den Finger über mehr als 50% der Bildschirmbreite gezogen hat, sollte die App den Rest der Wischbewegung auslösen. Ist das nicht der Fall, sollte die App wieder in den Vollbildmodus wechseln.
Wenn die Geste schnell ausgeführt wird, ignorieren Sie die 50-%-Regel und wischen Sie zurück.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-07-27 (UTC)."],[],[],null,["# Swipe to dismiss\n\n[Swipe to dismiss](/reference/kotlin/androidx/wear/compose/foundation/package-summary#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2))\nanimation conveys the transition when users navigate to the previous page.\n\nThe animation details for swipe to dismiss are similar to the RSB press. Your\nfinger controls the progress of the animation up to 50%.\n\nThere is an additional animation on the App View that is linked to the dismiss\ngesture. The amount of movement shown on the app view is not exactly the same as\nthe distance that the finger needs to move. The app view should never leave the\nedge of the screen, displaying a squeeze like effect with some resistance.\n\nImplementation\n--------------\n\n[`SwipeDismissableNavHost`](/reference/kotlin/androidx/wear/compose/navigation/package-summary#SwipeDismissableNavHost(androidx.navigation.NavHostController,kotlin.String,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.navigation.SwipeDismissableNavHostState,kotlin.String,kotlin.Function1))\nfrom the [navigation library](/training/wearables/compose/navigation)\nprovides the swipe-to-dismiss navigation gesture by default.\n\nIf you are not using the navigation library, then you can still support this full\nscreen navigation gesture by using [`BasicSwipeToDismissBox`](/reference/kotlin/androidx/wear/compose/foundation/package-summary#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2))\ndirectly.\n\nDesign\n------\n\nWhen designing the swipe to dismiss action, keep the following two principles\nin mind:\n\n### Edge of the screen\n\nAccount for other UI elements that are swipable, such as paginated app views.\nWhen swipe to dismiss is possible, reserve 20% of the edge of the screen to\ntrigger that motion.\n\nSee this [example from the Compose Material for Wear OS codebase](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:wear/compose/compose-material/samples/src/main/java/androidx/wear/compose/material/samples/SwipeToDismissBoxSample.kt;l=151)\nfor an example of edge-swiping when the content is horizontally scrollable.\n\n### Threshold to go back or stay on app view\n\nIf the user has dragged their finger across over 50% of the screen width,\nthe app should trigger the rest of the swipe back animation. If it's less than\nthat, the app should snap back to the full app view.\n\nIf the gesture is quick, ignore the 50% threshold rule and swipe back."]]
