Android From Scratch: Memahami Adapters dan Adaptor Views

() translation by (you can also view the original English article)

Tampilan adaptor sangat umum sehingga Anda akan kesulitan menemukan aplikasi Android populer yang mereka tidak gunakan Namanya mungkin tidak famiar, tapi jika kamu berfikiran kamu tidak pernah melihat tampilan adaptor kamu pasti akan salah. Setiap kali Anda melihat elemen tampilan antarmuka pengguna aplikasi Android dalam bentuk daftar, kisi, atau tumpukan, Anda melihat tampilan adaptor sedang aktif.

seperti namanya, adapter view yaitu View objek. Ini berarti, kamu bisa menambahkan aktifitasmu dengan cara yang sama seperti kamu menambahkan beberapa pengguna widget interface lainnya. Namun, ia tidak mampu menampilkan data apa pun dengan sendirinya. adapter ini isinya selalu ditentukan oleh objek lain Dalam tutorial ini, saya akan menunjukkan cara membuat adaptor dan menggunakannya untuk memberikan berbagai jenis tampilan adaptor seperti ListView dan GridView.

Apakah Anda merasa lebih mudah untuk belajar dengan video? Mengapa tidak melihat petunjuk kami:

Android

Getting Started With Android

Paul Trebilcox-Ruiz

1. Apakah Adaptor itu?

Adaptor adalah objek dari kelas yang mengimplementasikan Adapter interface. Ini bertindak sebagai penghubung antara kumpulan data dan tampilan adaptor, objek dari kelas yang memperluas kelas AdapterView abstrak. Data set mampu menyajikan data apa saja secara terstruktur. Array, List objects, dan Cursor object adalah kumpulan data yang umum digunakan.

Adaptor bertanggung jawab untuk mengambil data dari kumpulan data dan untuk menghasilkan View objects berdasarkan data tersebut. View Objek yang dihasilkan kemudian digunakan untuk mengisi tampilan adaptor yang terikat ke adaptor.

Anda dapat membuat adapter classes sendiri, tetapi sebagian besar pengembang memilih untuk menggunakan atau memperluas adapter classes yang disediakan oleh SDK Android, seperti ArrayAdapter dan SimpleCursorAdapter. Dalam tutorial ini, kami fokus pada ArrayAdapter class.

2. Bagaimana Adapter View bekerja?

Adapter views dapat menampilkan set data yang besar dengan sangat efisien. misalnya, Widget ListView dan GridView dapat menampilkan jutaan item tanpa adanya penundaan yang berarti sehingga menjaga memori dan penggunaan CPU yang sangat rendah. bagaimana mereka melakukan itu? Tampilan adaptor yang berbeda mengikuti strategi yang berbeda. Namun, inilah yang kebanyakan dari mereka biasa lakukan.

Mereka hanya membuat mereka melihat objek yang sudah ada di layar atau yang akan bergerak di layar. Dengan cara ini, memori yang dikonsumsi oleh adapter view dapat konstan dan independen dari ukuran set data.
Mereka juga memungkinkan para pengembang untuk meminimalkan tata letak operasi penggelembungan yang mahal dan mendaur ulang objek Tampilan yang sudah ada yang bergerak di luar layar. Ini membuat konsumsi CPU tetap rendah.

3. Membuat ArrayAdapter

untuk membuat adapter, kamu perlu mengikutinya:

set data
sumber file yang berisi tata letak View object yang dihasilkan

Selain itu, karena kelas ArrayAdapter hanya dapat bekerja dengan string, Anda perlu memastikan tata letak View object yang dihasilkan mengandung setidaknya satu TextView widget.

Step 1: Membuat set data

ArrayAdapter class dapat menggunakan kedua array dan Daftar objek sebagai data set. Untuk saat ini, mari kita menggunakan array sebagai kumpulan data.

String[] cheeses = {
            "Parmesan",
            "Ricotta",
            "Fontina",
            "Mozzarella",
            "Cheddar"
          };

Step 2: membuat Resource File

Buat file layout XML baru yang elemen dasarnya adalah LinearLayout dan beri nama item.xml. Drag dan drop widget teks besar di dalamnya dan menetapkan nilai dari atribut id untuk cheese_name. layout XML file lihat seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/activity_horizontal_margin">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/cheese_name" />
</LinearLayout>

Step 3: membuat Adapter

Dalam aktifitas anda, membuat contoh baru dari kelas ArrayAdapter menggunakan konstruktor. Seperti argumennya, berikan nama pada file resource, mengidentifikasi dari TextView, dan dilanjutkan ke array. sekarang adapter telah siap.

ArrayAdapter<String> cheeseAdapter = 
    new ArrayAdapter<String>(this,
        R.layout.item,
        R.id.cheese_name,
        cheeses
    );

4. membuat list

Untuk menampilkan daftar item yang dapat digulir secara vertikal, Anda dapat menggunakan widget ListView. Untuk menambahkan widget ke aktivitas Anda, Anda dapat menyeret dan melepaskannya di dalam file aktivitas tata letak XML atau membuatnya menggunakan konstruktornya dalam kode Jawa Anda. Untuk saat ini, mari kita lakukan yang berikut ini.

1	ListView cheeseList = new ListView(this);

Biasanya, tidak ada pengguna widget interface lain yang ditempatkan di dalam tata letak yang berisi ListView. Oleh karena itu, lanjutkan ListView ke metode setContentView () dari aktivitas Anda sehingga membutuhkan seluruh layar.

1	setContentView(cheeseList);

Untuk mengikat ListView ke adaptor yang kita buat pada langkah sebelumnya, panggil metode setAdapter () seperti ditunjukkan di bawah ini.

1	cheeseList.setAdapter(cheeseAdapter);

Jika Anda menjalankan aplikasi Anda sekarang, Anda seharusnya dapat melihat isi dari array dalam bentuk daftar.

5. Membuah sebuah jaringan

Untuk menampilkan kisi dua dimensi yang dapat digulir secara vertikal, Anda dapat menggunakan widget GridView. Baik ListView dan GridView adalah subclass dari kelas AbsListView abstrak dan mereka memiliki banyak kesamaan. Karena itu, jika Anda tahu cara menggunakannya, Anda juga tahu cara menggunakan yang benar.

Gunakan konstruktor GridView class untuk membuat instance baru dan dilanjutkan ke setContentView () metode aktivitas Anda.

1	GridView cheeseGrid = new GridView(this);
2	setContentView(cheeseGrid);

Untuk mengatur jumlah kolom di grid, panggil metode setNumColumns (). Saya akan membuat grid dua kolom.

1	cheeseGrid.setNumColumns(2);

Biasanya, Anda ingin menyesuaikan lebar kolom dan jarak di antara mereka menggunakan metode setColumnWidth (), setVerticalSpacing (), dan setHorizontalSpacing (). Perhatikan bahwa metode ini menggunakan piksel sebagai unitnya.

1	cheeseGrid.setColumnWidth(60);
2	cheeseGrid.setVerticalSpacing(20);
3	cheeseGrid.setHorizontalSpacing(20);

Anda sekarang dapat mengikat GridView ke adaptor yang kami buat sebelumnya menggunakan metode setAdapter ().

1	cheeseGrid.setAdapter(cheeseAdapter);

Jalankan aplikasi Anda lagi untuk melihat seperti apa tampilan GridView.

6. tambahkan pendengar acara

kemungkin untuk mendengarkan peristiwa klik dan klik panjang pada item di dalam tampilan adaptor. Sebagai contoh, mari tambahkan pendengar acara click ke GridView.

Buat instance baru dari kelas anonim yang mengimplementasikan AdaptorView. Pada interface Pemroses Klik Item dan berikan ke metode On Item Click Listener () pada objek GridView. Android Studio secara otomatis menghasilkan rintisan untuk metode Klik Barang () pada interface. Anda akan melihat bahwa parameter metode termasuk integer yang menentukan posisi item list. Anda dapat menggunakan bilangan bulat ini untuk mencari tahu item mana dalam kumpulan data yang diklik pengguna.

Kode berikut menggambarkan cara menampilkan pesan sederhana sebagai snackbar setiap kali item dalam GridView diklik.

cheeseGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView,
                            View view, int position, long rowId) {

        // Generate a message based on the position
        String message = "You clicked on " + cheeses[position];

        // Use the message to create a Snackbar
        Snackbar.make(adapterView, message, Snackbar.LENGTH_LONG)
                .show(); // Show the Snackbar
    }
});

Jika Anda menjalankan aplikasi dan mengklik item apa pun di grid, pesan akan muncul di bagian bawah layar. Perhatikan bahwa Anda dapat menggunakan kode yang sama untuk mendengarkan peristiwa klik pada item di dalam ListView.

7. Memperluas ArrayAdapter

ArrayAdapter dapat menangani hanya satu widget TextView di dalam tata letak objek View yang dihasilkannya. Untuk memperluas kemampuannya, Anda harus memperpanjangnya. Namun, sebelum kita melakukannya, mari kita buat kumpulan data yang sedikit lebih kompleks.

Alih-alih string, katakanlah kumpulan data kami berisi objek dari kelas berikut:

static class Cheese {
    String name;
    String description;

    public Cheese(String name, String description) {
        this.name = name;
        this.description = description;
    }
}

Ini adalah kumpulan data yang akan kita gunakan:

Cheese[] cheeses = {
        new Cheese("Parmesan", "Hard, granular cheese"),
        new Cheese("Ricotta", "Italian whey cheese"),
        new Cheese("Fontina", "Italian cow's milk cheese"),
        new Cheese("Mozzarella", "Southern Italian buffalo milk cheese"),
        new Cheese("Cheddar", "Firm, cow's milk cheese"),
};

Seperti yang Anda lihat, Cheese class berisi dua bidang, nama dan pendeskripsian. Untuk menampilkan kedua bidang dalam daftar atau kisi, tata letak item harus berisi dua widget TextView.

Buat file layout XML baru dan beri nama custom_item.xml. Tambahkan teks besar dan widget teks kecil ke dalamnya. Atur atribut id dari widget pertama ke cheese_name dan yang kedua ke cheese_description. Isi dari file XML layout seharusnya sekarang terlihat seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/activity_horizontal_margin">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/cheese_name" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/cheese_description" />
</LinearLayout>

ArrayAdapter juga harus mampu menangani dua widget TextView. Kunjungi kembali aktivitas Anda, buat kelas anonim baru yang memperluas kelas ArrayAdapter, dan mengganti metode getView (). Pastikan Anda meneruskan array sebagai argumen ke konstruktornya.

ArrayAdapter<Cheese> cheeseAdapter = 
        new ArrayAdapter<Cheese>(this, 0, cheeses) {
            @Override
            public View getView(int position,
                                View convertView,
                                ViewGroup parent) {

            }
        };

Di dalam metode getView (), Anda harus menggunakan parameter posisi sebagai indeks array dan mengambil item pada indeks itu.

1	Cheese currentCheese = cheeses[position];

Parameter kedua dari metode getView () adalah apa yang memungkinkan kita untuk menggunakan kembali View object. Jika Anda mengabaikannya, kinerja tampilan adaptor Anda akan buruk. Ketika metode getView () dipanggil untuk pertama kalinya, convertView adalah null. Anda harus menginisialisasi dengan menggembungkan file sumber daya yang menentukan tata letak item daftar. Untuk melakukannya, dapatkan referensi ke LayoutInflater menggunakan metode getLayoutInflater () dan aktifkan metode inflate () nya.

// Inflate only once
if(convertView == null) {
    convertView = getLayoutInflater()
                    .inflate(R.layout.custom_item, null, false);
}

Pada titik ini, Anda dapat menggunakan findViewById () untuk mendapatkan referensi ke widget TextView di dalam layout dan call metode setText () untuk menginisialisasi mereka menggunakan data dari susunan.

TextView cheeseName = 
    (TextView)convertView.findViewById(R.id.cheese_name);
TextView cheeseDescription = 
    (TextView)convertView.findViewById(R.id.cheese_description);

cheeseName.setText(currentCheese.name);
cheeseDescription.setText(currentCheese.description);

Terakhir, kembalikan convertView sehingga dapat digunakan untuk mengisi tampilan adaptor yang terkait dengan adaptor.

1	return convertView;

8. Menggunakan View Holder

Metode getView () disebut berulang kali oleh tampilan adaptor untuk mengisi sendiri. Oleh karena itu, Anda harus mencoba meminimalkan jumlah operasi yang Anda lakukan di dalamnya.

Pada langkah sebelumnya, Anda mungkin telah memperhatikan bahwa, meskipun kami memastikan bahwa layout daftar item meningkat hanya sekali, metode findViewById (), yang mengkonsumsi banyak siklus CPU, dipanggil setiap kali dengan nama metode getView ().

Untuk menghindari hal ini dan untuk meningkatkan kinerja tampilan adaptor, kita perlu menyimpan hasil dari metode findViewById () di dalam objek convertView. Untuk melakukannya, kita dapat menggunakan objek view holder, yang tidak lebih dari objek kelas yang dapat menyimpan widget yang ada di layout.

Karena tata letak memiliki dua widget TextView, kelas view holder juga harus memiliki dua widget TextView. Saya telah memberi nama kelas ViewHolder.

1	static class ViewHolder{
2	TextView cheeseName;
3	TextView cheeseDescription;
4	}

Dalam metode getView (), setelah Anda mengembang layout, Anda sekarang dapat menginisialisasi objek view holder menggunakan metode findViewById ().

ViewHolder viewHolder = new ViewHolder();
viewHolder.cheeseName =
        (TextView)convertView.findViewById(R.id.cheese_name);
viewHolder.cheeseDescription =
        (TextView)convertView.findViewById(R.id.cheese_description);

Untuk menyimpan objek view holder di convertView, gunakan metode setTag ().

1	// Store results of findViewById
2	convertView.setTag(viewHolder);

Dan sekarang, setiap kali getView () memanggil, Anda dapat mengambil objek view holder dari convertView menggunakan metode getTag () dan memperbarui widget TextView di dalamnya menggunakan metode setText ().

TextView cheeseName = 
    ((ViewHolder)convertView.getTag()).cheeseName;
TextView cheeseDescription = 
    ((ViewHolder)convertView.getTag()).cheeseDescription;
    
cheeseName.setText(currentCheese.name);
cheeseDescription.setText(currentCheese.description);

Jika Anda menjalankan aplikasi Anda sekarang, Anda dapat melihat GridView menampilkan dua baris teks di setiap sel.

GridView with two lines of text per item

Keseimpulan

Dalam tutorial ini, Anda belajar cara membuat adaptor dan menggunakannya untuk mengisi berbagai tampilan adaptor. Anda juga belajar cara membuat adaptor kustom Anda sendiri. Meskipun kami hanya fokus pada kelas ArrayAdapter, ListView, dan GridView, Anda dapat menggunakan teknik yang sama untuk adaptor dan adaptor lainnya yang ditawarkan Android SDK.

Android Support Library termasuk kelas RecyclerView. Ini berperilaku seperti tampilan adaptor, tetapi bukan subkelas dari kelas AdapterView. Anda harus mempertimbangkan menggunakannya jika Anda ingin membuat daftar yang lebih kompleks, terutama yang menggunakan file layout ganda untuk item mereka. Untuk mempelajari lebih lanjut tentang itu, Anda bisa merujuk ke tutorial Envato Tuts + ini.

Untuk mempelajari lebih lanjut tentang kelas AdapterView dan subclassnya, Anda dapat merujuk ke dokumentasinya.