스와이프하여 닫기
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
스와이프하여 닫기 애니메이션은 사용자가 이전 페이지로 이동할 때 전환을 전달합니다.
스와이프하여 닫기의 애니메이션 세부정보는 RSB 누르기와 유사합니다. 손가락이 애니메이션 진행 상황을 최대 50%까지 제어합니다.
앱 뷰에는 닫기 동작에 연결된 추가 애니메이션이 있습니다. 앱 뷰에 표시되는 이동량은 손가락이 움직여야 하는 거리와 정확히 일치하지는 않습니다. 앱 뷰는 화면 가장자리를 벗어나면 안 되므로 약간의 저항이 있는 쥐기와 같은 효과가 표시됩니다.
구현
탐색 라이브러리의 SwipeDismissableNavHost
는 기본적으로 스와이프하여 닫기 탐색 동작을 제공합니다.
탐색 라이브러리를 사용하지 않는 경우에도 BasicSwipeToDismissBox
를 직접 사용하여 이 전체 화면 탐색 동작을 지원할 수 있습니다.
디자인
스와이프하여 닫기 작업을 설계할 때는 다음 2가지 원칙에 유의하세요.
화면 가장자리
페이지로 나눈 앱 뷰와 같이 스와이프할 수 있는 다른 UI 요소를 고려합니다.
스와이프하여 닫기가 가능한 경우 해당 동작을 트리거하도록 화면 가장자리의 20%를 남겨 둡니다.
콘텐츠를 가로로 스크롤할 수 있는 경우 가장자리 스와이프의 예는 Wear OS 코드베이스의 Compose Material 예를 참고하세요.
돌아가거나 앱 뷰를 유지하기 위한 기준점
사용자가 화면 너비의 50%를 초과해서 손가락을 드래그한 경우 앱에서는 나머지 뒤로 스와이프 애니메이션을 트리거해야 합니다. 50%보다 적으면 앱은 전체 앱 뷰로 다시 돌아가야 합니다.
동작이 빠른 경우 50% 기준점 규칙을 무시하고 뒤로 스와이프합니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-07-27(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 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."]]