Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Menambahkan Gerakan Gesek ke RecyclerViews

by
Difficulty:AdvancedLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Primrose (you can also view the original English article)

Sebagian besar Desain Material adalah cara pengguna berinteraksi dengan elemen visual aplikasi. Oleh karena itu, selain mengetuk dan menekan lama, aplikasi Android yang dibuat dengan baik hari ini diharapkan untuk menangani gerakan sentuhan yang lebih kompleks seperti gesekan dan seret. Ini sangat penting jika aplikasi menggunakan daftar untuk menampilkan datanya.

Dengan menggunakan widget RecyclerView, dan beberapa komponen Android Jetpack lainnya, Anda dapat menangani berbagai gerakan gesekan terkait daftar di aplikasi Anda. Selain itu, hanya dalam beberapa baris kode, Anda dapat mengaitkan animasi Gerakan Material dengan gerakan itu.

Dalam tutorial ini, saya akan menunjukkan kepada Anda cara menambahkan beberapa gerakan menggesek umum, lengkap dengan animasi intuitif, ke daftar Anda.

Prasyarat

Untuk dapat memanfaatkan tutorial ini sebaik-baiknya, Anda membutuhkan:

  • Android Studio 3.2.1 atau lebih
  • ponsel atau tablet yang menjalankan Android API level 23 atau lebih tinggi

1. Membuat Daftar

Agar tutorial ini singkat, mari gunakan salah satu templat yang tersedia di Android Studio untuk menghasilkan daftar kami.

Mulailah dengan meluncurkan Android Studio dan membuat proyek baru. Di panduan pembuatan proyek, pastikan Anda memilih opsi Empty Activity.

Project creation wizard

Alih-alih pustaka Dukungan, kami akan menggunakan Android Jetpack dalam proyek ini. Jadi, setelah proyek dibuat, buka Refactor > Migrate to AndroidX. Saat diminta, tekan tombol Migrate.

Confirmation prompt for proceeding with migration

Selanjutnya, untuk menambahkan daftar ke proyek, buka File > New > Fragment > Fragment (List). Dalam dialog yang muncul, lanjutkan dan tekan tombol Finish tanpa membuat perubahan apa pun ke nilai default.

List fragment creation wizard

Pada titik ini, Android Studio akan membuat fragmen baru yang berisi widget RecyclerView yang sepenuhnya dikonfigurasi. Ini juga akan menghasilkan data dummy untuk ditampilkan di dalam widget. Namun, Anda masih harus menambahkan fragmen ke aktivitas utama Anda secara manual.

Untuk melakukannya, pertama-tama tambahkan antarmuka OnListFragmentInteractionListener ke aktivitas utama Anda dan terapkan satu-satunya metode yang dikandungnya.

Selanjutnya, sematkan fragmen di dalam aktivitas dengan menambahkan tag <fragment> berikut ke file activity_main.xml:

Pada titik ini, jika Anda menjalankan aplikasi Anda, Anda seharusnya dapat melihat daftar yang terlihat seperti ini:

App displaying a simple list

2. Menambahkan Gerakan Gesek ke Hapus

Menggunakan kelas ItemTouchHelper, Anda dapat dengan cepat menambahkan gesek dan seret gerakan ke widget RecyclerView apa pun. Kelas ini juga menyediakan animasi default yang berjalan secara otomatis setiap kali gerakan yang valid terdeteksi.

Kelas ItemTouchHelper membutuhkan turunan dari kelas ItemTouchHelper.Callback abstrak untuk dapat mendeteksi dan menangani gerakan. Meskipun Anda dapat menggunakannya secara langsung, lebih mudah menggunakan kelas pembungkus yang disebut SimpleCallback. Ini abstrak juga, tetapi Anda akan memiliki lebih sedikit metode untuk menimpanya.

Buat instance baru dari kelas SimpleCallback di dalam metode onCreateView () dari kelas ItemFragment. Sebagai argumen untuk konstruktornya, Anda harus melewati arah gesek yang Anda inginkan. Untuk saat ini, berikan RIGHT untuk itu sehingga menangani gerakan swipe-kanan.

Kelas memiliki dua metode abstrak, yang harus Anda timpa: metode onMove (), yang mendeteksi hambatan, dan metode onSwiped (), yang mendeteksi gesekan. Karena kami tidak akan menangani gerakan seret apa pun hari ini, pastikan Anda mengembalikan false di dalam metode onMove ().

Di dalam metode onSwiped (), Anda bisa menggunakan properti adapterPosition untuk menentukan indeks item daftar yang digesek. Karena kami menerapkan gerakan gesek-untuk-menghapus sekarang, berikan indeks ke metode removeAt () dari daftar dummy untuk menghapus item.

Selain itu, Anda harus meneruskan indeks yang sama ke metode notifyItemRemoved () pada adaptor widget RecyclerView untuk memastikan bahwa item tidak dirender lagi. Melakukannya juga menjalankan animasi penghapusan item default.

Pada titik ini, objek SimpleCallback siap. Yang perlu Anda lakukan sekarang adalah membuat objek ItemTouchHelper dengannya dan pasang widget RecyclerView ke sana.

Jika Anda menjalankan aplikasi sekarang, Anda dapat menghapus item dari daftar.

3. Mengungkap Tampilan Latar Belakang

Meskipun gerakan menggesek untuk menghapus sangat intuitif, beberapa pengguna mungkin tidak yakin apa yang terjadi ketika mereka melakukan gerakan. Oleh karena itu, pedoman Desain Bahan mengatakan bahwa gerakan itu juga harus secara progresif mengungkapkan pandangan yang tersembunyi di balik item, yang dengan jelas menunjukkan apa yang akan terjadi selanjutnya. Biasanya, tampilan latar belakang hanyalah sebuah ikon yang menampilkan tempat sampah.

Untuk menambahkan ikon tempat sampah ke proyek Anda, buka File> New> Vector Asset dan pilih ikon bernama delete.

Icon selection dialog

Anda sekarang bisa mendapatkan referensi ke ikon di kode Kotlin Anda dengan memanggil metode getDrawable (). Jadi tambahkan baris berikut ke metode onCreateView () dari kelas ItemFragment:

Menampilkan tampilan di belakang item daftar sedikit rumit karena Anda perlu menggambar secara manual sambil juga memastikan bahwa batasnya sesuai dengan batas wilayah yang semakin terungkap.

Ganti metode onChildDraw () dari implementasi SimpleCallback Anda untuk mulai menggambar.

Dalam kode di atas, panggilan ke metode onChildDraw () dari superclass adalah penting. Tanpanya, item daftar Anda tidak akan bergerak saat digesek.

Karena kami hanya menangani gerakan menggesek-kanan, koordinat X dari sudut kiri atas dan kiri bawah dari tampilan latar belakang akan selalu nol. Sebaliknya, koordinat X sudut kanan atas dan kanan bawah harus sama dengan parameter dX, yang menunjukkan seberapa banyak item daftar telah dipindahkan oleh pengguna.

Untuk menentukan koordinat Y dari semua sudut, Anda harus menggunakan properti top dan bottom dari salah satu tampilan yang ada di dalam objek viewHolder.

Dengan menggunakan semua koordinat ini, kini Anda dapat menentukan wilayah klip persegi panjang. Kode berikut ini menunjukkan kepada Anda bagaimana menggunakan metode clipRect () dari objek Canvas untuk melakukannya:

Meskipun Anda tidak harus melakukannya, adalah ide yang bagus untuk membuat wilayah klip terlihat dengan memberikan warna latar belakang. Inilah cara Anda dapat menggunakan metode drawColor () untuk membuat wilayah klip menjadi abu-abu saat jarak gesek kecil dan merah saat lebih besar.

Anda sekarang harus menentukan batasan ikon tempat sampah. Batas ini harus menyertakan margin yang cocok dengan teks yang ditampilkan dalam daftar item. Untuk menentukan nilai margin dalam piksel, gunakan metode getDimension () dan kirimkan text_margin ke sana.

Anda dapat menggunakan kembali koordinat sudut kiri atas area klip sebagai koordinat sudut kiri atas ikon. Mereka harus, bagaimanapun, diimbangi oleh textMargin. Untuk menentukan koordinat sudut kanan bawahnya, gunakan lebar dan tinggi intrinsiknya. Begini caranya:

Terakhir, gambar ikon dengan memanggil metode draw ().

Jika Anda menjalankan aplikasi lagi, Anda harus dapat melihat ikon ketika Anda menggesek untuk menghapus item daftar.

4. Menambahkan Gerakan Swipe-to-Refresh

Gerakan gesek-untuk-menyegarkan, juga dikenal sebagai gerakan tarik-untuk-menyegarkan, telah menjadi sangat populer akhir-akhir ini sehingga Android Jetpack memiliki komponen khusus untuk itu. Ini disebut SwipeRefreshLayout, dan memungkinkan Anda untuk dengan cepat mengaitkan isyarat dengan widget RecyclerView, ListView, atau GridView.

Untuk mendukung gerakan gesek-untuk-menyegarkan di widget RecyclerView Anda, Anda harus membuatnya sebagai anak dari widget SwipeRefreshLayout. Jadi buka file fragment_item_list.xml, tambahkan tag <SwipeRefreshLayout> ke dalamnya, dan pindahkan tag <RecycleView> di dalamnya. Setelah Anda melakukannya, konten file akan seperti ini:

Fragmen daftar mengasumsikan bahwa widget RecyclerView adalah elemen root dari tata letaknya. Karena ini tidak benar lagi, Anda perlu membuat beberapa perubahan dalam metode onCreateView () dari kelas ItemFragment. Pertama, ganti baris pertama metode, yang mengembang tata letak, dengan kode berikut:

Selanjutnya, ubah baris terakhir metode untuk mengembalikan widget SwipeRefreshLayout alih-alih widget RecyclerView.

Jika Anda mencoba menjalankan aplikasi sekarang, Anda akan dapat melakukan gerakan geser vertikal dan mendapatkan umpan balik visual. Isi daftar tidak akan berubah. Untuk benar-benar menyegarkan daftar, Anda harus mengaitkan objek OnRefreshListener dengan widget SwipeRefreshLayout.

Di dalam pendengar, Anda bebas mengubah data yang ditampilkan daftar berdasarkan kebutuhan Anda. Untuk saat ini, karena kami bekerja dengan data dummy, mari kita kosongkan daftar item dummy dan memuatnya dengan 25 item dummy baru. Kode berikut menunjukkan kepada Anda bagaimana melakukannya:

Setelah memperbarui data, Anda harus ingat untuk memanggil metode notifyDataSetChanged () untuk membiarkan adapter widget RecyclerView tahu bahwa ia harus menggambar ulang daftar.

Secara default, segera setelah pengguna melakukan gerakan swipe-to-refresh, widget SwipeRefreshLayout menampilkan indikator progres animasi. Oleh karena itu, setelah Anda memperbarui daftar, Anda harus ingat untuk menghapus indikator dengan mengatur properti isRefreshing dari widget ke false.

Jika Anda menjalankan aplikasi sekarang, menghapus beberapa item daftar, dan melakukan gerakan swipe-to-refresh, Anda akan melihat daftar reset sendiri.

Kesimpulan

Desain Material telah ada selama beberapa tahun sekarang, dan sebagian besar pengguna saat ini mengharapkan Anda untuk menangani banyak gerakan yang disebutkannya. Untungnya, melakukan itu tidak membutuhkan banyak usaha. Dalam tutorial ini, Anda belajar cara menerapkan dua gerakan menggesek yang sangat umum. Anda juga belajar cara mengungkapkan tampilan yang disembunyikan di belakang item daftar yang disapu secara progresif.

Anda dapat mempelajari lebih lanjut tentang gerakan dan Gerakan Material dengan merujuk ke panduan Desain Gerakan.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.