Tính năng xem trước thao tác quay lại trong Compose

Tính năng xem trước thao tác quay lại (một tính năng điều hướng bằng cử chỉ) cho phép người dùng xem trước vị trí mà thao tác vuốt quay lại sẽ đưa họ đến. Tính năng xem trước thao tác quay lại tích hợp liền mạch với Compose để cải thiện trải nghiệm điều hướng của ứng dụng. Người dùng sẽ được trải nghiệm các chuyển đổi mượt mà và trực quan hơn khi quay lại trong ứng dụng của bạn. Hình 1 cho thấy cách hoạt động của tính năng này trong ứng dụng mẫu SociaLite.

Hướng dẫn này mô tả cách thực hiện những thao tác sau với tính năng dự đoán thao tác quay lại:

• Chọn sử dụng tính năng xem trước thao tác quay lại
• Bật ảnh động mặc định của hệ thống
• Bật tính năng xem trước thao tác quay lại bằng Navigation Compose
• Tích hợp với hiệu ứng chuyển đổi phần tử dùng chung
• Hỗ trợ tính năng xem trước thao tác quay lại bằng các thành phần Material Compose
• Truy cập tiến trình theo cách thủ công bằng PredictiveBackHandler
• Kiểm thử ảnh động xem trước thao tác quay lại

Chọn sử dụng tính năng xem trước thao tác quay lại

Để bật ảnh động xem trước thao tác quay lại, bạn phải chọn hỗ trợ tính năng xem trước thao tác quay lại. Để chọn sử dụng, hãy thêm android:enableOnBackInvokedCallback="true" vào thẻ <application> hoặc các thẻ <activity> riêng lẻ trong tệp AndroidManifest.xml.

Bật ảnh động mặc định của hệ thống

Ảnh động hệ thống cho thao tác quay lại trang chủ, giữa các hoạt động và tác vụ có trên các thiết bị chạy Android 15 trở lên đối với những ứng dụng đã di chuyển sang các API xử lý thao tác quay lại được hỗ trợ.

• Quay lại màn hình chính: Đưa người dùng trở lại màn hình chính.
• Nhiều hoạt động: Chuyển đổi giữa các hoạt động trong ứng dụng.
• Nhiều tác vụ: Hiệu ứng chuyển đổi giữa các tác vụ.

Các ảnh động này được bật theo mặc định trên Android 15 trở lên. Trên các thiết bị chạy Android 13 hoặc 14, người dùng có thể bật các tính năng này thông qua Tuỳ chọn cho nhà phát triển.

Để có ảnh động hệ thống, hãy cập nhật phần phụ thuộc Activity AndroidX lên 1.6.0 trở lên.

Bật tính năng xem trước thao tác quay lại bằng Navigation Compose

Để sử dụng tính năng xem trước thao tác quay lại trong Navigation Compose, hãy đảm bảo bạn đang sử dụng thư viện navigation-compose 2.8.0 trở lên.

Navigation Compose tự động chuyển đổi hiệu ứng giữa các màn hình khi người dùng vuốt ngược:

Khi điều hướng, bạn có thể tạo hiệu ứng chuyển đổi tuỳ chỉnh bằng popEnterTransition và popExitTransition. Khi áp dụng cho NavHost, các công cụ sửa đổi này cho phép bạn xác định cách tạo ảnh động cho màn hình nhập và thoát. Bạn có thể sử dụng các hiệu ứng này để tạo nhiều hiệu ứng, chẳng hạn như điều chỉnh theo tỷ lệ, làm mờ hoặc trượt.

Trong ví dụ này, scaleOut được sử dụng trong popExitTransition để thu nhỏ màn hình thoát khi người dùng quay lại. Ngoài ra, tham số transformOrigin xác định điểm mà ảnh động điều chỉnh theo tỷ lệ xảy ra. Theo mặc định, đó là tâm màn hình (0.5f, 0.5f). Bạn có thể điều chỉnh giá trị này để tỷ lệ bắt nguồn từ một điểm khác.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

Mã này sẽ tạo ra kết quả sau:

popEnterTransition và popExitTransition kiểm soát cụ thể ảnh động khi bật ngăn xếp lui, chẳng hạn như bằng cử chỉ quay lại. Bạn cũng có thể sử dụng enterTransition và exitTransition để xác định ảnh động cho việc nhập và thoát khỏi các thành phần kết hợp nói chung, không chỉ cho tính năng xem trước thao tác quay lại. Nếu bạn chỉ đặt enterTransition và exitTransition, thì các giá trị này sẽ được dùng cho cả thao tác điều hướng thông thường và bật ngăn xếp lui. Tuy nhiên, việc sử dụng popEnterTransition và popExitTransition cho phép bạn tạo ảnh động riêng biệt cho thao tác quay lại.

Tích hợp với hiệu ứng chuyển đổi phần tử dùng chung

Hiệu ứng chuyển đổi thành phần được chia sẻ tạo ra mối liên kết trực quan mượt mà giữa các thành phần kết hợp có nội dung được chia sẻ, thường được dùng để điều hướng.

Để sử dụng các phần tử dùng chung với Navigation Compose, hãy xem phần Tính năng dự đoán thao tác quay lại bằng các phần tử dùng chung.

Hỗ trợ tính năng xem trước thao tác quay lại bằng các thành phần Material Compose

Nhiều thành phần trong thư viện Material Compose được thiết kế để hoạt động liền mạch với cử chỉ xem trước thao tác quay lại. Để bật ảnh động xem trước thao tác quay lại trong các thành phần này, hãy đưa phần phụ thuộc Material3 mới nhất (androidx.compose.material3:material3-*:1.3.0 trở lên) vào dự án.

Các thành phần Material hỗ trợ ảnh động xem trước thao tác quay lại bao gồm:

• SearchBar
• ModalBottomSheet
• ModalDrawerSheet/DismissibleDrawerSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

SearchBar và ModalBottomSheet tự động tạo ảnh động bằng các cử chỉ xem trước thao tác quay lại. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet và DismissibleNavigationDrawer yêu cầu bạn truyền drawerState đến các thành phần kết hợp nội dung trang tính tương ứng.

Truy cập tiến trình theo cách thủ công bằng PredictiveBackHandler

Thành phần kết hợp PredictiveBackHandler[5] trong Jetpack Compose cho phép bạn chặn cử chỉ quay lại và truy cập vào tiến trình của cử chỉ đó. Bạn có thể phản ứng với cử chỉ quay lại của người dùng theo thời gian thực, tạo ảnh động hoặc hành vi tuỳ chỉnh dựa trên khoảng cách người dùng vuốt.

Để sử dụng PredictiveBackHandler, hãy đảm bảo bạn đang sử dụng androidx.activity:activity:1.6.0 trở lên.

PredictiveBackHandler cung cấp Flow<BackEventCompat> phát ra các sự kiện đại diện cho tiến trình của cử chỉ quay lại. Mỗi sự kiện chứa thông tin như:

• progress: Giá trị số thực dấu phẩy động từ 0 đến 1 cho biết tiến trình của cử chỉ quay lại (0 = cử chỉ bắt đầu, 1 = cử chỉ hoàn tất).
• touchX và touchY: Toạ độ X và Y của sự kiện chạm.

Đoạn mã sau đây cho thấy cách sử dụng cơ bản của PredictiveBackHandler:

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

Ví dụ: Tích hợp với ngăn điều hướng

Ví dụ này minh hoạ cách triển khai ảnh động tuỳ chỉnh trong ứng dụng bằng PredictiveBackHandler để tạo tương tác mượt mà với ngăn điều hướng nhằm phản hồi các cử chỉ quay lại trong JetLagged:

Trong ví dụ này, PredictiveBackHandler được dùng để:

• Theo dõi tiến trình của cử chỉ quay lại.
• Cập nhật translationX của ngăn dựa trên tiến trình cử chỉ.
• Sử dụng velocityTracker để mở hoặc đóng ngăn một cách mượt mà dựa trên tốc độ cử chỉ khi cử chỉ hoàn tất hoặc bị huỷ.

Kiểm thử ảnh động xem trước thao tác quay lại

Nếu vẫn sử dụng Android 13 hoặc Android 14, bạn có thể thử ảnh động quay lại màn hình chính.

Để kiểm thử ảnh động này, hãy làm theo các bước sau:

1. Trên thiết bị của bạn, hãy chuyển đến phần Cài đặt > Hệ thống > Tuỳ chọn cho nhà phát triển (Settings > System > Developer options).
2. Chọn Ảnh động vuốt ngược dự đoán.
3. Chạy ứng dụng đã cập nhật và dùng cử chỉ vuốt ngược để xem ứng dụng hoạt động.

Trên Android 15 trở lên, tính năng này được bật theo mặc định.

Tài nguyên khác

• Lớp học lập trình về cách thêm ảnh động xem trước thao tác quay lại
• Ảnh động nâng cao về bố cục trong video Compose