Thêm tính năng hỗ trợ cho ảnh động xem trước thao tác quay lại

Khi sử dụng API quay lại hệ thống, bạn có thể chọn nhận các ảnh động trong ứng dụng và hỗ trợ các hiệu ứng chuyển đổi tuỳ chỉnh.

Sau khi chọn tham gia, ứng dụng của bạn sẽ hiện ảnh động cho thao tác quay lại trang chủ, giữa các hoạt động và tác vụ.

Video này minh hoạ nhanh về ảnh động xem trước thao tác quay lại cho nhiều hoạt động và thao tác quay lại trang chủ qua ứng dụng Cài đặt của Android.

1. Ví dụ về ảnh động của nhiều hoạt động: Trong ảnh động, người dùng vuốt ngược lại để quay lại màn hình cài đặt trước đó.
2. Ví dụ về ảnh động quay lại trang chủ: Lúc này, trên màn hình trước, người dùng bắt đầu vuốt ngược lại lần thứ hai, thì bản xem trước của màn hình chính cùng với hình nền sẽ hiện ra.
3. Người dùng tiếp tục vuốt sang phải, thì ảnh động cho thấy cửa sổ hiện tại bị thu nhỏ thành biểu tượng trên màn hình chính sẽ xuất hiện.
4. Giờ đây, người dùng hoàn toàn đã trở lại màn hình chính.

Tìm hiểu thêm về cách Thêm hoạt động hỗ trợ cho tính năng xem trước thao tác quay lại.

Thêm hiệu ứng chuyển đổi và ảnh động tuỳ chỉnh trong ứng dụng

Bạn có thể tạo ảnh động và hiệu ứng chuyển đổi tuỳ chỉnh cho thuộc tính trong ứng dụng, ảnh động tuỳ chỉnh trên nhiều hoạt động và ảnh động tuỳ chỉnh trên nhiều mảnh bằng cử chỉ xem trước thao tác quay lại.

Thêm hiệu ứng chuyển đổi tuỳ chỉnh trong Jetpack Compose

Bạn có thể dùng PredictiveBackHandler để xử lý cử chỉ xem trước thao tác quay lại trong Jetpack Compose nhằm tạo hiệu ứng chuyển đổi tuỳ chỉnh trong ứng dụng. Tính năng này có trên phiên bản androidx.activity:activity-compose:1.8.0-alpha01 trở lên.

PredictiveBackHandler cung cấp một lambda gọi lại hiển thị Flow<BackEventCompat> phát ra các sự kiện khi người dùng vuốt ngược lại từ cạnh. Những sự kiện này cung cấp thông tin về vị trí chạm của người dùng, cạnh vuốt và quan trọng nhất là progress. Bạn có thể dùng thông tin này để tạo hiệu ứng cho các thành phần khi xử lý cử chỉ quay lại.

Đoạn mã sau đây là một ví dụ về cách sử dụng PredictiveBackHandler để tạo ảnh động cho một Surface thu nhỏ và di chuyển ra xa theo tiến trình của cử chỉ:

@Composable
fun DetailScreen(onBack: () -> Unit) {
    var scale by remember { mutableFloatStateOf(1f) }
    var xOffset by remember { mutableFloatStateOf(0f) }
    val scope = rememberCoroutineScope()

    PredictiveBackHandler { progressFlow ->
        try {
            progressFlow.collectLatest { backEvent ->
                scale = 1f - backEvent.progress
                xOffset = backEvent.progress * 100f
            }
            // User completed gesture
            onBack()
        } catch (e: CancellationException) {
            // User cancelled gesture
            // Animate scale and xOffset back to 1f and 0f respectively
            scope.launch {
                animate(scale, 1f) { value, _ -> scale = value }
            }
            scope.launch {
                animate(xOffset, 0f) { value, _ -> xOffset = value }
            }
        }
    }
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Surface(
            modifier = Modifier
                .size(200.dp)
                .scale(scale)
                .offset(x = xOffset.dp, y = 0.dp),
            color = Color.Blue
        ) {}
    }
}