Memindahkan berbagai widget di aplikasi Android selalu menjadi pengalaman yang menyakitkan bagi developer. Namun, semua itu berubah dengan diperkenalkannya MotionLayout
Subkelas di Android.
Anda dapat gunakan MotionLayout
dalam aplikasi Anda untuk menangani animasi elemen UI dari satu keadaan ke keadaan lain. MotionLayout
Ditambahkan sebagai subkategori dari ConstraintLayout
kelas dalam versi 2.0. mendukung MotionLayout
Ini kembali ke API stage 14 dengan bantuan perpustakaan dukungan yang kompatibel mundur.
Beberapa fitur kelas yang berguna dan menarik termasuk animasi untuk berbagai properti tata letak serta dukungan untuk transisi yang dapat dicari. Mendukung format keyframe MotionLayout
Itu hanya ceri di atasnya. Ini memungkinkan Anda untuk membuat transisi yang disesuaikan sepenuhnya.
Dalam tutorial ini, Anda akan belajar cara membuat animasi dalam aplikasi Android menggunakan MotionLayout
.
Contents
Tambahkan dependensi
Langkah pertama sebelum Anda dapat mulai menggunakan MotionLayout
Di aplikasi Android Anda, sertakan add ConstraintLayout
ketergantungan pada proyek Anda. Ini disertakan secara default di semua proyek Android sekarang. Namun, Anda tetap harus memastikan proyek mana yang digunakan MotionLayout
Ini menggunakan versi yang lebih tinggi dari 2.0.0 untuk ConstraintLayout
sebagai ketergantungan.
Anda dapat memeriksa dependensi proyek Anda dengan membuka file bangunan file dan cari baris ini di bawah dependensi.
1 |
implementation 'androidx.constraintlayout:constraintlayout:2.1.4' |
Nomor versi pada akhirnya akan berubah dari waktu ke waktu. Jadi, jangan khawatir tentang ketidakcocokan. Yang penting untuk diingat adalah minimal harus 2.0.0.
Pilih tata letak aplikasi
Jika Anda membuat aplikasi baru saat mengikuti tutorial ini, Anda akan melihat bahwa Activity_main.xml berkas digunakan ConstraintLayout
untuk menempatkan widget. Kami harus mengganti semua kasing ConstraintLayout
Dalam file format kami dengan ekstensi MotionLayout
.
Cara termudah untuk melakukannya adalah dengan mengganti format Anda dari kode menampilkan baik dibagi atau desain Pemandangan. Anda akan menemukan file pohon komponen panel di sisi kiri. Buka panel dan Anda akan melihat file ConstraintLayout
digunakan. Klik kanan padanya dan pilih Ubah ke MotionLayout Seperti yang ditunjukkan pada gambar di bawah ini.


Ini akan menghasilkan munculan baru yang memberi tahu Anda bahwa konversi ke a MotionLayout
Ini akan menghasilkan pembuatan file MotionScene
mengajukan. ketuk muncul tombol.
untukmu Activity_main.xml File sekarang harus berisi kode XML berikut:
1 |
<?xml model="1.0" encoding="utf-8"?>
|
2 |
<androidx.constraintlayout.movement.widget.MotionLayout xmlns:android="https://schemas.android.com/apk/res/android" |
3 |
xmlns:app="http://schemas.android.com/apk/res-auto" |
4 |
xmlns:instruments="http://schemas.android.com/instruments" |
5 |
android:layout_width="match_parent" |
6 |
android:layout_height="match_parent" |
7 |
app:layoutDescription="@xml/activity_main_scene" |
8 |
instruments:context=".MainActivity"> |
9 |
|
10 |
<TextView
|
11 |
android:id="@+id/textView" |
12 |
android:layout_width="wrap_content" |
13 |
android:layout_height="wrap_content" |
14 |
android:textual content="Whats up World!" |
15 |
app:layout_constraintBottom_toBottomOf="father or mother" |
16 |
app:layout_constraintEnd_toEndOf="father or mother" |
17 |
app:layout_constraintStart_toStartOf="father or mother" |
18 |
app:layout_constraintTop_toTopOf="father or mother" /> |
19 |
|
20 |
</androidx.constraintlayout.movement.widget.MotionLayout>
|
Mari tambahkan file Button
Widget untuk tata letak kami. Kami akan merancang aplikasi kami sedemikian rupa sehingga hanya dengan sekali klik TextView
Potongan itu melompat sedikit dan bertambah besar. Tambahkan XML berikut di bawah ini TextView
Widget untuk menambahkan tombol say melompat Tetap 20 poin TextView
widget.
1 |
<Button
|
2 |
android:id="@+id/button" |
3 |
android:layout_width="wrap_content" |
4 |
android:layout_height="wrap_content" |
5 |
android:textual content="Bounce" |
6 |
android:textSize="18sp" |
7 |
android:layout_marginTop="20sp" |
8 |
app:layout_constraintEnd_toEndOf="father or mother" |
9 |
app:layout_constraintStart_toStartOf="father or mother" |
10 |
app:layout_constraintTop_toBottomOf="@id/textView" /> |
Edit file MotionScene
Apakah Anda ingat bahwa Android Studio menunjukkan kepada kami popup yang mengatakan untuk mengonversi file ConstraintLayout
ke MotionLayout
Ini akan membuat file MotionScene
mengajukan? nama itu MotionScene
berkas adalah Activity_main_scene.xml. Anda dapat menemukannya di bawah res > xml > activity_main_scene.xml dalam proyek Anda.
Ada juga referensi ke file adegan aksi di Activity_main.xml berkas di bawah app:layoutDescription
Menggambarkan. itu Activity_main_scene.xml File tersebut berisi kode berikut:
1 |
<?xml model="1.0" encoding="utf-8"?>
|
2 |
<MotionScene
|
3 |
xmlns:android="http://schemas.android.com/apk/res/android" |
4 |
xmlns:movement="http://schemas.android.com/apk/res-auto"> |
5 |
|
6 |
<Transition
|
7 |
movement:constraintSetEnd="@+id/finish" |
8 |
movement:constraintSetStart="@id/begin" |
9 |
movement:length="1000"> |
10 |
<KeyFrameSet>
|
11 |
</KeyFrameSet>
|
12 |
</Transition>
|
13 |
|
14 |
<ConstraintSet android:id="@+id/begin"> |
15 |
</ConstraintSet>
|
16 |
|
17 |
<ConstraintSet android:id="@+id/finish"> |
18 |
</ConstraintSet>
|
19 |
</MotionScene>
|
Seperti yang Anda lihat, file adegan berisi root MotionScene
Tag di mana tag lain mengontrol pergerakan atau animasi widget yang sebenarnya.
itu Transition
tandai di dalam MotionScene
Menentukan bagaimana animasi akan dilanjutkan berdasarkan awal dan akhirnya ConstraintSets
. semua ConstrainSet
dapat berisi Constraint
Tag yang dapat Anda gunakan untuk memberikan batasan dan menampilkan nilai atribut yang dipilih.
Ada tiga hal yang ingin kita ubah tentang kita TextView
Dengan setiap klik tombol. Warna teks harus berubah dari hitam ke biru kehijauan. Nilai-nilai ini ditentukan dalam Warna. xml mengajukan. spasi file TextView
widget f Button
harus meningkat menjadi 40 hal. itu TextView
Alat tersebut harus berukuran dua kali lipat dari aslinya.
Inilah XML yang bisa kita gunakan di dalam file MotionScene
berkas untuk dibuat textView
gelisah.
1 |
<?xml model="1.0" encoding="utf-8"?>
|
2 |
<MotionScene
|
3 |
xmlns:android="http://schemas.android.com/apk/res/android" |
4 |
xmlns:movement="http://schemas.android.com/apk/res-auto"> |
5 |
|
6 |
<Transition
|
7 |
movement:constraintSetEnd="@+id/finish" |
8 |
movement:constraintSetStart="@id/begin" |
9 |
movement:length="200" |
10 |
movement:motionInterpolator="easeIn"> |
11 |
<OnClick
|
12 |
movement:targetId="@id/button" |
13 |
movement:clickAction="transitionToEnd" /> |
14 |
</Transition>
|
15 |
|
16 |
<ConstraintSet
|
17 |
android:id="@+id/begin"> |
18 |
<Constraint
|
19 |
android:id="@id/textView"> |
20 |
<CustomAttribute
|
21 |
movement:attributeName="textColor" |
22 |
movement:customColorValue="@colour/black" /> |
23 |
</Constraint>
|
24 |
</ConstraintSet>
|
25 |
|
26 |
<ConstraintSet
|
27 |
android:id="@+id/finish"> |
28 |
<Constraint
|
29 |
android:id="@id/textView" |
30 |
android:scaleX="2" |
31 |
android:scaleY="2"> |
32 |
<Format
|
33 |
android:layout_marginBottom="40sp" |
34 |
android:layout_width="wrap_content" |
35 |
android:layout_height="wrap_content" |
36 |
movement:layout_constraintBottom_toTopOf="@id/button" /> |
37 |
<CustomAttribute
|
38 |
movement:attributeName="textColor" |
39 |
movement:customColorValue="@colour/teal_700" /> |
40 |
</Constraint>
|
41 |
</ConstraintSet>
|
42 |
</MotionScene>
|
di dalam atribut Transition
Tentukan durasi animasi dalam milidetik serta metode interpolasi yang digunakan untuk menghitung nilai rata-rata. Kami juga menggunakan mentimun OnClick
Tandai untuk menentukan kapan switch dimulai. itu targetId
Atribut menentukan tampilan mana yang akan memicu animasi. Dalam kasus kami, kami menggunakan tombol kami sebagai elemen pemicu. itu clickAction
Tema merinci apa yang harus terjadi setelah pengguna mengklik tombol kami. Dalam hal ini, kami menetapkan nilainya ke transitiontoEnd
. Nilai lain yang mungkin adalah toggle
Dan transitionToStart
Dan jumpToEnd
Dan jumpToStart
.
Selanjutnya kita definisikan ConstraintSet
Tag yang menentukan tampilan widget kita di awal dan akhir animasi. Anda juga dapat mempertimbangkan untuk menggunakan editor animasi jika Anda tidak suka menulis semua XML sendiri. Ini juga akan memberi Anda gambaran bagus tentang bagaimana tata letak Anda terlihat di awal dan akhir animasi.



Coba jalankan aplikasi Anda di emulator atau di perangkat fisik sekarang. Anda akan melihat sebuah file TextView
Lompat, ubah warna, dan tambah ukuran.



Mengontrol animasi secara terprogram
Meskipun memungkinkan bagi kita untuk menganimasikan teks kita hanya dengan menulis beberapa XML, Anda mungkin ingin lebih mengontrol animasinya. Menjalankan animasi secara terprogram memberi Anda opsi untuk melakukan tugas lain berdasarkan keseluruhan kemajuan animasi.
Tambahkan baris berikut ke file Button
Widget XML untuk memanggil metode yang dipanggil begin()
ditentukan dalam MainActivity.kt mengajukan:
1 |
android:onClick="begin" |
Tentukan metode yang dipanggil begin()
dalam batasan MainActivity
kategori di bawah ini onCreate()
. Itu harus berisi kode berikut:
1 |
enjoyable begin(v: View) { |
2 |
val motionContainer = findViewById<MotionLayout>(R.id.motion_container) |
3 |
motionContainer.transitionToEnd(); |
4 |
}
|
Kita mulai dengan mendapatkan referensi terlebih dahulu MotionLayout
. Di baris berikutnya, kami menggunakan transitionToEnd()
Metode transisi ke animasi nilai di awal ConstraintSet
Sampai akhir ConstraintSet
.
Anda dapat melampirkan pendengar yang dituju MotionLayout
Widget untuk memantau kemajuan animasi dan menangani apa yang terjadi di berbagai acara. itu TransitionListener
Antarmuka memiliki empat metode abstrak. Android Studio akan menghasilkan stub untuk semua metode ini secara otomatis. Kode Anda di bawah panggilan ke transitionToEnd()
Seharusnya terlihat seperti ini sekarang:
1 |
val jumpButton = findViewById<Button>(R.id.button) |
2 |
val greeting = findViewById<TextView>(R.id.textView) |
3 |
|
4 |
motionContainer.setTransitionListener( |
5 |
object: MotionLayout.TransitionListener { |
6 |
|
7 |
override enjoyable onTransitionStarted( |
8 |
motionLayout: MotionLayout?, |
9 |
startId: Int, |
10 |
endId: Int |
11 |
) { |
12 |
jumpButton.setBackgroundColor(Colour.BLACK); |
13 |
}
|
14 |
|
15 |
override enjoyable onTransitionChange( |
16 |
motionLayout: MotionLayout?, |
17 |
startId: Int, |
18 |
endId: Int, |
19 |
progress: Float |
20 |
) { |
21 |
|
22 |
}
|
23 |
|
24 |
override enjoyable onTransitionCompleted( |
25 |
motionLayout: MotionLayout?, |
26 |
currentId: Int) { |
27 |
if(currentId == R.id.finish) { |
28 |
greeting.textual content = "Good Night!"; |
29 |
}
|
30 |
}
|
31 |
|
32 |
override enjoyable onTransitionTrigger( |
33 |
motionLayout: MotionLayout?, |
34 |
triggerId: Int, |
35 |
optimistic: Boolean, |
36 |
progress: Float |
37 |
) { |
38 |
|
39 |
}
|
40 |
}
|
41 |
)
|
Kita mulai dengan mendapatkan referensi TextView
widget f Button
widget.
di dalam TransitionListener
itu onTransitionStarted()
Menyala saat transisi akan segera dimulai. menerima yang ditentukan MotionLayout
sebagai koefisien pertama. Parameter kedua dan ketiga adalah pengidentifikasi kelompok kendala awal dan akhir.
Kami memanggil setBackgroundColor()
jalan terus jumpButton
untuk mengubah warnanya menjadi hitam setelah transisi dimulai.
itu onTransitionCompleted()
Membakar metode saat transisi selesai. Ia menerima dua parameter. Yang pertama adalah untuk menunjukkan MotionLayout
. Yang kedua adalah pengenal ConstraintSet
Saat ini berlaku untuk perencanaan.
Kami memeriksa apakah file currentId
cocok dengan pengidentifikasi akhir kami ConstraintSet
. Teks salam berubah menjadi Selamat malam! Jika ada pertandingan. Anda juga dapat melakukan hal lain di sini seperti kembali ke keadaan awal dengan melakukan panggilan ke transitionToStart()
.
Mengklik file melompat Kali ini tombol akan memperbarui teks dan juga mengubah warna tombol.



Pikiran terakhir
Dalam tutorial ini, Anda mempelajari cara menganimasikan berbagai widget dalam aktivitas Anda menggunakan MotionLayout
. Dimungkinkan untuk menganimasikan tata letak hanya dengan menggunakan XML. Namun, Anda bisa mendapatkan kontrol granular atas animasi jika Anda menggunakan kode untuk melakukan animasi. Ini juga memungkinkan Anda melakukan hal-hal lain selama berbagai tahap animasi.
Android Studio juga dilengkapi dengan Editor gerak Membantu Anda mengidentifikasi transisi kompleks dengan cepat. Anda juga dapat melihat tahap awal dan akhir animasi saat menggunakan editor gerak.