Vuốt để bỏ qua

Ảnh động Vuốt để đóng sẽ truyền tải hiệu ứng chuyển đổi khi người dùng chuyển về trang trước.

Các chi tiết ảnh động cho thao tác vuốt để đóng cũng tương tự như thao tác nhấn RSB. Ngón tay của bạn sẽ kiểm soát tiến trình của ảnh động lên đến 50%.

Có một ảnh động bổ sung trên Chế độ xem ứng dụng được liên kết với cử chỉ đóng. Số lượng chuyển động hiển thị trên chế độ xem ứng dụng không chính xác với khoảng cách mà ngón tay cần di chuyển. Chế độ xem ứng dụng không được rời khỏi cạnh mép của màn hình, cho thấy một hiệu ứng bóp vào hai cạnh khi có lực cản.

Triển khai

Wear có phiên bản Box riêng là SwipeToDismissBox. Phiên bản này hỗ trợ thêm thao tác vuốt để đóng, tương tự như nút quay lại trên thiết bị di động.

SwipeToDismissBox là một thành phần kết hợp có thể đóng được bằng cách vuốt sang phải.

Để sử dụng SwipeToDismissBox, trước tiên, bạn phải tạo một trạng thái. Trạng thái này chứa thông tin về hướng vuốt, ảnh động có đang chạy hay không, giá trị hiện tại và mục tiêu, v.v. Ví dụ sau cho thấy cách thiết kế một thao tác vuốt đơn giản để đóng (loại bỏ) một hành động:

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)
        }
    }
}

Để biết thêm thông tin về cách sử dụng SwipeToDismissBox kết hợp với thư viện Điều hướng, hãy xem các tài liệu tham khảo cho Thư viện Điều hướng Wear Compose.

Thiết kế

Khi thiết kế thao tác vuốt để đóng (loại bỏ) một hành động, hãy lưu ý hai nguyên tắc sau:

Cạnh màn hình

Tính đến các phần tử giao diện người dùng khác có thể vuốt được, chẳng hạn như các chế độ xem ứng dụng được phân trang. Khi có thể vuốt để đóng, hãy dành 20% cạnh của màn hình để kích hoạt chuyển động đó.

Hãy xem ví dụ này về cơ sở mã Compose Material cho Wear OS ví dụ về thao tác vuốt cạnh khi nội dung có thể cuộn theo chiều ngang.

Ngưỡng để quay lại hoặc tiếp tục ở chế độ xem ứng dụng

Nếu người dùng đã kéo ngón tay qua hơn 50% chiều rộng màn hình, ứng dụng sẽ kích hoạt phần còn lại của ảnh động vuốt ngược. Còn nếu ít hơn 50% chiều rộng màn hình, ứng dụng sẽ quay lại chế độ xem toàn bộ ứng dụng.

Nếu cử chỉ diễn ra nhanh, hãy bỏ qua quy tắc ngưỡng 50% và vuốt ngược lại.