스와이프하여 닫기 애니메이션은 사용자가 이전 페이지로 이동할 때 전환을 전달합니다.
스와이프하여 닫기의 애니메이션 세부정보는 RSB 누르기와 유사합니다. 손가락이 애니메이션 진행 상황을 최대 50%까지 제어합니다.
앱 뷰에는 닫기 동작에 연결된 추가 애니메이션이 있습니다. 앱 뷰에 표시되는 이동량은 손가락이 움직여야 하는 거리와 정확히 일치하지는 않습니다. 앱 뷰는 화면 가장자리를 벗어나면 안 되므로 약간의 저항이 있는 쥐기와 같은 효과가 표시됩니다.
구현
Wear에는 자체 버전의 Box
인 SwipeToDismissBox
가 있습니다.
이를 통해 모바일의 뒤로 버튼과 유사한 스와이프하여 닫기 동작을 추가로 지원할 수 있습니다.
SwipeToDismissBox
는 오른쪽으로 스와이프하여 닫을 수 있는 컴포저블입니다.
SwipeToDismissBox
를 사용하려면 먼저 상태를 만들어야 합니다. 상태에는 스와이프 방향, 애니메이션 실행 여부, 현재 값 및 타겟 등에 관한 정보가 포함됩니다. 다음 예는 간단한 스와이프하여 닫기 작업을 설계하는 방법을 보여줍니다.
val state = rememberSwipeToDismissBoxState()
SwipeToDismissBox(
onDismissed = { /* navigateBack */ },
) { isBackground ->
if (isBackground) {
Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
} else {
Column(
modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.primary),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Text("Swipe to dismiss", color = MaterialTheme.colors.onPrimary)
}
}
}
Navigation 라이브러리와 함께 SwipeToDismissBox를 사용하는 방법에 관한 자세한 내용은 Wear Compose Navigation 라이브러리의 참조 문서를 확인하세요.
디자인
스와이프하여 닫기 작업을 설계할 때는 다음 2가지 원칙에 유의하세요.
화면 가장자리
페이지로 나눈 앱 뷰와 같이 스와이프할 수 있는 다른 UI 요소를 고려합니다. 스와이프하여 닫기가 가능한 경우 해당 동작을 트리거하도록 화면 가장자리의 20%를 남겨 둡니다.
Wear OS 코드베이스용 Compose Material의 예를 참고하세요. 를 참조하세요.
돌아가거나 앱 뷰를 유지하기 위한 기준점
사용자가 화면 너비의 50%를 초과해서 손가락을 드래그한 경우 앱에서는 나머지 뒤로 스와이프 애니메이션을 트리거해야 합니다. 50%보다 적으면 앱은 전체 앱 뷰로 다시 돌아가야 합니다.
동작이 빠른 경우 50% 기준점 규칙을 무시하고 뒤로 스와이프합니다.