運用適用於 Android 的質感設計動態效果建構精美的轉場效果

1. 簡介

Material Design 是打造搶眼數位產品的系統。將風格、品牌、互動和動畫整合在一致的原則和元件下，產品團隊就能發揮最大的設計潛力。

Material Design 元件 (MDC) 可協助開發人員實作質感設計。MDC 是由 Google 工程師和使用者體驗設計師團隊打造，提供數十種精美且實用的 UI 元件，適用於 Android、iOS、網頁和 Flutter.material.io/develop

什麼是 Material 的 Android 動畫系統？

Android 版 Material 動畫系統是 MDC-Android 程式庫中的一組轉場模式，可協助使用者瞭解及瀏覽應用程式，如 Material Design 指南所述。

主要的 Material 轉換模式有四種，分別是：

• 容器轉換：轉換含有容器的 UI 元素，藉由將一個元素無縫轉換為另一個元素，在兩個不同的 UI 元素之間建立可見的連結。
• 共用軸：在包含空間或導覽關係的 UI 元素之間轉換；在 x、y 或 z 軸使用共用轉換功能，強化元素之間的關係。
• 淡出淡入：轉換彼此間沒有緊密關係的 UI 元素；使用逐漸淡出和淡入的效果，並套用傳入元素的比例。
• 淡出：適用於在螢幕邊界內進入或離開的 UI 元素。

針對以 AndroidX Transition 程式庫 (androidx.transition) 和 Android Transition Framework (android.transition) 為基礎而建構的這些模式，MDC-Android 程式庫提供了轉換類別：

AndroidX

• 可在 com.google.android.material.transition 套件中使用
• 支援 API 級別 14 以上
• 支援 Fragment 和 View，但不支援 Activity 或 Windows
• 包含回溯的錯誤修正，以及各 API 級別的一致行為

架構

• 「com.google.android.material.transition.platform」套件提供
• 支援 API 級別 21 以上
• 支援 Fragment、View、Activity 和 Windows
• 修正錯誤未向後移植，且在各 API 級別中可能會有不同的行為

在本程式碼研究室中，您將使用以 AndroidX 程式庫為基礎建構的 Material 轉換功能，這意味著您將專注於 Fragment 和 View。

建構項目

本程式碼研究室將引導您使用 Kotlin，將一些轉換內容建構成名為 Reply 的範例 Android 電子郵件應用程式，示範如何使用 MDC-Android 程式庫的轉換效果，自訂應用程式的外觀和風格。

系統會提供 Reply 應用程式的範例程式碼，而您要在應用程式中整合以下 Material 轉換，如以下程式碼研究室的 GIF 所示：

• 容器轉換：從電子郵件名單轉換至電子郵件詳細資料頁面
• 容器轉換會從懸浮動作按鈕 (FAB) 轉換為撰寫電子郵件頁面
• 共用 Z 軸從搜尋圖示轉換為搜尋檢視頁面
• 在信箱頁面之間使用淡出/淡入轉場效果
• 容器轉換：從電子郵件地址方塊轉換至資訊卡檢視畫面

在本程式碼研究室中，您將使用 MDC-Android 動態系統提供的轉場效果。如要進一步瞭解 MDC-Android 主題設定和元件系統，請參閱入門指南。

軟硬體需求

• 對 Android 開發作業和 Kotlin 有基本瞭解
• Android Studio (如果尚未安裝，請在這裡下載)
• Android 模擬器或裝置 (可透過 Android Studio 取得)
• 程式碼範例 (請參閱下一步)

你對建立 Android 應用程式的經驗程度為何？

初級 中級 適合

2. 設定開發環境

啟動 Android Studio

開啟 Android Studio 時，畫面上會顯示標題為「Welcome to Android Studio」的視窗。不過，如果這是您第一次啟動 Android Studio，請按照 Android Studio 設定精靈步驟，輸入預設值。這個步驟可能需要幾分鐘的時間才能下載及安裝必要檔案，因此您可以先繼續執行這個步驟，同時進行下一個部分。

方法 1：從 GitHub 複製入門程式碼研究室應用程式

如要從 GitHub 複製這個程式碼研究室，請執行下列指令：

git clone https://github.com/material-components/material-components-android-motion-codelab.git
cd material-components-android-motion-codelab

如需進一步協助，請參閱：從 GitHub 複製存放區

方法 2： 下載 程式碼研究室應用程式的 ZIP 檔案

下載範例應用程式

範例應用程式位於 material-components-android-motion-codelab-develop 目錄中。

在 Android Studio 中載入範例程式碼

1. 設定精靈完成後，系統會顯示「Welcome to Android Studio」視窗，請按一下「Open an existing Android Studio project」。

2. 前往您安裝程式碼範例的目錄，然後選取範例目錄來開啟專案。
3. 等待 Android Studio 建構並同步處理專案，如 Android Studio 視窗底部的活動指標所示。

如果 Android Studio 提示您更新專案的 Android Gradle 外掛程式版本，請忽略該提示，因為專案可能未使用最新的 Gradle 版本進行測試，更新後可能會導致當機或其他編譯問題。

4. 此時，Android Studio 可能會引發部分建構錯誤，因為缺少 Android SDK 或建構工具 (如下所示)。請按照 Android Studio 中的操作說明安裝/更新這些項目，並同步處理專案。如果問題仍未解決，請按照指南的說明，使用 SDK Manager 更新工具。

驗證專案依附元件

專案需要依附 MDC-Android 程式庫。您下載的程式碼範例中應該已列有這個依附元件，不過我們還是建議您查看設定以確保正確。

前往 app 模組的 build.gradle 檔案，確認 dependencies 區塊包含 MDC-Android 的依附元件：

implementation 'com.google.android.material:material:1.2.0'

執行範例應用程式

1. 確認裝置選擇左側的建構設定為 app。
2. 按下綠色的「Run/Play」按鈕，即可建構並執行應用程式。

3. 在「Select Deployment Target」視窗中，如果可用裝置已列出「Android 裝置」，請跳至步驟 8。否則，請按一下「Create New Virtual Device」。
4. 在「選取硬體」畫面中選取手機裝置 (例如「Pixel 3」)，然後點選「下一步」。
5. 在「System Image」畫面中選取最新的 Android 版本 (最好是最高 API 級別)。如果尚未安裝，請按一下畫面上的「Download」連結，完成下載程序。
6. 點選「下一步」。
7. 在「Android 虛擬裝置 (AVD)」畫面中，保留原有的設定，然後按一下「Finish」。
8. 從部署目標對話方塊中選取「Android 裝置」。
9. 按一下 [確定]。
10. Android Studio 會建構及部署應用程式，並自動在目標裝置上開啟應用程式。

如果建構時收到 INSTALL_FAILED_INVALID_APK 錯誤，請嘗試在 Android Studio 中依序點選「Build」->「Clean Project」。

如果無法新增依附元件或成功執行應用程式，請停止開發人員環境並排解相關問題。詳情請參閱 Android Studio 指南，瞭解如何建立及執行應用程式。

大功告成！Reply 首頁的範例程式碼應在模擬器中執行。您應該會看到「收件匣」，其中列出電子郵件清單。

選用：放慢裝置動畫

由於本程式碼研究室牽涉到快速、精美的轉場效果，因此建議您在實作過程中觀察裝置動畫，放慢速度，以便觀察一些更精確的轉場效果。您可以使用 adb 殼層指令或快速設定方塊完成這項操作。請注意，這些拖慢裝置動畫的速度，會影響 Reply 應用程式以外裝置上的動畫。

方法 1：ADB Shell 指令

如要將裝置的動畫速度減慢 10 倍，您可以透過指令列執行下列指令：

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

如要將裝置的動畫速度重設為正常速度，請執行下列指令：

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

方法 2：快速設定方塊

或者，如要設定快速設定方塊，請先在裝置上啟用開發人員設定 (如果先前未啟用)：

1. 開啟裝置的「設定」應用程式
2. 向下捲動至底部，然後按一下「模擬裝置資訊」
3. 向下捲動至底部，快速點按「版本號碼」，直到啟用「開發人員設定」為止

接著，請在裝置的「設定」應用程式中執行下列操作，啟用快速設定方塊：

1. 按一下畫面頂端的搜尋圖示或搜尋列
2. 在搜尋欄位中輸入「tiles」
3. 按一下「開發人員快速設定方塊」列
4. 按一下「視窗動畫比例」切換鈕

最後，在程式碼研究室中，從螢幕頂端下拉系統通知欄，然後使用 圖示，切換慢速和一般速度的動畫。

上述設定「快速設定方塊」的操作說明可能會因裝置和 API 級別而略有不同，甚至無法使用。

3. 熟悉範例應用程式的程式碼

我們來看看程式碼。我們提供了一個使用 Jetpack Navigation 元件程式庫的應用程式，可在多個不同的 Fragment 之間導覽，所有作業都在單一活動 MainActivity 中：

• HomeFragment：顯示電子郵件清單
• EmailFragment：顯示單封完整的電子郵件
• ComposeFragment：可讓您撰寫新電子郵件
• SearchFragment：顯示搜尋檢視畫面

如要進一步瞭解本程式碼研究室中使用的相關概念，請參閱下列指南和練習：

• 開始使用 Android 的 Material 元件
• 進階 Android 01.1：片段
• Kotlin Android 基礎知識 03.2：定義導覽路徑
• Kotlin Android 基礎知識 02.4：資料繫結基礎知識

navigation_graph.xml

首先，如要瞭解應用程式的導覽圖設定方式，請在 app -> src -> main -> res -> navigation 目錄中開啟 navigation_graph.xml：

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

請注意，上述所有片段都會顯示，其中預設的啟動片段會透過 app:startDestination="@id/homeFragment" 設為 HomeFragment。這個片段目的地圖和動作的 XML 定義會通知產生的 Kotlin 導覽程式碼，讓您在連結轉場時遇到這個程式碼。

activity_main.xml

接著，請查看 app -> src -> main -> res -> layout 目錄中的 activity_main.xml 版面配置。您會看到使用上述導覽圖設定的 NavHostFragment：

<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 會填滿螢幕，並處理應用程式中所有的全螢幕片段導覽變更。BottomAppBar 和其錨定 FloatingActionButton (也位於 activity_main.xml) 會位於 NavHostFragment 顯示的目前片段上方，因此會依據提供的範例應用程式程式碼的片段目的地顯示或隱藏。

此外，activity_main.xml 中的 BottomNavDrawerFragment 是底部抽屜，其中包含可用於在不同電子郵件信箱之間切換的選單，並會視情況透過 BottomAppBar 回覆標誌按鈕顯示。

MainActivity.kt

最後，如要查看導覽動作的使用範例，請在 app -> src -> main -> java -> com.materialstudies.reply.ui 目錄中開啟 MainActivity.kt。找出 navigateToSearch() 函式，如下所示：

private fun navigateToSearch() {
   val directions = SearchFragmentDirections.actionGlobalSearchFragment()
   findNavController(R.id.nav_host_fragment).navigate(directions)
}

這裡顯示如何在不自訂轉場效果的情況下，前往搜尋檢視頁面。在這個程式碼研究室中，您將深入探索 Reply 的 MainActivity 和四個主要片段，以設定 Material 轉換作業，並與整個應用程式中的各種導覽動作搭配使用。

現在您已熟悉範例程式碼，接下來要實作第一個轉換作業。

4. 從電子郵件清單新增至電子郵件詳細資料頁面的容器轉換轉場效果

首先，您將在點按電子郵件時新增轉場效果。針對這項導覽變更，容器轉換模式是非常實用的，因為其設計是為了在內含容器的 UI 元素之間轉換。這個模式可在兩個 UI 元素之間建立可見的連線。

在新增任何程式碼之前，請先試著執行 Reply 應用程式，然後點選電子郵件。應執行簡單的跳接剪輯，也就是在沒有轉場效果的情況下替換畫面：

MDC-Android 程式庫中的容器轉換稱為 MaterialContainerTransform。根據預設，這個 Transition 子類別會做為共用元素轉換功能運作，也就是說，Android 轉換系統在標示 transitionName 時，可以挑選不同版面配置中的兩個檢視畫面。

首先，請在 email_item_layout.xml 的 MaterialCardView 上新增 transitionName 屬性，如以下程式碼片段所示：

email_item_layout.xml

android:transitionName="@{@string/email_card_transition_name(email.id)}"

轉場名稱會接收帶有參數的字串資源。您必須使用每個電子郵件的 ID，確保 EmailFragment 中的每個 transitionName 皆不重複。

Reply 的最低 SDK 級別為 24，表示我們可以直接使用 API 級別 21 中引入的 android:transitionName 屬性。如果您的應用程式支援 API 級別 21 以下，請在設定檢視畫面的轉換名稱時使用 ViewCompat#setTransitionName 方法。

現在您已設定電子郵件清單項目的轉換名稱，讓我們在電子郵件詳細資料版面配置中執行相同操作。在 fragment_email.xml 中，將 MaterialCardView 的 transitionName 設為下列字串資源：

fragment_email.xml

android:transitionName="@string/email_card_detail_transition_name"

設定「開始」檢視畫面 (email_item_layout.xml 中的 MaterialCardView) 和「結束」檢視畫面 (fragment_email.xml 中的 MaterialCardView) 轉換名稱，有助於向 Android 轉換系統提供與此轉換相關的兩個共用元素檢視畫面。

在 HomeFragment.kt 中，將 onEmailClicked 中的程式碼替換為以下程式碼片段，即可建立從起始檢視畫面 (電子郵件清單項目) 到結束檢視畫面 (電子郵件詳細資料畫面) 的對應關係：

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)

上述程式碼片段的重點部分為 FragmentNavigatorExtras。Android Transition 系統會取得在第一個參數 (cardView) 設定的轉換名稱，並建立該轉換名稱與傳入第二個參數 (emailCardDetailTransitionName) 的轉換名稱字串之間的對應。如此一來，系統就能知道要尋找和提供給 MaterialContainerTransform 例項，做為轉換之間的「開始」和「end」檢視畫面。

管線設定完成後，您可以建立容器轉換。在 EmailFragment onCreate 方法中，新增以下程式碼片段，將 sharedElementEnterTransition 設為 MaterialContainerTransform 的新例項 (匯入 com.google.android.material.transition 版本，而非 com.google.android.material.transition.platform 版本)：

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

但請注意以下幾點：

• 為了簡單起見，我們只設定 sharedElementEnterTransition，而非 sharedElementReturnTransition。根據預設，如果未設定返回轉場效果，Android 轉場系統會在導覽回來時自動反轉進入轉場效果。
• drawingViewId 會控制動畫容器在檢視區塊階層中的放置位置。這樣一來，您就能在 UI 中顯示其他元素上方或下方的轉場效果。在 Reply 的情況下，您會在與片段容器相同的層級執行容器轉換，確保系統會在底部應用程式列和浮動操作按鈕下方繪製該容器。
• scrimColor 是 MaterialContainerTransform 上的屬性，可控制在動畫容器後方繪製的半透明色調顏色。預設值為 32% 黑色。這裡已設為透明，表示不會繪製任何遮罩。這是因為在後續步驟中，您會在電子郵件清單中加入退出轉場效果，並與容器轉換搭配使用。
• 最後，我們將容器顏色設為 MaterialContainerTransform 至 colorSurface。當 MaterialContainerTransform 在兩個檢視畫面之間建立動畫效果時，畫布會繪製三個「容器」：1) 一個背景容器 2) 一個用於開始檢視畫面的容器，以及 3) 用於結束檢視畫面的容器。這三個容器都可以指定填充顏色，並預設為透明。如果起始或結束檢視畫面本身未繪製背景，導致動畫期間可見其他元素，則設定這些背景填充顏色可能很有用。由於此範例中的所有容器都應設為 colorSurface，因此我們可以使用 setAllContainerColors 輔助方法，確保不會發生任何視覺問題。

請嘗試重新執行應用程式。

一切都開始看起來很棒！當您點選電子郵件清單中的電子郵件時，容器轉換應將清單項目展開為全螢幕詳細資料頁面。不過，請注意，按下返回鍵不會將電子郵件收合至清單中。此外，在轉場開始時，電子郵件清單會立即消失，並顯示灰色視窗背景。所以我們還沒完成。

通常，這個第一個問題會發生在 Android 轉場系統嘗試執行回傳轉場時，電子郵件清單尚未展開並填入 RecyclerView。我們需要等到 HomeFragment 排版清單後，才能開始轉場。

Android Transition 系統提供可進行這類操作的方法：postponeEnterTransition 和 startPostponedEnterTransition。如果呼叫 postponeEnterTransition，任何要執行的輸入轉場都會保留，直到呼叫 startPostponedEnterTransition 的結束呼叫為止。如此一來，我們就可以在 RecyclerView 填入電子郵件，且轉換作業能夠找到您設定的對應項目之前，先安排「安排」轉換作業時間。

如要修正傳回轉換，請在 HomeFragment.kt 的 onViewCreated 方法中加入以下兩行：

HomeFragment.kt

postponeEnterTransition()
view.doOnPreDraw { startPostponedEnterTransition() }

請嘗試重新執行應用程式。開啟電子郵件後按下返回鍵，即可將電子郵件收合至清單中。太好了！我們繼續改善動畫。

電子郵件清單消失的問題在於，使用 Navigation 元件前往新的 Fragment 時，系統會立即移除目前的 Fragment，並替換成新的傳入 Fragment。如要讓電子郵件名單在取代後仍繼續顯示，您可以為 HomeFragment 新增退出轉場效果。

MDC-Android 提供兩種轉場效果來執行這項操作，分別是 Hold 和 MaterialElevationScale。Hold 轉場效果只會將目標保持在目前的位置，而 MaterialElevationScale 則會執行稍微縮放的動畫。

將下列程式碼片段新增至 HomeFragment onEmailClicked 方法，讓電子郵件清單在退出時略微縮放，並在重新進入時恢復：

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

目前的 Fragment 從返回堆疊中彈出後，片段就會重新進入檢視畫面中。針對 HomeFragment，這種情況會在從 EmailFragment 按下返回按鈕時執行。這會導致我們返回清單時，電子郵件清單會以微妙的方式縮放。

接下來，為確保 MaterialElevationScale 轉換效果套用至整個主畫面，而非套用至階層中的每個個別檢視畫面，請將 fragment_home.xml 中的 RecyclerView 標示為轉換群組。

fragment_home.xml

android:transitionGroup="true"

Reply 的最低 SDK 級別為 24，這表示我們可以直接使用 API 級別 21 中導入的 android:transitionGroup 屬性。如果應用程式支援以下的 API 級別 21 以下，請在設定檢視區塊的轉換群組時使用 ViewGroupCompat#setTransitionGroup 方法。

在這個階段，您應該會擁有完全正常運作的容器轉換作業。按一下電子郵件，清單項目會展開為詳細資料畫面，並捲動電子郵件清單。按下返回鍵，電子郵件詳細資料畫面會收合為清單項目，同時電子郵件清單會放大。

5. 新增從 FAB 到撰寫電子郵件頁面的容器轉換效果

接著，我們將繼續進行容器轉換，並新增從懸浮動作按鈕到 ComposeFragment 的轉場效果，將 FAB 擴展至使用者要撰寫的新電子郵件。首先，重新執行應用程式並點選 FAB，確認啟動電子郵件撰寫畫面時沒有轉場效果。

如要查看上述跳躍式切換效果，請在應用程式重新啟動後，查看電子郵件清單時，按一下 FAB。如果您在目前執行應用程式期間曾開啟電子郵件，則可能會因為陳舊的退出或重新進入轉場效果，而看到部分轉場效果。如果您一直使用 Android Studio 的 Hot Reload 執行應用程式，就特別容易發生這種情況。完成本程式碼研究室中的所有流程後，就不會發生這種情況。

雖然我們使用相同的轉換類別，但由於我們 FAB 位於 MainActivity，且 ComposeFragment 位於 MainActivity 導覽主機容器中，因此我們設定這個執行個體的方式會有所不同。

在 ComposeFragment.kt 中，將下列程式碼片段新增至 onViewCreated 方法，並務必匯入 Slide 的 androidx.transition 版本。

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

除了用來設定先前容器轉換的參數外，startView 和 endView 也是在這裡手動設定。您可以視需要手動指定這些檢視畫面，而不使用 transitionName 屬性讓 Android 轉換系統知道應轉換哪些檢視畫面。

現在，請重新執行應用程式。懸浮動作按鈕 (FAB) 應正在轉換為撰寫畫面 (請參閱這個步驟最後的 GIF)。

與上一個步驟類似，您需要為 HomeFragment 新增轉場效果，以免在移除並由 ComposeFragment 取代後消失。

將下列程式碼片段複製到 MainActivity 中的 navigateToCompose 方法，再呼叫 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()
   }
}

請注意，MaterialElevationScale 的持續時間與 MaterialContainerTransform 相同。這可確保 HomeFragment 保留的時間與容器轉換執行所需的時間相同，且會在容器轉換完成後消失。

這個步驟就完成了！您應該會看到從 FAB 到構圖畫面的轉場效果，如下所示：

6. 新增分享的 Z 軸從搜尋圖示到搜尋檢視頁面

在這個步驟中，我們要新增轉場效果：從搜尋圖示轉換至全螢幕搜尋檢視畫面。由於這次導覽變更並未牽涉到永久的容器，因此我們可以使用共用的 Z 軸轉場來強化兩個畫面之間的空間關係，並指定應用程式階層中向上的一層。

在新增任何其他程式碼之前，請先試著執行應用程式，然後輕觸畫面右下角的搜尋圖示。這應該會顯示搜尋檢視畫面，且不會有轉場效果。

首先，請在 MainActivity 中找出 navigateToSearch 方法，然後在 NavController navigate 方法呼叫之前新增下列程式碼片段，設定目前片段的退出和重新進入 MaterialSharedAxis 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()
   }
}

接著，將下列程式碼片段新增至 SearchFragment 中的 onCreate 方法，即可設定進入及傳回 MaterialSharedAxis 轉場效果。

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

請務必注意，就 MaterialSharedAxis forward 布林建構函式參數而言，這兩個片段如何一起移動。當 MainActivity 目前片段結束時，SearchFragment 就會進入。因此，在 MainActivity 目前片段中，離開轉場會朝向前方，SearchFragment 中的進入轉場也會正向後。這可確保在執行這些轉場組合時，兩個片段會朝相同方向移動。

反之亦然。SearchFragment 結束時，MainActivity 目前的片段會進入。因此，SearchFragment 會設為從後向前傳回，而 MainActivity 目前的 Fragment 會設為從後向前重新進入。

最後，為了確保 MaterialSharedAxis 轉場效果套用至整個搜尋畫面，而非階層中的個別檢視畫面，請將 fragment_search.xml 中的 LinearLayout 標示為轉場群組。

fragment_search.xml

android:transitionGroup="true"

Reply 的最低 SDK 級別為 24，表示我們可以直接使用 API 級別 21 中引入的 android:transitionGroup 屬性。如果應用程式支援的 API 級別低於 21，請在設定檢視畫面的轉場群組時使用 ViewGroupCompat#setTransitionGroup 方法。

大功告成！現在，請嘗試重新執行應用程式，然後輕觸搜尋圖示。主畫面和搜尋畫面應同時沿著 Z 軸深度淡出及縮放，在兩個畫面之間創造無縫轉場效果。

7. 在信箱頁面之間新增淡出/淡入轉場效果

在這個步驟中，我們會在不同信箱之間新增轉場效果。我們不想強調空間或階層關係，因此會在電子郵件清單之間使用淡出淡入，藉此執行簡單的「切換」。

在新增任何其他程式碼之前，請先嘗試執行應用程式，然後輕觸底部應用程式列中的「Reply」標誌，並切換信箱。電子郵件清單應在不經過轉換的情況下變更。

首先，請在 MainActivity 中找出 navigateToHome 方法，然後在 NavController navigate 方法呼叫之前加入下列程式碼片段，設定目前片段的結束 MaterialFadeThrough 轉換。

MainActivity.kt

currentNavigationFragment?.apply {
   exitTransition = MaterialFadeThrough().apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
}

接著，開啟 HomeFragment。在 onCreate 中，將片段的 enterTransition 設為 MaterialFadeThrough 的新例項。

HomeFragment.kt

enterTransition = MaterialFadeThrough().apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}

由於信箱的運作方式，上述設定與先前步驟稍有不同。信箱只是 HomeFragment 加上引數，用於告知片段要顯示的電子郵件清單。因此，除了在導覽圖中 HomeFragment 設為 singleTop=true 以外，您也需要一律前往「轉寄」至新信箱，無須處理返回或重新進入轉場效果 (在片段彈出時執行的轉場)。因此，您只需設定 HomeFragment 進入和結束轉場效果即可。

這是會影響轉換的設定方式的架構情境。在自己的應用程式中加入轉場效果時，也需要考量類似的因素！

重新執行應用程式。當您開啟底部導覽匣並變更信箱時，當新清單淡出及縮減時，目前的電子郵件清單應淡出並縮小。太棒了！

8. 新增從電子郵件地址方塊轉換為資訊卡檢視的 Container Transform 轉換作業

在這個步驟中，您將新增轉場效果，可將方塊轉換為彈出式資訊卡。這裡會使用容器轉換來告知使用者，在彈出式視窗中執行的操作會影響該彈出式視窗的來源方塊。

在新增任何程式碼之前，請執行 Reply 應用程式、依序點選電子郵件和「回覆」懸浮動作按鈕 (FAB)，然後嘗試點選收件者的聯絡人方塊。資訊方塊應立即消失，且資訊卡應會彈出，並顯示該聯絡人的電子郵件地址，但不會顯示動畫。

您將在 ComposeFragment 中進行這個步驟。已新增至 ComposeFragment 版面配置的收件者方塊 (預設為顯示) 和收件者資訊卡 (預設為隱藏)。收件者方塊和資訊卡是您將在其中建立容器轉換的兩個檢視畫面。

首先，請開啟 ComposeFragment 並找到 expandChip 方法。使用者點選提供的 chip 時，就會呼叫此方法。在交換 recipientCardView 和 chip 瀏覽權限的各行上方加入下列程式碼片段，即可觸發透過 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)

上述轉換設定的重要部分是呼叫 addTarget。根據預設，TransitionManager 會在所有變更的檢視畫面上執行提供的轉場效果。設定目標可確保容器轉換只會在單一指定的目標檢視畫面中執行。

如果現在執行應用程式，方塊應轉換成收件者的電子郵件地址資訊卡。接下來，請設定返回轉場效果，將資訊卡收合回方塊。

在 ComposeFragment 的 collapseChip 方法中，新增下列程式碼片段，將資訊卡折疊回方塊。

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)

重新執行應用程式。只要按一下方塊，方塊應展開為資訊卡，點選資訊卡則會將資訊卡收合回方塊。太棒了！

9. 全部完成

MDC-Android 程式庫使用不到 100 行的 Kotlin 程式碼和一些基本 XML 標記，可協助您在符合 Material Design 指南的現有應用程式中建立美觀的轉場效果，而且所有 Android 裝置上的外觀和行為也都一致。

如要取得已完成的 Reply Material 動態系統應用程式，請下載已完成的程式碼研究室，或使用 Git 查看 complete 分支版本：git checkout complete。

如要查看本程式碼研究室的所有程式碼變更，請查看 complete 分支版本的差異比較。

後續步驟

如要進一步瞭解 Material 動態效果系統，請務必查看規格和完整的開發人員說明文件，嘗試在應用程式中新增一些 Material 轉場效果！

感謝您試用 Material Motion。希望您喜歡這個程式碼研究室！

我能夠在合理的時間和精力下完成本程式碼研究室

非常同意 同意 中立 不同意 非常不同意

我想在未來繼續使用 Material Design 動態系統

非常同意 同意 普通 不同意 非常不同意