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

Membuat View Gabungan di Android

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Ketika membuat aplikasi yang kompleks, Anda akan sering ingin menggunakan kembali kelompok view yang sama di berbagai tempat dari aplikasi. Salah satu cara untuk memecahkan masalah ini adalah dengan membuat sebuah view yang merangkum logika dan tata letak sekelompok view sehingga Anda dapat menggunakannya kembali tanpa menduplikasi kode di berbagai tempat dari proyek. Dalam tutorial ini, Anda akan belajar cara menggunakan view gabungan untuk membuat view kustom yang mudah digunakan kembali.

1. Perkenalan

Di Android, view yang terdiri dari sekelompok view disebut view gabungan atau komponen gabungan. Dalam tutorial ini, Anda akan membangun control untuk memilih nilai dari daftar yang bergulir dari sisi ke sisi. Kami akan menamakan gabungan tersebut sebagai side spinner karena tampilan default SDK Android untuk memilih nilai dari daftar disebut sebagai spinner. Tangkapan layar berikut mengilustrasikan apa yang akan kita buat dalam tutorial ini.

2. Pengaturan Proyek

Untuk memulai, Anda harus membuat proyek Android baru dengan Android 4.0 sebagai tingkat SDK minimum yang diperlukan. Proyek ini hanya boleh berisi activity kosong yang disebut MainActivity. Activity tidak melakukan apa-apa selain menginisialisasi layout seperti yang Anda lihat di cuplikan kode berikut.

Layout untuk MainActivity terletak di file /res/layout/activity_main.xml dan seharusnya hanya berisi RelativeLayout kosong dimana view gabungan akan ditampilkan nantinya.

3. Membuat sebuah View Gabungan

Untuk membuat view gabungan, Anda harus membuat kelas baru yang mengelola view dalam view gabungan. Untuk side spinner, Anda memerlukan dua view Button untuk panah dan view TextView untuk menampilkan nilai yang dipilih.

Untuk memulai, buat file layout /res/layout/sidespinner_view.xml yang akan kita gunakan untuk kelas side spinner, pastikan untuk membungkus tiga view dalam tag <merge>.

Selanjutnya, kita perlu membuat kelas SideSpinner yang mengembangkan layout ini dan menetapkan panah sebagai gambar latar belakang untuk tombol. Pada titik ini, view gabungan tidak melakukan apa-apa karena belum ada yang ditampilkan.

Anda akan melihat bahwa view gabungan memperluas grup view LinearLayout. Ini berarti bahwa layout apa pun yang menggunakan view gabungan memiliki akses ke atribut layout linier. Akibatnya, layout view gabungan sedikit berbeda dari biasanya, tag root adalah tag <merge> sebagai ganti tag untuk grup view seperti <LinearLayout> atau <RelativeLayout>.

Saat Anda menambahkan view gabungan ke layout MainActivity, tag untuk view gabungan akan bertindak sebagai tag LinearLayout. Kelas view gabungan dapat berasal dari kelas mana pun yang berasal dari ViewGroup, tetapi dalam hal ini layout linier adalah yang paling tepat karena view ditata secara horizontal.

4. Menambahkan View Gabungan ke Layout

Pada titik ini, proyek dikompilasi tetapi tidak ada yang terlihat karena view gabungan tidak dalam layout MainActivity. View side spinner harus ditambahkan ke layout activity seperti view lainnya. Nama tag adalah nama lengkap dari kelas SideSpinner, termasuk namespace.

Untuk menambahkan side spinner ke MainActivity, tambahkan yang berikut ini ke layout relatif di file /res/layout/activity_main.xml.

 Atribut yang tersedia dalam tag <SideSpinner> adalah atribut dari layout linier sejak kelas SideSpinner yang kita buat memperluas kelas LinearLayout. Jika Anda meluncurkan proyeknya, side spinner harus terlihat, tetapi tidak mengandung nilai apa pun.

5. Menambahkan Metode ke View Gabungan

Masih ada beberapa hal yang hilang jika kita ingin benar-benar menggunakan side spinner. Kita harus dapat menambahkan nilai baru ke spinner, memilih nilai, dan mendapatkan nilai yang dipilih.

Cara termudah untuk menambahkan perilaku baru ke view gabungan adalah menambahkan metode public baru ke kelas SideSpinner. Metode ini dapat digunakan oleh Activity apa pun yang memiliki referensi ke view.

Metode onFinishInflate dari view gabungan dipanggil ketika semua view dalam layout meningkat dan siap digunakan. Ini adalah tempat untuk menambahkan kode Anda jika Anda perlu mengubah view dalam view gabungan.

Dengan metode yang baru saja Anda tambahkan ke kelas SideSpinner, perilaku untuk tombol yang memilih nilai sebelumnya dan selanjutnya sekarang dapat ditambahkan. Ganti kode yang ada dalam metode onFinishInflate dengan yang berikut:

Dengan metode setValues dan setSelectedIndex yang baru dibuat, kita sekarang dapat menginisialisasi side spinner dari kode kita. Seperti halnya view lain, Anda perlu menemukan view side spinner dalam layout dengan metode findViewById. Kita kemudian dapat memanggil metode public apa pun pada view dari objek yang dikembalikan, termasuk yang baru saja kita buat.

Potongan kode berikut menunjukkan cara memperbarui metode onCreate dari kelas MainActivity untuk menampilkan daftar nilai di side spinner, menggunakan metode setValues. Kita juga dapat memilih nilai kedua dalam daftar secara default dengan menerapkan metode setSelectedIndex.

Jika Anda meluncurkan aplikasi, side spinner akan berfungsi seperti yang diharapkan. Daftar nilai ditampilkan dan nilai Orange dipilih secara default.

6. Menambahkan Atribut Layout ke View Gabungan

View yang tersedia di SDK Android dapat dimodifikasi melalui kode, tetapi beberapa atribut juga dapat diatur secara langsung di layout yang sesuai. Mari tambahkan sebuah atribut ke side spinner yang menetapkan nilai yang dibutuhkan oleh side spinner untuk ditampilkan.

Untuk membuat atribut khusus untuk view gabungan, pertama-tama kita perlu mendefinisikan atribut di file /res/values/attr.xml. Setiap atribut view gabungan harus dikelompokkan dalam sebuah styleable dengan tag <declare-styleable>. Untuk side spinner, nama kelas digunakan seperti yang ditunjukkan di bawah ini.

Dalam tag <attr>, atribut name berisi identifier yang digunakan untuk merujuk ke atribut baru dalam layout dan atribut format berisi jenis atribut baru.

Untuk daftar nilai, jenis reference digunakan karena atribut akan merujuk ke daftar string yang didefinisikan sebagai sumber daya. Jenis nilai yang biasanya digunakan dalam layout dapat digunakan untuk atribut khusus Anda, termasuk booleancolordimensionenumintegerfloat dan string.

Di sini adalah bagaimana mendefinisikan sumber daya untuk daftar string yang atribut values dari side spinner akan merujuk. Ini harus ditambahkan ke file /res/values/strings.xml seperti yang ditunjukkan di bawah ini.

Untuk menguji atribut values yang baru, buat view side spinner dalam layout MainActivity di bawah side spinner yang ada. Atribut harus diawali dengan namespace yang ditambahkan ke RelativeLayout, seperti xmlns:sidespinner="http://schemas.android.com/apk/res-auto". Ini adalah layout akhir di /res/layout/activity_main.xml.

Akhirnya, kelas SideSpinner perlu dimodifikasi untuk membaca atribut values. Nilai setiap atribut view tersedia di objek AttributeSet yang dilewatkan sebagai parameter constructor dari view.

Untuk mendapatkan nilai dari atribut values kustom Anda, pertama kita memanggil metode obtainStyledAttributes dari objek AttributeSet dengan nama styleable yang berisi atributnya. Ini mengembalikan daftar atribut untuk styleable itu sebagai objek TypedArray.

Kita kemudian memanggil metode getter dari objek TypedArray yang memiliki tipe yang tepat untuk atribut yang Anda inginkan, mengirimkan identifier atribut sebagai sebuah parameter. Blok kode berikut menunjukkan bagaimana memodifikasi constructor dari side spinner untuk mendapatkan daftar nilai dan menetapkannya di side spinner.

Jika Anda meluncurkan aplikasi, Anda akan melihat dua side spinner yang bekerja secara independen dari satu sama lain.

7. Menyimpan dan Memulihkan Keadaan

Langkah terakhir yang perlu kita selesaikan adalah menyimpan dan memulihkan keadaan dari view gabungan. Ketika suatu activity dihancurkan dan dibuat ulang, misalnya, ketika perangkat diputar, nilai-nilai view asli dengan pengenal unik secara otomatis disimpan dan dipulihkan. Ini saat ini tidak berlaku untuk side spinner.

Keadaan view tidak disimpan. Pengidentifikasi view di kelas SideSpinner tidak unik karena dapat digunakan kembali berkali-kali. Ini berarti bahwa kita bertanggung jawab untuk menyimpan dan memulihkan nilai-nilai view dalam view gabungan. Kita melakukan ini dengan menerapkan metode onSaveInstanceState, onRestoreInstanceState, dan dispatchSaveInstanceState. Blok kode berikut menunjukkan bagaimana melakukan ini untuk side spinner.

Kesimpulan

Side spinner sekarang selesai. Kedua side spinner bekerja seperti yang diharapkan dan nilai-nilai mereka dipulihkan jika aktivitas dihancurkan dan dibuat ulang. Anda sekarang dapat menerapkan apa yang telah Anda pelajari untuk menggunakan kembali sekumpulan view dalam aplikasi Android dengan menggunakan view gabungan.

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.