1. Giới thiệu
Material Design là hệ thống để tạo các sản phẩm kỹ thuật số đẹp mắt và ấn tượng. Bằng cách kết hợp phong cách, thương hiệu, hoạt động tương tác và chuyển động theo một bộ nguyên tắc và thành phần nhất quán, các nhóm sản phẩm có thể khai thác tối đa tiềm năng thiết kế của mình.
Thành phần Material (MDC) giúp nhà phát triển triển khai Material Design. Được tạo bởi một nhóm các kỹ sư và nhà thiết kế trải nghiệm người dùng tại Google, MDC có hàng chục thành phần giao diện người dùng đẹp mắt, dễ sử dụng và được cung cấp cho Android, iOS, web và Flutter.material.io/develop |
Hệ thống chuyển động của Material dành cho Android là gì?
Hệ thống chuyển động Material dành cho Android là một tập hợp các mẫu chuyển đổi trong thư viện MDC-Android có thể giúp người dùng hiểu và thao tác trong ứng dụng, như mô tả trong nguyên tắc Material Design.
Material có 4 mẫu chuyển đổi chính như sau:
- Chuyển đổi vùng chứa: chuyển đổi giữa các phần tử trên giao diện người dùng có chứa một vùng chứa; tạo mối liên kết rõ ràng giữa hai phần tử riêng biệt trên giao diện người dùng bằng cách chuyển đổi liền mạch một phần tử thành một phần tử khác.
- Trục dùng chung: chuyển đổi giữa các thành phần giao diện người dùng có mối quan hệ về hướng hoặc không gian; sử dụng phép biến đổi dùng chung trên trục x, y hoặc z để củng cố mối quan hệ giữa các thành phần.
- Hiệu ứng mờ dần: chuyển đổi giữa các thành phần trên giao diện người dùng không có mối quan hệ chặt chẽ với nhau; sử dụng hiệu ứng làm mờ và hiện dần theo tuần tự theo tỷ lệ của thành phần sắp chuyển đến.
- Mờ: dùng cho các thành phần giao diện người dùng đi vào hoặc thoát ra trong phạm vi màn hình.
Thư viện MDC-Android cung cấp các lớp chuyển đổi cho những mẫu này, được xây dựng dựa trên cả thư viện Chuyển đổi AndroidX (androidx.transition) và Khung chuyển đổi Android (android.transition):
AndroidX
- Có trong gói
com.google.android.material.transition - Hỗ trợ API cấp 14 trở lên
- Hỗ trợ các Mảnh và Khung hiển thị, nhưng không hỗ trợ Hoạt động hoặc Windows
- Chứa các bản sửa lỗi được điều chỉnh cho phiên bản cũ và hành vi nhất quán trên các cấp độ API
Khung
- Có trong gói
com.google.android.material.transition.platform - Hỗ trợ API cấp 21 trở lên
- Hỗ trợ các Mảnh, Khung hiển thị, Hoạt động và Cửa sổ
- Các bản sửa lỗi không được điều chỉnh cho phiên bản cũ và có thể có hành vi khác nhau trên các cấp độ API
Trong lớp học lập trình này, bạn sẽ sử dụng các hiệu ứng chuyển đổi Material được xây dựng dựa trên thư viện AndroidX, tức là bạn sẽ tập trung chủ yếu vào các Mảnh và Khung hiển thị.
Sản phẩm bạn sẽ tạo ra
Lớp học lập trình này sẽ hướng dẫn bạn xây dựng một số hiệu ứng chuyển đổi thành một ứng dụng email Android mẫu có tên là Trả lời bằng Kotlin, để minh hoạ cách sử dụng các hiệu ứng chuyển đổi trong thư viện MDC-Android để tuỳ chỉnh giao diện của ứng dụng.
Chúng tôi sẽ cung cấp đoạn mã khởi đầu cho ứng dụng Reply (Trả lời) và bạn sẽ kết hợp các hiệu ứng chuyển đổi Material sau đây vào ứng dụng. Bạn có thể xem ảnh GIF đã hoàn thành của lớp học lập trình dưới đây:
- Chuyển đổi Chuyển đổi vùng chứa từ danh sách email sang trang chi tiết email
- Chuyển đổi Chuyển đổi vùng chứa từ FAB sang trang email Compose
- Chuyển đổi Trục Z được chia sẻ từ biểu tượng tìm kiếm sang trang chế độ xem tìm kiếm
- Chuyển đổi Fade through (Làm mờ) giữa các trang hộp thư
- Chuyển đổi Chuyển đổi vùng chứa từ khối địa chỉ email sang chế độ xem thẻ
Bạn cần có
- Kiến thức cơ bản về cách phát triển cho Android và Kotlin
- Android Studio (tải xuống tại đây nếu bạn chưa có)
- Trình mô phỏng hoặc thiết bị Android (có sẵn thông qua Android Studio)
- Mã mẫu (xem bước tiếp theo)
Bạn đánh giá mức độ kinh nghiệm xây dựng ứng dụng Android của mình ở mức nào?
2. Thiết lập môi trường phát triển
Khởi động Android Studio
Khi bạn mở Android Studio, một cửa sổ có tiêu đề "Welcome to Android Studio" (Chào mừng bạn đến với Android Studio) sẽ xuất hiện. Tuy nhiên, nếu đây là lần đầu tiên bạn chạy Android Studio, hãy làm theo các bước trong Android Studio Setup Wizard (Trình hướng dẫn thiết lập Android Studio) với các giá trị mặc định. Bước này có thể mất vài phút để tải xuống và cài đặt các tệp cần thiết, vì vậy, bạn có thể để quá trình này chạy ở chế độ nền trong khi thực hiện phần tiếp theo.
Cách 1: Sao chép ứng dụng của lớp học lập trình ban đầu trên GitHub
Để sao chép lớp học lập trình này từ GitHub, hãy chạy các lệnh sau:
git clone https://github.com/material-components/material-components-android-motion-codelab.git cd material-components-android-motion-codelab
Cách 2: Tải tệp zip của ứng dụng dành cho lớp học lập trình ban đầu
Ứng dụng khởi đầu này nằm trong thư mục material-components-android-motion-codelab-develop.
Tải mã khởi đầu trong Android Studio
- Sau khi trình hướng dẫn thiết lập hoàn tất và cửa sổ Welcome to Android Studio (Chào mừng bạn đến với Android Studio) hiển thị, hãy nhấp vào Open an existing Android Studio project (Mở một dự án Android Studio hiện có).
- Chuyển đến thư mục mà bạn đã cài đặt mã mẫu và chọn thư mục mẫu để mở dự án.
- Chờ một lát để Android Studio tạo và đồng bộ hoá dự án, như được hiển thị bằng các chỉ báo hoạt động ở cuối cửa sổ Android Studio.
- Tại thời điểm này, Android Studio có thể phát sinh một số lỗi bản dựng do bạn đang thiếu SDK Android hoặc công cụ xây dựng, chẳng hạn như lỗi hiển thị dưới đây. Làm theo hướng dẫn trong Android Studio để cài đặt/cập nhật các SDK này và đồng bộ hoá dự án. Nếu bạn vẫn gặp vấn đề, hãy làm theo hướng dẫn về cách cập nhật các công cụ bằng Trình quản lý SDK.
Xác minh các phần phụ thuộc của dự án
Dự án cần phần phụ thuộc trên thư viện MADC-Android. Mã mẫu mà bạn tải xuống phải đã liệt kê phần phụ thuộc này, nhưng hãy xem cấu hình để đảm bảo.
Chuyển đến tệp build.gradle của mô-đun app và đảm bảo rằng khối dependencies bao gồm một phần phụ thuộc trên MDC-Android:
implementation 'com.google.android.material:material:1.2.0'
Chạy ứng dụng ban đầu
- Đảm bảo rằng cấu hình bản dựng ở bên trái lựa chọn thiết bị là
app. - Nhấn vào nút Chạy/Phát màu xanh lục để tạo và chạy ứng dụng.
- Trong cửa sổ Select Deployment Target (Chọn đối tượng triển khai), nếu bạn đã có thiết bị Android trong danh sách thiết bị hiện có, hãy chuyển đến Bước 8. Nếu không, hãy nhấp vào Create New Virtual Device (Tạo thiết bị ảo mới).
- Trên màn hình Select Hardware (Chọn phần cứng), hãy chọn một thiết bị điện thoại, chẳng hạn như Pixel 3, sau đó nhấp vào Next (Tiếp theo).
- Trên màn hình System Image (Hình ảnh hệ thống), hãy chọn một phiên bản Android gần đây, tốt nhất là cấp độ API cao nhất. Nếu bạn chưa cài đặt, hãy nhấp vào đường liên kết Download (Tải xuống) hiển thị rồi hoàn tất quá trình tải xuống.
- Nhấp vào Tiếp theo.
- Trên màn hình Android Virtual Device (AVD) (Thiết bị Android ảo (AVD)), hãy giữ nguyên chế độ cài đặt rồi nhấp vào Finish (Hoàn tất).
- Chọn một thiết bị Android trong hộp thoại đích triển khai.
- Nhấp vào Ok.
- Android Studio sẽ tạo ứng dụng, triển khai ứng dụng và tự động mở ứng dụng trên thiết bị mục tiêu.
Thành công! Mã khởi động cho trang chủ của Reply sẽ chạy trong trình mô phỏng. Bạn sẽ thấy Hộp thư đến chứa danh sách email.
Không bắt buộc: Làm chậm ảnh động trên thiết bị
Vì lớp học lập trình này liên quan đến các hiệu ứng chuyển đổi nhanh chóng nhưng chỉn chu, nên có thể hữu ích khi bạn làm chậm ảnh động của thiết bị để quan sát một số chi tiết rõ ràng hơn của các hiệu ứng chuyển đổi khi bạn đang triển khai. Bạn có thể thực hiện việc này bằng các lệnh shell adb hoặc Thẻ thông tin Cài đặt nhanh. Xin lưu ý rằng những phương thức làm chậm ảnh động trên thiết bị này cũng sẽ ảnh hưởng đến ảnh động trên thiết bị bên ngoài ứng dụng Reply.
Phương pháp 1: Các lệnh shell ADB
Để làm chậm ảnh động của thiết bị theo hệ số 10 lần, bạn có thể chạy các lệnh sau từ dòng lệnh:
adb shell settings put global window_animation_scale 10
adb shell settings put global transition_animation_scale 10
adb shell settings put global animator_duration_scale 10
Để đặt lại tốc độ ảnh động của thiết bị về chế độ bình thường, hãy chạy các lệnh sau:
adb shell settings put global window_animation_scale 1
adb shell settings put global transition_animation_scale 1
adb shell settings put global animator_duration_scale 1
Phương pháp 2: Thẻ thông tin trong phần Cài đặt nhanh
Ngoài ra, để thiết lập Thẻ cài đặt nhanh, trước tiên, hãy bật phần Cài đặt cho nhà phát triển trên thiết bị của bạn nếu bạn chưa bật:
- Mở ứng dụng "Cài đặt" trên thiết bị
- Di chuyển xuống dưới cùng rồi nhấp vào "Giới thiệu về thiết bị được mô phỏng"
- Di chuyển xuống dưới cùng rồi nhấp nhanh vào "Số bản dựng" cho đến khi chế độ Cài đặt dành cho nhà phát triển bật
Tiếp theo, hãy làm như sau trong ứng dụng "Cài đặt" trên thiết bị để bật Thẻ thông tin Cài đặt nhanh:
- Nhấp vào biểu tượng tìm kiếm hoặc thanh tìm kiếm ở đầu màn hình
- Nhập "thẻ thông tin" vào trường tìm kiếm
- Nhấp vào hàng "Ô cài đặt nhanh dành cho nhà phát triển"
- Nhấp vào nút chuyển "Tỷ lệ ảnh động cửa sổ"
Cuối cùng, trong suốt lớp học lập trình, hãy kéo ngăn thông báo hệ thống xuống từ đầu màn hình và sử dụng biểu tượng 
để chuyển đổi giữa ảnh động tốc độ chậm và tốc độ bình thường.
3. Làm quen với mã ứng dụng mẫu
Hãy cùng xem mã. Chúng tôi đã cung cấp một ứng dụng sử dụng thư viện thành phần Điều hướng Jetpack để di chuyển giữa một số Mảnh, tất cả đều nằm trong một Hoạt động duy nhất, MainActivity:
- HomeFragment: hiển thị danh sách email
- EmailFragment: hiển thị một email đầy đủ
- ComposeFragment: cho phép soạn một email mới
- SearchFragment: hiển thị thành phần hiển thị tìm kiếm
navigation_graph.xml
Trước tiên, để hiểu cách thiết lập biểu đồ điều hướng của ứng dụng, hãy mở navigation_graph.xml trong thư mục app -> src -> main -> res -> navigation:
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/navigation_graph"
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name="com.materialstudies.reply.ui.home.HomeFragment"
android:label="HomeFragment">
<argument...>
<action
android:id="@+id/action_homeFragment_to_emailFragment"
app:destination="@id/emailFragment" />
</fragment>
<fragment
android:id="@+id/emailFragment"
android:name="com.materialstudies.reply.ui.email.EmailFragment"
android:label="EmailFragment">
<argument...>
</fragment>
<fragment
android:id="@+id/composeFragment"
android:name="com.materialstudies.reply.ui.compose.ComposeFragment"
android:label="ComposeFragment">
<argument...>
</fragment>
<fragment
android:id="@+id/searchFragment"
android:name="com.materialstudies.reply.ui.search.SearchFragment"
android:label="SearchFragment" />
<action
android:id="@+id/action_global_homeFragment"
app:destination="@+id/homeFragment"
app:launchSingleTop="true"
app:popUpTo="@+id/navigation_graph"
app:popUpToInclusive="true"/>
<action
android:id="@+id/action_global_composeFragment"
app:destination="@+id/composeFragment" />
<action
android:id="@+id/action_global_searchFragment"
app:destination="@+id/searchFragment" />
</navigation>
Hãy lưu ý cách tất cả các mảnh được đề cập ở trên xuất hiện, với mảnh khởi chạy mặc định được đặt thành HomeFragment thông qua app:startDestination="@id/homeFragment". Định nghĩa XML này của biểu đồ đích đến của mảnh, cũng như các thao tác, sẽ thông báo cho mã điều hướng Kotlin được tạo mà bạn sẽ gặp phải khi kết nối các hiệu ứng chuyển đổi.
activity_main.xml
Tiếp theo, hãy xem bố cục activity_main.xml trong thư mục app -> src -> main -> res -> layout. Bạn sẽ thấy NavHostFragment được định cấu hình bằng biểu đồ điều hướng ở trên:
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="@navigation/navigation_graph"/>
NavHostFragment này lấp đầy màn hình và xử lý tất cả các thay đổi về thao tác điều hướng mảnh toàn màn hình trong ứng dụng. BottomAppBar và FloatingActionButton cố định cũng trong activity_main.xml được bố trí phía trên mảnh hiện tại do NavHostFragment hiển thị, do đó sẽ được hiển thị hoặc ẩn tuỳ thuộc vào đích đến của mảnh theo mã ứng dụng mẫu được cung cấp.
Ngoài ra, BottomNavDrawerFragment trong activity_main.xml là một ngăn dưới cùng chứa trình đơn để di chuyển giữa các hộp thư email khác nhau. Trình đơn này hiển thị có điều kiện thông qua nút biểu trưng Trả lời BottomAppBar.
MainActivity.kt
Cuối cùng, để xem ví dụ về một thao tác điều hướng đang được sử dụng, hãy mở MainActivity.kt trong thư mục app -> src -> main -> java -> com.materialstudies.reply.ui. Tìm hàm navigateToSearch(), hàm này có dạng như sau:
private fun navigateToSearch() {
val directions = SearchFragmentDirections.actionGlobalSearchFragment()
findNavController(R.id.nav_host_fragment).navigate(directions)
}
Hình này minh hoạ cách bạn có thể điều hướng đến trang chế độ xem tìm kiếm mà không có hiệu ứng chuyển đổi tuỳ chỉnh. Trong lớp học lập trình này, bạn sẽ tìm hiểu sâu về MainActivity và 4 mảnh chính của Reply để thiết lập các lượt chuyển đổi Material hoạt động song song với các thao tác điều hướng khác nhau trên toàn ứng dụng.
Giờ đây, khi bạn đã quen thuộc với mã khởi động, hãy triển khai hiệu ứng chuyển đổi đầu tiên.
4. Thêm hiệu ứng chuyển đổi Container Transform từ danh sách email sang trang chi tiết email
Để bắt đầu, bạn sẽ thêm một hiệu ứng chuyển đổi khi nhấp vào một email. Đối với thay đổi về điều hướng này, mẫu biến đổi vùng chứa là rất phù hợp, vì mẫu này được thiết kế để chuyển đổi giữa các phần tử trên giao diện người dùng có chứa vùng chứa. Mẫu này tạo ra sự kết nối rõ ràng giữa 2 thành phần trên giao diện người dùng.
Trước khi thêm bất kỳ mã nào, hãy thử chạy ứng dụng Reply (Trả lời) và nhấp vào một email. Thao tác này sẽ thực hiện một cú cắt đơn giản, tức là màn hình được thay thế mà không có hiệu ứng chuyển đổi:
Bắt đầu bằng cách thêm thuộc tính transitionName vào MaterialCardView trong email_item_layout.xml như trong đoạn mã sau:
email_item_layout.xml
android:transitionName="@{@string/email_card_transition_name(email.id)}"
Tên chuyển đổi lấy một tài nguyên chuỗi có tham số. Bạn cần sử dụng mã nhận dạng của từng email để đảm bảo mỗi transitionName trong EmailFragment là riêng biệt.
Bây giờ, bạn đã đặt tên chuyển đổi cho mục danh sách email, hãy làm tương tự trong bố cục chi tiết email. Trong fragment_email.xml, hãy đặt transitionName của MaterialCardView thành tài nguyên chuỗi sau:
fragment_email.xml
android:transitionName="@string/email_card_detail_transition_name"
Trong HomeFragment.kt, hãy thay thế mã trong onEmailClicked bằng đoạn mã dưới đây để tạo mối liên kết từ thành phần hiển thị bắt đầu (mục danh sách email) và thành phần hiển thị kết thúc (màn hình chi tiết email):
HomeFragment.kt
val emailCardDetailTransitionName = getString(R.string.email_card_detail_transition_name)
val extras = FragmentNavigatorExtras(cardView to emailCardDetailTransitionName)
val directions = HomeFragmentDirections.actionHomeFragmentToEmailFragment(email.id)
findNavController().navigate(directions, extras)
Bây giờ, bạn đã định cấu hình hệ thống ống nước, bạn có thể tạo một biến đổi vùng chứa. Trong phương thức EmailFragment onCreate, hãy đặt sharedElementEnterTransition thành một thực thể mới của MaterialContainerTransform (nhập phiên bản com.google.android.material.transition trái ngược với phiên bản com.google.android.material.transition.platform) bằng cách thêm đoạn mã sau:
EmailFragment.kt
sharedElementEnterTransition = MaterialContainerTransform().apply {
drawingViewId = R.id.nav_host_fragment
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
scrimColor = Color.TRANSPARENT
setAllContainerColors(requireContext().themeColor(R.attr.colorSurface))
}
Bây giờ, hãy thử chạy lại ứng dụng.
Mọi thứ đang bắt đầu ổn! Khi bạn nhấp vào một email trong danh sách email, phép biến đổi vùng chứa sẽ mở rộng mục danh sách thành trang chi tiết toàn màn hình. Tuy nhiên, hãy lưu ý rằng thao tác nhấn nút quay lại không thu gọn email trở lại danh sách. Ngoài ra, danh sách email sẽ biến mất ngay khi bắt đầu quá trình chuyển đổi, hiển thị nền cửa sổ màu xám. Vậy chúng ta vẫn chưa xong.
Để khắc phục lỗi chuyển đổi trả về, hãy thêm hai dòng sau vào phương thức onViewCreated trong HomeFragment.kt:
HomeFragment.kt
postponeEnterTransition()
view.doOnPreDraw { startPostponedEnterTransition() }
Hãy thử chạy lại ứng dụng. Thao tác nhấn nút quay lại sau khi mở một email sẽ thu gọn email đó trở lại danh sách. Tuyệt vời! Hãy tiếp tục cải thiện ảnh động.
Vấn đề về việc danh sách email biến mất là do khi điều hướng đến một Mảnh mới bằng Thành phần điều hướng, Mảnh hiện tại sẽ bị xoá ngay lập tức và được thay thế bằng Mảnh mới sắp tới. Để danh sách email vẫn hiển thị ngay cả sau khi bị thay thế, bạn có thể thêm chuyển đổi thoát vào HomeFragment.
Thêm đoạn mã dưới đây vào phương thức HomeFragment onEmailClicked để thu nhỏ danh sách email một cách tinh tế khi thoát và đăng nhập lại khi nhập lại:
HomeFragment.kt
exitTransition = MaterialElevationScale(false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialElevationScale(true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
Tiếp theo, để đảm bảo hiệu ứng chuyển đổi MaterialElevationScale được áp dụng cho toàn bộ màn hình chính, thay vì cho từng khung hiển thị riêng lẻ trong hệ phân cấp, hãy đánh dấu RecyclerView trong fragment_home.xml làm nhóm chuyển đổi.
fragment_home.xml
android:transitionGroup="true"
Ở giai đoạn này, bạn sẽ có một phép biến đổi vùng chứa hoạt động đầy đủ. Khi bạn nhấp vào một email, mục trong danh sách sẽ mở rộng thành màn hình chi tiết trong khi thu gọn danh sách email. Thao tác nhấn quay lại sẽ thu gọn màn hình chi tiết email trở lại một mục danh sách trong khi vẫn mở rộng danh sách email.
5. Thêm hiệu ứng chuyển đổi Container Transform từ FAB đến trang soạn email
Hãy tiếp tục với việc biến đổi vùng chứa và thêm một quá trình chuyển đổi từ Nút hành động nổi sang ComposeFragment, mở rộng FAB thành một email mới do người dùng viết. Trước tiên, chạy lại ứng dụng rồi nhấp vào nút hành động nổi để đảm bảo không có hiệu ứng chuyển đổi khi khởi chạy màn hình soạn email.
Mặc dù chúng ta sử dụng cùng một lớp chuyển đổi, nhưng cách định cấu hình thực thể này sẽ khác vì FAB nằm trong MainActivity và ComposeFragment được đặt bên trong vùng chứa lưu trữ điều hướng MainActivity.
Trong ComposeFragment.kt, hãy thêm đoạn mã sau vào phương thức onViewCreated, nhớ nhập phiên bản androidx.transition của Slide.
ComposeFragment.kt
enterTransition = MaterialContainerTransform().apply {
startView = requireActivity().findViewById(R.id.fab)
endView = emailCardView
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
scrimColor = Color.TRANSPARENT
containerColor = requireContext().themeColor(R.attr.colorSurface)
startContainerColor = requireContext().themeColor(R.attr.colorSecondary)
endContainerColor = requireContext().themeColor(R.attr.colorSurface)
}
returnTransition = Slide().apply {
duration = resources.getInteger(R.integer.reply_motion_duration_medium).toLong()
addTarget(R.id.email_card_view)
}
Ngoài các tham số dùng để định cấu hình biến đổi vùng chứa trước đó, startView và endView đang được thiết lập theo cách thủ công tại đây. Thay vì sử dụng các thuộc tính transitionName để cho hệ thống Android Transition biết nên chuyển đổi khung hiển thị nào, bạn có thể chỉ định khung hiển thị đó theo cách thủ công khi cần.
Bây giờ, hãy chạy lại ứng dụng. Bạn sẽ thấy FAB chuyển đổi thành màn hình soạn thư (xem ảnh GIF ở cuối bước này).
Tương tự như bước trước, bạn cần thêm một hiệu ứng chuyển đổi vào HomeFragment để hiệu ứng này không biến mất sau khi bị xoá và thay thế bằng ComposeFragment.
Sao chép đoạn mã dưới đây vào phương thức navigateToCompose trong MainActivity trước khi gọi NavController navigate.
MainActivity.kt
currentNavigationFragment?.apply {
exitTransition = MaterialElevationScale(false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialElevationScale(true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
}
Vậy là xong! Bạn sẽ có một quá trình chuyển đổi từ FAB sang màn hình soạn thư như sau:
6. Thêm hiệu ứng chuyển đổi Trục Z dùng chung từ biểu tượng tìm kiếm đến trang thành phần hiển thị tìm kiếm
Trong bước này, chúng ta sẽ thêm hiệu ứng chuyển đổi từ biểu tượng tìm kiếm sang chế độ xem tìm kiếm toàn màn hình. Vì không có vùng chứa lâu dài nào liên quan đến sự thay đổi về cách điều hướng này, nên chúng ta có thể sử dụng hiệu ứng chuyển đổi Trục Z dùng chung để củng cố mối quan hệ không gian giữa hai màn hình và cho biết việc di chuyển một cấp lên trên trong hệ phân cấp của ứng dụng.
Trước khi thêm bất kỳ mã nào khác, hãy thử chạy ứng dụng và nhấn vào biểu tượng tìm kiếm ở góc dưới cùng bên phải của màn hình. Thao tác này sẽ làm xuất hiện màn hình chế độ xem tìm kiếm mà không có hiệu ứng chuyển đổi.
Để bắt đầu, hãy tìm phương thức navigateToSearch trong MainActivity và thêm đoạn mã sau vào trước lệnh gọi phương thức navigate NavController để thiết lập hoạt động thoát và quay lại của phân mảnh hiện tại MaterialSharedAxis chuyển đổi theo trục Z.
MainActivity.kt
currentNavigationFragment?.apply {
exitTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
}
Tiếp theo, hãy thêm đoạn mã sau vào phương thức onCreate trong SearchFragment. Phương thức này sẽ định cấu hình các hiệu ứng chuyển đổi MaterialSharedAxis vào và trả về.
SearchFragment.kt
enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
Cuối cùng, để đảm bảo hiệu ứng chuyển đổi MaterialSharedAxis được áp dụng cho toàn bộ màn hình tìm kiếm, thay vì cho từng khung hiển thị riêng lẻ trong hệ phân cấp, hãy đánh dấu LinearLayout trong fragment_search.xml làm nhóm chuyển đổi.
fragment_search.xml
android:transitionGroup="true"
Vậy là xong! Bây giờ, hãy thử chạy lại ứng dụng rồi nhấn vào biểu tượng tìm kiếm. Màn hình trang chủ và màn hình chế độ xem tìm kiếm phải làm mờ và chia tỷ lệ đồng thời theo chiều sâu của trục Z, tạo ra hiệu ứng liền mạch giữa hai màn hình.
7. Thêm hiệu ứng chuyển đổi mờ dần giữa các trang hộp thư
Trong bước này, chúng ta sẽ thêm hiệu ứng chuyển đổi giữa các hộp thư khác nhau. Vì không muốn nhấn mạnh mối quan hệ không gian hoặc phân cấp, nên chúng ta sẽ sử dụng hiệu ứng mờ để thực hiện thao tác "hoán đổi" đơn giản giữa các danh sách email.
Trước khi thêm bất kỳ mã bổ sung nào, hãy thử chạy ứng dụng, nhấn vào biểu trưng Reply (Trả lời) trong Thanh ứng dụng ở dưới cùng và chuyển đổi hộp thư. Danh sách email sẽ thay đổi mà không cần chuyển đổi.
Để bắt đầu, hãy tìm phương thức navigateToHome trong MainActivity và thêm đoạn mã sau đây trước lệnh gọi phương thức NavController navigate để thiết lập quá trình chuyển đổi MaterialFadeThrough thoát của mảnh hiện tại.
MainActivity.kt
currentNavigationFragment?.apply {
exitTransition = MaterialFadeThrough().apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
}
Tiếp theo, hãy mở HomeFragment. Trong onCreate, hãy đặt enterTransition của mảnh thành một thực thể mới của MaterialFadeThrough.
HomeFragment.kt
enterTransition = MaterialFadeThrough().apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
Chạy lại ứng dụng. Khi bạn mở ngăn điều hướng dưới cùng và thay đổi hộp thư, danh sách email hiện tại sẽ mờ dần và thu nhỏ trong khi danh sách mới sẽ mờ dần và mở rộng. Tuyệt vời!
8. Thêm hiệu ứng chuyển đổi Vùng chứa (container Transform) từ khối địa chỉ email vào chế độ xem thẻ
Ở bước này, bạn sẽ thêm hiệu ứng chuyển đổi khối thành thẻ bật lên. Ở đây, một phép biến đổi vùng chứa được dùng để thông báo cho người dùng rằng hành động được thực hiện trong cửa sổ bật lên sẽ ảnh hưởng đến khối mà cửa sổ bật lên bắt nguồn từ đó.
Trước khi thêm bất cứ mã nào, hãy chạy ứng dụng Reply (Trả lời), nhấp vào một email, nhấp vào nút hành động nổi "trả lời" rồi thử nhấp vào khối thông tin liên hệ của người nhận. Khối sẽ biến mất ngay lập tức và một thẻ có địa chỉ email của người liên hệ đó sẽ xuất hiện mà không có hoạt ảnh nào.
Bạn sẽ thực hiện bước này trong ComposeFragment. Bố cục ComposeFragment đã thêm các khối người nhận (hiển thị theo mặc định) và thẻ người nhận (ẩn theo mặc định). Khối người nhận và thẻ này là hai chế độ xem mà bạn sẽ tạo biến đổi vùng chứa.
Để bắt đầu, hãy mở ComposeFragment rồi tìm phương thức expandChip. Phương thức này được gọi khi người dùng nhấp vào chip đã cung cấp. Thêm đoạn mã sau vào phía trên các dòng hoán đổi chế độ hiển thị recipientCardView và chip. Thao tác này sẽ kích hoạt phép biến đổi vùng chứa được đăng ký thông qua beginDelayedTransition.
ComposeFragment.kt
val transform = MaterialContainerTransform().apply {
startView = chip
endView = binding.recipientCardView
scrimColor = Color.TRANSPARENT
endElevation = requireContext().resources.getDimension(
R.dimen.email_recipient_card_popup_elevation_compat
)
addTarget(binding.recipientCardView)
}
TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)
Nếu bạn chạy ứng dụng ngay lúc này, khối này sẽ chuyển đổi thành thẻ địa chỉ email của người nhận. Tiếp theo, hãy định cấu hình quy trình chuyển đổi trả lại để thu gọn thẻ trở lại vào chip.
Trong phương thức collapseChip trong ComposeFragment, hãy thêm đoạn mã dưới đây để thu gọn thẻ trở lại vào khối.
ComposeFragment.kt
val transform = MaterialContainerTransform().apply {
startView = binding.recipientCardView
endView = chip
scrimColor = Color.TRANSPARENT
startElevation = requireContext().resources.getDimension(
R.dimen.email_recipient_card_popup_elevation_compat
)
addTarget(chip)
}
TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)
Chạy lại ứng dụng. Thao tác nhấp vào khối sẽ mở rộng khối này thành một thẻ, trong khi thao tác nhấp vào thẻ, thẻ đó sẽ được thu gọn trở lại vào khối. Tuyệt vời!
9. Đã xong
Sử dụng chưa đến 100 dòng mã Kotlin và một số mã đánh dấu XML cơ bản, thư viện MDC-Android đã giúp bạn tạo ra các hiệu ứng chuyển đổi đẹp mắt trong một ứng dụng hiện có, tuân thủ nguyên tắc Material Design, đồng thời giao diện và hoạt động nhất quán trên tất cả các thiết bị Android.
Các bước tiếp theo
Để biết thêm thông tin về hệ thống chuyển động Material, hãy nhớ xem thông số kỹ thuật và tài liệu đầy đủ dành cho nhà phát triển, đồng thời thử thêm một số hiệu ứng chuyển đổi Material vào ứng dụng của bạn!
Cảm ơn bạn đã dùng thử tính năng chuyển động Material. Chúng tôi hy vọng bạn đã thích lớp học lập trình này!