資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究Kotlin 中的 Android Motion Layout
什麼是 Android 中的 Motion Layout？
Motion Layout 是 Android 中 Constraint Layout 的子類。它繼承了 Constraint Layout 的屬性。此佈局用於管理 Android 應用程式中小部件的運動和佈局動畫。Motion Layout 用於提供手勢控制動畫，例如向下滑動、向上滑動以及 Android 應用程式中的其他型別的運動。
Kotlin 中 Motion Layout 的實現
我們將建立一個簡單的應用程式，在其中我們將簡單地顯示兩個 TextView。我們將把這些 TextView 新增到我們的 Motion Layout 中，並新增一個滑動動畫來更改應用程式的背景顏色和 TextView 的文字顏色。我們將按照分步指南在我們的 Android 應用程式中使用 Kotlin 實現 Motion Layout。
步驟 1：在 Android Studio 中建立新專案
導航到 Android Studio，如下面的螢幕所示。在下面的螢幕中，單擊“新建專案”以建立新的 Android Studio 專案。
單擊“新建專案”後，您將看到下面的螢幕。
在此螢幕中，我們只需選擇“空活動”並單擊“下一步”。單擊“下一步”後，您將看到下面的螢幕。
在此螢幕中，我們只需指定專案名稱。然後包名將自動生成。
注意 - 確保選擇 Kotlin 作為語言
指定所有詳細資訊後，單擊“完成”以建立新的 Android Studio 專案。
專案建立完成後，我們將看到 2 個開啟的檔案，即 activity_main.xml 和 MainActivity.kt 檔案。
步驟 2：在 build.gradle 檔案中新增依賴項以使用此庫
導航到 Gradle Scripts>build.gradle 檔案，並在依賴項部分新增以下依賴項。
implementation 'androidx.constraintlayout:constraintlayout:2.2.0-alpha05'
新增上述依賴項後，您將在 IDE 的右上角看到“立即同步”選項。只需單擊它即可同步您的專案並在專案中安裝此依賴項。
步驟 3：使用 activity_main.xml
導航到 activity_main.xml。如果此檔案不可見。要開啟此檔案。在左側窗格中導航到 app>res>layout>activity_main.xml 以開啟此檔案。開啟此檔案後。將以下程式碼新增到其中。程式碼中添加了註釋以詳細瞭解。
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_layout" tools:context=".MainActivity"> <!-- creating a frame layout on below line--> <FrameLayout android:id="@+id/idFLContainer" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- creating a constraint layout on below line--> <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/idConstraintLayout" android:layout_width="match_parent" android:layout_height="0dp" android:background="#353442" /> <!-- creating a text view for heading on below line--> <TextView android:id="@+id/idTVHeading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Motion Layout in Android" android:textSize="25sp" app:layout_constraintBottom_toBottomOf="@id/idFLContainer" app:layout_constraintEnd_toEndOf="@id/idFLContainer" app:layout_constraintStart_toStartOf="@id/idFLContainer" app:layout_constraintTop_toTopOf="@id/idFLContainer" /> <!-- creating a text view for sub heading on below line--> <TextView android:id="@+id/idTVSubHeading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="70dp" android:text="Hello World!" android:textSize="18sp" app:layout_constraintBottom_toBottomOf="@id/idFLContainer" app:layout_constraintEnd_toEndOf="@id/idFLContainer" app:layout_constraintStart_toStartOf="@id/idFLContainer" app:layout_constraintTop_toTopOf="@id/idFLContainer" /> </androidx.constraintlayout.motion.widget.MotionLayout>
說明 - 在上面的程式碼中，我們將根佈局建立為 Motion Layout，並在其中指定運動佈局描述作為我們的動畫 xml 檔案。在此 Motion Layout 中，我們正在建立一個 FrameLayout。在該 FrameLayout 下，我們建立了 ConstraintLayout，併為其指定了背景顏色。建立此 ConstraintLayout 後，我們在其中建立了一個 TextView，並在其中指定 id 並顯示應用程式標題。之後，我們建立了另一個 TextView，在其中顯示應用程式的副標題。
步驟 4：建立一個新的 xml 檔案以新增 Motion Layout 的 Motion Scene。
導航到 app>res>xml>右鍵單擊它>新建 XML 資原始檔，並將其命名為 motion_layout，並將以下程式碼新增到其中。
<?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <Transition app:constraintSetEnd="@+id/endTransition" app:constraintSetStart="@+id/startTransition" app:duration="100" app:motionInterpolator="linear"> <OnSwipe app:dragDirection="dragUp" /> </Transition> <ConstraintSet android:id="@id/startTransition"> <Constraint android:id="@id/idTVHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="#FF000000" /> </Constraint> <Constraint android:id="@id/idTVSubHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="#FF000000" /> </Constraint> <Constraint android:id="@id/idConstraintLayout" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@id/endTransition"> <Constraint android:id="@id/idTVHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="@android:color/white" /> </Constraint> <Constraint android:id="@id/idTVSubHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="@android:color/white" /> </Constraint> <Constraint android:id="@id/idConstraintLayout" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
說明 - 在上面的程式碼中，我們正在為 Motion Layout 建立一個 Motion Scene。在此 Motion Scene 中，我們首先建立了一個要顯示的 Transition 動畫。在此 Transition 中，我們添加了 constraintSetEnd、constraintSetStart、duration、motionInterpolator 為線性，並在其中添加了 onSwipe 拖動方向為 dragUp。之後，我們建立了一個 ConstraintSet。我們將此 ConstraintSet 新增到 startTransition。
在此 ConstraintSet 中，我們為標題 TextView 建立第一個 Constraint，為副標題 TextView 建立第二個 Constraint。在每個 Constraint 中，我們新增一個自定義屬性。在此自定義屬性中，我們添加了鍵為 textColor，併為其添加了要新增到文字的顏色作為值。
之後，我們建立了一個 Constraint，在其中指定了 id 和來自所有側面的約束作為父級。
類似地，我們建立了另一個 ConstraintSet，我們將其顯示為 endTransition。在此 ConstraintSet 中，我們再次建立了 3 個 Constraint，一個用於標題 TextView，第二個用於副標題 TextView，另一個用於 ConstraintLayout。在此 ConstraintLayout 中，我們更改了每個 Constraint 的自定義顏色值，這與我們在第一個 Constraint 中新增的不同。
新增上述程式碼後，我們現在只需單擊頂部的綠色圖示即可在移動裝置上執行應用程式。
注意 - 確保您已連線到您的真實裝置或模擬器。
結論
在上面的教程中，我們學習了什麼是 Android 中的 Motion Layout，以及如何在 Android 應用程式中使用 Motion Layout 來顯示 Android 應用程式中不同小部件的動畫。
744 次檢視
