스와이프하여 닫기

스와이프하여 닫기 애니메이션은 사용자가 이전 페이지로 이동할 때 전환을 전달합니다.

스와이프하여 닫기의 애니메이션 세부정보는 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% 기준점 규칙을 무시하고 뒤로 스와이프합니다.