MotionLayout
adalah jenis tata letak yang membantu Anda mengelola animasi gerakan dan widget di aplikasi Anda.
MotionLayout
adalah subclass
ConstraintLayout
dan dibuat berdasarkan kemampuan
tata letaknya yang beragam. Sebagai bagian dari library ConstraintLayout
, MotionLayout
tersedia sebagai support library.
MotionLayout
menjembatani kesenjangan antara transisi tata letak dan penanganan gerakan
yang kompleks, menawarkan campuran fitur antara framework
animasi properti,
TransitionManager
, dan
CoordinatorLayout
.
Selain menjelaskan transisi antar-tata letak, MotionLayout
memungkinkan Anda
menganimasikan properti tata letak apa pun. Selain itu, API ini secara inheren mendukung transisi
yang dapat dicari. Artinya, Anda dapat langsung menampilkan titik mana pun dalam transisi
berdasarkan beberapa kondisi, seperti input sentuh. MotionLayout
juga mendukung
keyframe, yang memungkinkan transisi yang sepenuhnya disesuaikan agar sesuai dengan kebutuhan Anda.
MotionLayout
sepenuhnya deklaratif, artinya Anda dapat menjelaskan transisi apa pun dalam
XML, tidak peduli seberapa rumit prosesnya.
Pertimbangan desain
MotionLayout
dimaksudkan untuk memindahkan, mengubah ukuran, dan menganimasikan elemen UI yang
berinteraksi dengan pengguna, seperti tombol dan panel judul. Jangan gunakan gerakan di aplikasi sebagai
efek khusus yang tidak beralasan. Gunakan informasi ini untuk membantu pengguna memahami apa yang dilakukan aplikasi Anda. Untuk mengetahui informasi selengkapnya tentang mendesain aplikasi dengan gerakan, lihat
bagian Desain Material Memahami
gerakan.
Mulai
Ikuti langkah-langkah ini untuk mulai menggunakan MotionLayout
di project Anda.
-
Tambahkan dependensi
ConstraintLayout
: untuk menggunakanMotionLayout
dalam project Anda, tambahkan dependensiConstraintLayout
2.0 ke filebuild.gradle
aplikasi Anda. Jika Anda menggunakan AndroidX, tambahkan dependensi berikut:Groovy
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha13" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha13") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13") }
-
Membuat file
MotionLayout
:MotionLayout
adalah subclass dariConstraintLayout
, sehingga Anda dapat mengubahConstraintLayout
yang ada menjadiMotionLayout
dengan mengganti nama class di file resource tata letak, seperti yang ditunjukkan dalam contoh berikut:AndroidX
<!-- before: ConstraintLayout --> <androidx.constraintlayout.widget.ConstraintLayout .../> <!-- after: MotionLayout --> <androidx.constraintlayout.motion.widget.MotionLayout .../>
Support library
<!-- before: ConstraintLayout --> <android.support.constraint.ConstraintLayout .../> <!-- after: MotionLayout --> <android.support.constraint.motion.MotionLayout .../>
Berikut adalah contoh lengkap file
MotionLayout
, yang menentukan tata letak yang ditampilkan dalam gambar 1:AndroidX
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <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/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </androidx.constraintlayout.motion.widget.MotionLayout>
Support library
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <android.support.constraint.motion.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/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </android.support.constraint.motion.MotionLayout>
-
Membuat MotionScene: dalam contoh
MotionLayout
sebelumnya, atributapp:layoutDescription
mereferensikan adegan gerakan. Suasana gerak adalah file sumber daya XML. Dalam elemen root<MotionScene>
, scene gerak berisi semua deskripsi gerakan untuk tata letak yang terkait. Agar informasi tata letak terpisah dari deskripsi gerakan, setiapMotionLayout
mereferensikan scene gerakan yang terpisah. Definisi dalam scene gerak lebih diutamakan daripada definisi serupa dalamMotionLayout
.Berikut ini contoh file scene gerakan yang menjelaskan gerakan horizontal dasar pada gambar 1:
<?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
Perhatikan hal berikut:
-
<Transition>
berisi definisi dasar gerakan.-
motion:constraintSetStart
danmotion:constraintSetEnd
adalah referensi ke endpoint gerakan. Endpoint ini ditentukan dalam elemen<ConstraintSet>
nanti dalam scene gerakan. -
motion:duration
menentukan jumlah milidetik yang diperlukan untuk menyelesaikan gerakan.
-
-
<OnSwipe>
memungkinkan Anda membuat kontrol sentuh untuk gerakan.-
motion:touchAnchorId
merujuk pada tampilan yang dapat digeser dan ditarik oleh pengguna. -
motion:touchAnchorSide
berarti tampilan ditarik dari sisi kanan. -
motion:dragDirection
merujuk pada arah progres tarik. Misalnya,motion:dragDirection="dragRight"
berarti progres meningkat saat tampilan ditarik ke kanan.
-
-
<ConstraintSet>
adalah tempat Anda menentukan berbagai batasan yang mendeskripsikan gerakan. Dalam contoh ini, satu<ConstraintSet>
ditentukan untuk setiap endpoint gerakan Anda. Endpoint ini ditempatkan di tengah secara vertikal menggunakanapp:layout_constraintTop_toTopOf="parent"
danapp:layout_constraintBottom_toBottomOf="parent"
. Secara horizontal, endpoint berada di sisi paling kiri dan kanan layar.
Untuk mengetahui tampilan yang lebih mendetail tentang berbagai elemen yang didukung scene gerak, lihat contoh MotionLayout.
-
Atribut yang diinterpolasi
Dalam file scene gerak, elemen ConstraintSet
dapat berisi atribut
tambahan yang diinterpolasi selama transisi. Selain posisi dan
batas, atribut berikut diinterpolasi oleh MotionLayout
:
alpha
visibility
elevation
rotation
,rotationX
,rotationY
translationX
,translationY
,translationZ
scaleX
,scaleY
Atribut khusus
Dalam <Constraint>
, Anda dapat menggunakan elemen <CustomAttribute>
untuk menentukan
transisi atribut yang tidak hanya terkait dengan atribut posisi atau
View
.
<Constraint android:id="@+id/button" ...> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60"/> </Constraint>
Satu <CustomAttribute>
berisi dua atributnya sendiri:
motion:attributeName
diperlukan dan harus cocok dengan objek menggunakan metode pengambil dan penyetel. Pengambil dan penyetel harus cocok dengan pola tertentu. Misalnya,backgroundColor
didukung, karena tampilan memiliki metodegetBackgroundColor()
dansetBackgroundColor()
yang mendasarinya.- Atribut lain yang harus Anda berikan didasarkan pada jenis nilai. Pilih dari
jenis yang didukung berikut:
motion:customColorValue
untuk warnamotion:customIntegerValue
untuk bilangan bulatmotion:customFloatValue
untuk floatmotion:customStringValue
untuk stringmotion:customDimension
untuk dimensimotion:customBoolean
untuk boolean
Saat menentukan atribut khusus, tentukan nilai endpoint di elemen <ConstraintSet>
awal dan akhir.
Ubah warna latar belakang
Berdasarkan contoh sebelumnya, misalkan Anda ingin warna tampilan berubah sebagai bagian dari gerakannya, seperti yang ditunjukkan pada gambar 2.
Tambahkan elemen <CustomAttribute>
ke setiap elemen ConstraintSet
, seperti yang ditunjukkan dalam
cuplikan kode berikut:
<ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet>
Atribut MotionLayout tambahan
Selain atribut dalam contoh sebelumnya, MotionLayout
memiliki atribut
lain yang mungkin ingin Anda tentukan:
app:applyMotionScene="boolean"
menunjukkan apakah akan menerapkan scene gerakan. Nilai default untuk atribut ini adalahtrue
.app:showPaths="boolean"
menunjukkan apakah akan menampilkan jalur gerakan saat gerakan berjalan. Nilai default untuk atribut ini adalahfalse
.app:progress="float"
memungkinkan Anda menentukan progres transisi secara eksplisit. Anda dapat menggunakan nilai floating point apa pun dari0
(awal transisi) ke1
(akhir transisi).app:currentState="reference"
memungkinkan Anda menentukanConstraintSet
tertentu.app:motionDebug
memungkinkan Anda menampilkan informasi debug tambahan tentang gerakan tersebut. Kemungkinan nilainya adalah"SHOW_PROGRESS"
,"SHOW_PATH"
, atau"SHOW_ALL"
.
Referensi lainnya
Untuk mengetahui informasi selengkapnya tentang MotionLayout
, lihat referensi berikut:
- Android Lanjutan di Kotlin 03.2: Animasi dengan MotionLayout
- Contoh MotionLayout
- Contoh MotionLayout/ConstraintLayout di GitHub
- Pengantar MotionLayout (bagian I)
- Pengantar MotionLayout (bagian II)
- Pengantar MotionLayout (bagian III)
- Pengantar MotionLayout (bagian IV)