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 toggleDan transitionToStartDan jumpToEndDan 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 TransitionListeneritu 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.
