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ụ.
Bạn cũng có thể nâng cấp phần phụ thuộc thành phần Material lên phiên bản 1.10.0 của MDC Android để nhận được các ảnh động của thành phần Material như sau:
Hãy xem hướng dẫn dành cho nhà phát triển thành phần Material trên GitHub để biết thêm thông tin.
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.
- 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 đó.
- 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.
- 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.
- 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 trên nhiều hoạt động và ảnh động tuỳ chỉnh trên nhiều mảnh có tính năng dự đoán cử chỉ quay lại.
Thêm hiệu ứng chuyển đổi tuỳ chỉnh bằng Progress API
Với AndroidX Activity 1.8.0-alpha01 trở lên, bạn có thể sử dụng tính năng Xem trước thao tác quay lại
API tiến trình để phát triển ảnh động tuỳ chỉnh cho
tính năng xem trước thao tác quay lại trong ứng dụng của bạn. Progress API rất hữu ích trong việc tạo ảnh động
nhưng có hạn chế khi tạo ảnh động chuyển đổi giữa các mảnh. Bên trong
OnBackPressedCallback
chúng tôi đã giới thiệu thuộc tính
handleOnBackProgressed
,
handleOnBackCancelled
và
handleOnBackStarted
để tạo ảnh động cho đối tượng khi người dùng vuốt ngược lại. Hãy sử dụng các phương pháp này nếu bạn
cần tuỳ chỉnh nhiều hơn so với ảnh động mặc định do hệ thống cung cấp, hoặc
các ảnh động trong Thành phần Material.
Chúng tôi dự kiến rằng hầu hết ứng dụng sẽ dùng các API AndroidX tương thích ngược. Tuy nhiên, trong OnBackAnimationCallback
cũng có sẵn các API nền tảng tương tự để kiểm thử trong Bản dùng thử 1 cho nhà phát triển trên Android 14 trở lên.
Sử dụng Progress API với hiệu ứng chuyển đổi AndroidX
Bạn có thể sử dụng Progress API với AndroidX Transitions 1.5.0-alpha01 trở lên trên Android 14 trở lên để tạo các hiệu ứng chuyển đổi Xem trước thao tác quay lại.
- Sử dụng
TransitionManager#controlDelayedTransition
thay vìbeginDelayedTransition
để phát các hiệu ứng chuyển đổi khi người dùng vuốt ngược lại. - Tạo hiệu ứng chuyển đổi trong
handleOnBackStarted
. - Phát hiệu ứng chuyển đổi với sự kiện quay lại trong
handleOnBackProgressed
bằng cách liên kếtcurrentFraction
vớiBackEvent.progress
để cho biết khoảng cách mà người dùng đã vuốt ngược lại. - Hoàn tất hiệu ứng chuyển đổi sau khi người dùng thực hiện cử chỉ quay lại trong
handleOnBackPressed
. - Cuối cùng, đặt lại hiệu ứng chuyển đổi trong
handleOnBackCancelled
.
Video, mã Kotlin và XML sau đây minh hoạ hiệu ứng chuyển đổi tuỳ chỉnh giữa 2 hộp được triển khai bằng OnBackPressedCallback
:
class MyFragment : Fragment() { val transitionSet = TransitionSet().apply { addTransition(Fade(Fade.MODE_OUT)) addTransition(ChangeBounds()) addTransition(Fade(Fade.MODE_IN)) } ... override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) val callback = object : OnBackPressedCallback(enabled = false) { var controller: TransitionSeekController? = null @RequiresApi(34) override fun handleOnBackStarted(backEvent: BackEvent) { // Create the transition controller = TransitionManager.controlDelayedTransition( binding.card, transitionSet ) changeTextVisibility(ShowText.SHORT) } @RequiresApi(34) override fun handleOnBackProgressed(backEvent: BackEvent) { // Play the transition as the user swipes back if (controller?.isReady == true) { controller?.currentFraction = backEvent.progress } } override fun handleOnBackPressed() { // Finish playing the transition when the user commits back controller?.animateToEnd() this.isEnabled = false } @RequiresApi(34) override fun handleOnBackCancelled() { // If the user cancels the back gesture, reset the state transition(ShowText.LONG) } } binding.shortText.setOnClickListener { transition(ShowText.LONG) callback.isEnabled = true } this.requireActivity().onBackPressedDispatcher.addCallback(callback) } private fun transition(showText: ShowText) { TransitionManager.beginDelayedTransition( binding.card, transitionSet ) changeTextVisibility(showText) } enum class ShowText { SHORT, LONG } private fun changeTextVisibility(showText: ShowText) { when (showText) { ShowText.SHORT -> { binding.shortText.isVisible = true binding.longText.isVisible = false } ShowText.LONG -> { binding.shortText.isVisible = false binding.longText.isVisible = true } } } }
<?xml version="1.0" encoding="utf-8"?>
...
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...>
<TextView
android:id="@+id/short_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
... />
<TextView
android:id="@+id/long_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
.../>
</androidx.constraintlayout.widget.ConstraintLayout>
Khi sử dụng hiệu ứng chuyển đổi Xem trước thao tác quay lại, hãy lưu ý làm như sau:
- Dùng
isSeekingSupported
để kiểm tra xem hiệu ứng chuyển đổi có hỗ trợ cử chỉ Xem trước thao tác quay lại hay không. - Ghi đè
isSeekingSupported
để trả về giá trị true cho hiệu ứng chuyển đổi tuỳ chỉnh. - Tạo một bộ điều khiển cho mỗi ảnh động.
- Hiệu ứng chuyển đổi Xem trước thao tác quay lại được hỗ trợ với hiệu ứng chuyển đổi AndroidX, nhưng không được hỗ trợ với hiệu ứng chuyển đổi khung. Bạn nên thoát khỏi các hiệu ứng chuyển đổi khung.
- Hiệu ứng chuyển đổi Xem trước thao tác quay lại được hỗ trợ trên các thiết bị chạy Android 14 trở lên và không tương thích ngược.
- Các hiệu ứng chuyển đổi được tạo bằng cảnh XML cũng được hỗ trợ. Trong
handleOnBackStarted
, hãy đặtTransitionSeekController
thành kết quả củaTransitionManager.createSeekController
thay vì kết quả củacontrolDelayedTransition
.
Thêm hiệu ứng chuyển đổi tuỳ chỉnh cho hoạt động trên Android 14 trở lên
Để đảm bảo các hiệu ứng chuyển đổi tuỳ chỉnh của Hoạt động hỗ trợ tính năng Xem trước thao tác quay lại trên Android 14 trở lên, bạn có thể sử dụng overrideActivityTransition
thay vì overridePendingTransition
. Điều này có nghĩa là ảnh động hiệu ứng chuyển đổi sẽ phát khi người dùng vuốt ngược lại.
Để có một ví dụ về cách hoạt động của điều này, hãy tưởng tượng một tình huống trong đó Hoạt động B nằm ở trên Hoạt động A trong ngăn xếp lui. Bạn sẽ xử lý ảnh động tuỳ chỉnh của Hoạt động theo cách sau:
- Gọi chuyển đổi mở hoặc đóng trong phương thức
onCreate
của Hoạt động B. - Khi người dùng chuyển đến Hoạt động B, hãy sử dụng
OVERRIDE_TRANSITION_OPEN
. Khi người dùng vuốt để quay lại Hoạt động A, hãy sử dụngOVERRIDE_TRANSITION_CLOSE
. Khi chỉ định
OVERRIDE_TRANSITION_CLOSE
,enterAnim
là ảnh động tiến nhập của Hoạt động A vàexitAnim
là ảnh động rời khỏi của Hoạt động B.
Thêm hoạt động hỗ trợ cho tính năng Xem trước thao tác quay lại bằng các mảnh
Có 2 phương pháp để triển khai tính năng Xem trước thao tác quay lại bằng các mảnh.
Sử dụng API hiện có
Bạn nên sử dụng các API hiện có. Các API này cho phép bạn vuốt từ cạnh màn hình để thao tác với các hiệu ứng chuyển đổi của Animator hoặc Androidx bằng cử chỉ. Việc bạn di chuyển cử chỉ qua một ngưỡng sẽ xác định xem cử chỉ đó có hoàn tất và bạn quay lại mảnh trước đó hoặc mảnh bị huỷ và bạn vẫn còn trên mảnh hiện tại. Để biết thêm thông tin, hãy xem bài viết Điều hướng giữa các mảnh bằng ảnh động.
Hãy lưu ý các yếu tố sau:
- Nhập Transitions 1.5.0 trở lên và Fragments 1.7.0 trở lên. Đa số tính năng hỗ trợ xem trước thao tác quay lại bằng các Mảnh dựa trên hiệu ứng Chuyển đổi có khả năng tìm kiếm các ảnh động, điều này chỉ có thể thực hiện trong phiên bản Transitions 1.5.0 trở lên.
- Sử dụng các Mảnh, với
FragmentManager
hoặc thành phần Điều hướng, để xử lý ngăn xếp lui. Tính năng Xem trước thao tác quay lại không được hỗ trợ nếu bạn quản lý ngăn xếp lui của riêng mình. - Một số thư viện có hỗ trợ tính năng Xem trước thao tác quay lại. Hãy xem tài liệu để biết chắc chắn.
- Lớp
Animator
và thư việnAndroidX Transition
được hỗ trợ. - Lớp
Animation
và thư việnTransition
của khung không được hỗ trợ. - Ảnh động xem trước chỉ hoạt động trên các thiết bị chạy Android 14 trở lên.
Bạn có thể dùng tính năng xem trước thao tác quay lại trên nhiều mảnh trong các trường hợp sau:
- Tạo ảnh động cho thành phần điều hướng.
- Tạo ảnh động bằng
setCustomAnimations
. - Tạo ảnh động chuyển đổi vào và thoát bằng
setEnterTransition
,setExitTransition
,setReenterTransition
vàsetReturnTransition
. - Tạo ảnh động chuyển đổi cho các thành phần dùng chung bằng
setSharedElementEnterTransition
vàsetSharedElementReturnTransition
.
Một số chuyển động Material
hỗ trợ tính năng xem trước thao tác quay lại kể từ
1.12.02-alpha02
trở lên, bao gồm MaterialFadeThrough
, MaterialSharedAxis
và
MaterialFade
. Lưu ý: MaterialContainerTransform
không hỗ trợ tính năng dự đoán
quay lại.
Sử dụng lệnh gọi lại
Bạn có thể tạo hiệu ứng chuyển đổi giữa các mảnh bằng cách sử dụng lệnh gọi lại, tuy nhiên có một giới hạn đã biết khi sử dụng các lệnh gọi lại mà người dùng không thể xem các lệnh gọi lại khi vuốt ngược lại. Cách tạo hiệu ứng chuyển đổi phần tử dùng chung giữa nhiều mảnh tương ứng với tính năng xem trước thao tác quay lại hướng dẫn thiết kế, thực hiện sau:
Tạo một OnBackPressedCallback
. Trong handleOnBackProgressed
, hãy điều chỉnh theo tỷ lệ và
di chuyển mảnh. Sau đó, kéo ra khỏi ngăn xếp lui. Tiếp theo, hãy chạy phần tử dùng chung
chuyển đổi bằng setSharedElementReturnTransition
bên ngoài lệnh gọi lại.
Để biết thêm thông tin, hãy xem mã mẫu trên GitHub.
Yêu cầu
Sử dụng các bảng sau đây để xem nội dung nào được kiểm soát bởi các tuỳ chọn cho nhà phát triển, targetSdkVersion
và compileSdkVersion
, phiên bản thiết bị, phần phụ thuộc, cờ tệp kê khai và cờ mảnh. Bảng đầu tiên đề cập đến các yêu cầu đối với mã.
Danh mục | Ảnh động | compileSdk | targetSdk | android:enableOnBackInvokedCallback | Phần phụ thuộc |
---|---|---|---|---|---|
Ảnh động hệ thống | Quay lại trang chủ | 33 | Bất kỳ | TRUE | Không có |
Nhiều hoạt động | 34 | Bất kỳ | TRUE | Không có | |
Nhiều nhiệm vụ | 34 | Bất kỳ | TRUE | Không có | |
Nền tảng | Nhiều hoạt động tuỳ chỉnh | 34 | Bất kỳ | TRUE | Không có |
Nền tảng API tiến trình | 34 | Bất kỳ | TRUE | Không có | |
Thành phần Material | Bảng dưới cùng | 34 | Bất kỳ | TRUE | Thành phần Material 1.10.0 |
Trang bên | 34 | Bất kỳ | TRUE | Thành phần Material 1.10.0 | |
Ngăn điều hướng | 34 | Bất kỳ | TRUE | Thành phần Material 1.10.0 | |
Tìm kiếm | 34 | Bất kỳ | TRUE | Thành phần Material 1.10.0 | |
Ảnh động Jetpack | Phân mảnh tuỳ chỉnh của AndroidX | 34 | Bất kỳ | TRUE | AndroidX Fragment 1.7 |
Chuyển đổi AndroidX tuỳ chỉnh | 34 | Bất kỳ | TRUE | AndroidX Transition 1.5 | |
Jetpack API tiến trình | 34 | Bất kỳ | TRUE | AndroidX Activity 1.8 |
Bảng sau đây đề cập đến các yêu cầu cho phép người dùng xem ảnh động.
Danh mục | Ảnh động | Đã bật Tuỳ chọn cho nhà phát triển | Phiên bản thiết bị |
---|---|---|---|
Ảnh động hệ thống | Quay lại trang chủ | TRUE | 33 |
Nhiều hoạt động | TRUE | 34 | |
Nhiều nhiệm vụ | TRUE | 34 | |
Nền tảng | Nhiều hoạt động tuỳ chỉnh | TRUE | 34 |
Nền tảng API tiến trình | FALSE | 34 | |
Thành phần Material | Bảng dưới cùng | FALSE | 34 |
Trang bên | FALSE | 34 | |
Ngăn điều hướng | FALSE | 34 | |
Tìm kiếm | FALSE | 34 | |
Ảnh động Jetpack | Phân mảnh tuỳ chỉnh của AndroidX | FALSE | 34 |
Chuyển đổi AndroidX tuỳ chỉnh | FALSE | 34 | |
Jetpack API tiến trình | FALSE | 34 |
Tài nguyên khác
- Mã mẫu xem trước thao tác quay lại
- Kiến thức cơ bản về video trước đây của hệ thống
- Xây dựng tương lai của video trên Android