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

Pengenalan kepada Transisi Aktivitas Lollipop Baru

by
Difficulty:IntermediateLength:LongLanguages:

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

What You'll Be Creating

Pengenalan

Salah satu aspek yang paling menarik dari spesifikasi Material Design adalah kesinambungan visual antar aktivitas. Dengan hanya beberapa baris kode, API Lollipop baru memungkinkan Anda untuk melakukan transisi yang bermakna di antara dua aktivitas, berkat animasi yang lancar dan berkesinambungan. Ini memecah batas-batas aktivitas klasik dari versi Android sebelumnya dan memungkinkan pengguna untuk memahami bagaimana elemen berpindah dari satu titik ke titik lainnya.

Dalam tutorial ini, saya akan menunjukkan kepada Anda cara mencapai hasil ini, membuat aplikasi sampel konsisten dengan pedoman Material Design Google.

Prasyarat

Dalam tutorial ini, saya akan berasumsi bahwa Anda sudah akrab dengan pengembangan Android dan bahwa Anda menggunakan Android Studio sebagai IDE Anda. Saya akan menggunakan maksud Android secara luas, dengan asumsi pengetahuan dasar siklus hidup aktivitas, dan widget RecyclerView baru diperkenalkan dengan API 21, Juni lalu. Saya tidak akan menyelami detail kelas ini, tetapi, jika Anda tertarik, Anda dapat menemukan penjelasan yang bagus dalam tutorial Tuts+ ini.

1. Buat Activity Pertama

Struktur dasar dari aplikasi ini sangat mudah. Ada dua aktivitas, yang utama, MainActivity.java, yang tugasnya adalah menampilkan daftar item, dan yang kedua, DetailActivity.java, yang akan menunjukkan rincian item yang dipilih dalam daftar sebelumnya.

Langkah 1: Widget RecyclerView

Untuk menampilkan daftar item, activity utama akan menggunakan widget RecyclerView yang dikenalkan di Android Lollipop. Hal pertama yang perlu Anda lakukan adalah, tambahkan baris berikut ke bagian dependencies dalam file build.grade proyek Anda untuk mengaktifkan kompatibilitas ke belakang:

Langkah 2: Definisi Data

Demi keringkasan, kami tidak akan mendefinisikan database aktual atau sumber data yang serupa untuk aplikasi tersebut. Sebagai gantinya, kita akan menggunakan kelas khusus, Contact. Setiap item akan memiliki nama, warna, dan informasi kontak dasar yang terkait dengannya. Seperti inilah implementasi kelas Contact:

Anda akan berakhir dengan container yang bagus untuk informasi yang Anda minati. Tetapi kita perlu mengisinya dengan beberapa data. Di bagian atas kelas Contact, tambahkan potongan kode berikut untuk mengisi kumpulan data.

Dengan mendefinisikan data sebagai public dan static, setiap kelas dalam proyek dapat membacanya. Dalam arti, kita meniru perilaku database dengan pengecualian bahwa kita meng-hardcoding-nya ke dalam kelas.

Langkah 3: Mendefinisikan Layout Utama

Tata letak aktivitas utama sederhana, karena daftar akan mengisi seluruh layar. Tata letaknya termasuk RelativeLayout sebagai root — tetapi bisa juga menjadi LinearLayout juga — dan RecyclerView sebagai child satu-satunya.

Karena widget RecyclerView mengatur sub-elemen dan tidak lebih, Anda juga perlu merancang tata letak item daftar tunggal. Kami ingin memiliki lingkaran berwarna di sebelah kiri setiap item dari daftar kontak sehingga Anda harus terlebih dahulu menentukan drawable circle.xml.

Anda sekarang memiliki semua elemen yang diperlukan untuk menentukan tata letak item daftar.

Langkah 4: Tampilkan Data Menggunakan RecyclerView

Kami hampir tiba di akhir bagian pertama dari tutorial. Anda masih harus menulis RecyclerView.ViewHolder dan RecyclerView.Adapter, dan menugaskan semuanya ke tampilan terkait dalam metode onCreate dari aktivitas utama. Dalam hal ini, RecyclerView.ViewHolder juga harus dapat menangani klik sehingga Anda perlu menambahkan kelas khusus yang mampu melakukannya. Mari kita mulai mendefinisikan kelas yang bertanggung jawab untuk penanganan klik.

Anda perlu menentukan RecyclerView.Adapter, yang akan saya sebut sebagai DataManager. Ini bertanggung jawab untuk memuat data dan memasukkannya ke tampilan daftar. Kelas pengelola data ini juga akan berisi definisi RecyclerView.ViewHolder.

Akhirnya, tambahkan kode berikut ke metode onCreate, di bawah setContentView. Activity utama sudah siap.

Ini adalah apa yang tampak seperti aplikasi jika Anda membangun dan menjalankannya.

First Activity when completed

2. Buat Rincian Activity

Langkah 1: Tata letak

Activity kedua jauh lebih sederhana. Dibutuhkan ID dari kontak yang dipilih dan mengambil informasi tambahan yang tidak ditampilkan aktivitas pertama.

Dari sudut pandang desain, tata letak kegiatan ini sangat penting karena ini adalah bagian terpenting dari aplikasi. Tetapi untuk apa yang menyangkut XML, itu sepele. Tata letak adalah serangkaian contoh TextView yang diposisikan dengan cara yang menyenangkan, menggunakan RelativeLayout dan LinearLayout. Seperti inilah tata letaknya:

Langkah 2: Kirim dan Terima ID melalui Intent Ekstra

Karena kedua aktivitas itu dihubungkan oleh suatu maksud, Anda perlu mengirimkan beberapa informasi yang memungkinkan kegiatan kedua untuk memahami kontak mana yang Anda minta rinciannya.

Satu opsi mungkin menggunakan variabel posisi sebagai referensi. Posisi elemen dalam daftar sesuai dengan posisi elemen dalam larik sehingga tidak ada yang buruk dalam menggunakan bilangan bulat ini sebagai referensi unik.

Ini akan berfungsi, tetapi jika Anda mengambil pendekatan ini dan, untuk alasan apa pun, kumpulan data diubah saat waktu proses, referensi tidak akan cocok dengan kontak yang Anda minati. Inilah alasan mengapa lebih baik menggunakan ID ad hoc. Informasi ini adalah metode getId yang didefinisikan di kelas Contact.

Edit handler onItemClick dari daftar item seperti yang ditunjukkan di bawah ini.

DetailsActivity akan menerima informasi dari ekstra Intent dan membangun objek yang benar menggunakan ID sebagai referensi. Ini ditampilkan dalam blok kode berikut.

Sama seperti sebelumnya dalam metode onCreateViewHolder dari RecylerView, view diinisialisasi menggunakan metode findViewById dan diisi menggunakan setText. Misalnya, untuk mengonfigurasi bidang nama, kami melakukan hal berikut:

Prosesnya sama untuk bidang lainnya. Kegiatan kedua akhirnya siap.

Second Activity when completed

3. Transisi Berarti

Kami akhirnya tiba di inti dari tutorial, animasi dua activity menggunakan metode Lollipop baru untuk transisi menggunakan elemen bersama.

Langkah 1: Mengkonfigurasi Proyek Anda

Hal pertama yang perlu Anda lakukan adalah mengedit tema Anda dalam file style.xml di folder values-v21. Dengan cara ini, Anda mengaktifkan transisi konten dan mengatur pintu masuk dan keluar dari tampilan yang tidak dibagi di antara kedua aktivitas tersebut.

Harap dicatat bahwa proyek Anda harus ditargetkan ke (dan dengan demikian dapat dikompilasi dengan) setidaknya Android API 21.

Animasi akan diabaikan pada sistem yang tidak menginstal Lollipop. Sayangnya, karena alasan kinerja, pustaka AppCompat tidak menyediakan kompatibilitas mundur lengkap untuk animasi ini.

Langkah 2: Tetapkan Nama Transisi di File Tata Letak

Setelah Anda mengedit file style.xml Anda, Anda harus menunjukkan hubungan antara dua elemen umum dari tampilan.

Dalam contoh kami, tampilan yang dibagikan adalah bidang yang berisi nama kontak, salah satu nomor telepon, dan lingkaran berwarna. Untuk masing-masing, Anda harus menentukan nama transisi umum. Untuk alasan ini, mulailah menambahkan dalam file sumber daya strings.xml item berikut:

Kemudian, untuk masing-masing dari tiga pasangan, di file tata letak menambahkan android:transitionName atribut dengan nilai yang sesuai. Untuk lingkaran berwarna, kode akan terlihat seperti ini:

Berkat atribut ini, Android akan tahu tampilan mana yang dibagikan di antara dua aktivitas dan akan membenarkan animasi transisi. Ulangi proses yang sama untuk dua view lainnya.

Langkah 3: Mengkonfigurasi Intent

Dari sudut pandang coding, Anda harus melampirkan bundel ActivityOptions spesifik ke intent. Metode yang Anda perlukan adalah makeSceneTransitionAnimation, yang mengambil parameter konteks aplikasi dan banyak elemen bersama yang kita butuhkan. Dalam metode onItemClick dari RecyclerView, edit Intent yang didefinisikan sebelumnya seperti ini:

Untuk setiap elemen bersama yang akan dianimasikan, Anda harus menambahkan metode makeSceneTransitionAnimation pada item Pair baru. Setiap Pair memiliki dua nilai, yang pertama adalah referensi ke tampilan yang Anda transisikan dari, yang kedua adalah value dari atribut transitionName.

Berhati-hatilah ketika mengimpor kelas Pair. Anda harus menyertakan paket android.support.v4.util, bukan paket android.util. Juga, ingat untuk menggunakan metode ActivityCompat.startActivity sebagai ganti metode startActivity, karena jika tidak Anda tidak akan dapat menjalankan aplikasi Anda pada lingkungan dengan API di bawah 16.

Itu dia. Anda sudah selesai. Sesederhana itu.

Kesimpulan

Dalam tutorial ini Anda belajar bagaimana transisi yang indah dan mulus antara dua aktivitas yang berbagi satu atau lebih elemen umum, memungkinkan kontinuitas yang secara visual menyenangkan dan bermakna.

Anda memulai dengan membuat yang pertama dari dua aktivitas, yang berperan untuk menampilkan daftar kontak. Anda kemudian menyelesaikan kegiatan kedua, merancang tata letaknya, dan menerapkan cara untuk menyampaikan referensi unik antara dua kegiatan tersebut. Akhirnya, Anda melihat cara kerja makeSceneTransitionAnimation, berkat atribut XML transitionName.

Tip Bonus: Detail Gaya

Untuk membuat aplikasi tampilan Material Design sejati, seperti yang ditunjukkan pada screenshot sebelumnya, Anda juga perlu mengubah warna tema Anda. Edit tema dasar Anda di folder values-v21 untuk mendapatkan hasil yang bagus.

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.