Langsung ke konten

Paling sering dikunjungi

Terakhir dikunjungi

navigation

Membuat Daftar dan Kartu

Bagian pelajaran ini mengajarkan Anda cara

  1. Membuat Daftar
  2. Membuat Kartu
  3. Menambahkan Dependensi

Anda juga harus membaca

Untuk membuat daftar dan kartu yang kompleks dengan gaya desain material di aplikasi, Anda bisa menggunakan widget RecyclerView dan CardView.

Membuat Daftar

Widget RecyclerView adalah versi ListView yang lebih maju dan fleksibel. Widget ini adalah kontainer untuk menampilkan set data besar yang bisa digulir secara sangat efisien dengan mempertahankan tampilan dalam jumlah terbatas. Gunakan widget RecyclerView bila Anda memiliki kumpulan data dengan elemen yang berubah saat waktu proses berdasarkan aksi pengguna atau kejadian jaringan.

Kelas RecyclerView menyederhanakan penampilan dan penanganan set data yang besar dengan menyediakan:

Anda juga memiliki keluwesan untuk mendefinisikan pengelola layout khusus dan animasi untuk widget RecyclerView.

Gambar 1. Widget RecyclerView.

Untuk menggunakan widget RecyclerView, Anda harus menetapkan adaptor dan pengelola layout. Untuk membuat adaptor, perluas kelasRecyclerView.Adapter . Detail implementasi bergantung pada detail kumpulan data Anda dan tipe tampilan. Untuk informasi selengkapnya, lihat contoh-contoh di bawah.

Gambar 2 - Daftar berisi RecyclerView.

Pengelola layout memosisikan tampilan item dalam RecyclerView dan menentukan waktu untuk menggunakan ulang tampilan item yang tidak lagi terlihat oleh pengguna. Untuk menggunakan ulang (atau mendaur ulang) tampilan, pengelola layout bisa meminta adaptor untuk mengganti materi tampilan dengan elemen lain dalam kumpulan data. Mendaur ulang tampilan dengan cara ini akan meningkatkan kinerja karena menghindari pembuatan tampilan yang tidak diperlukan atau melakukan pencarian findViewById() yang mahal.

RecyclerView menyediakan semua pengelola layout bawaan ini:

Untuk membuat pengelola layout khusus, perluas kelas RecyclerView.LayoutManager.

Animasi

Animasi untuk menambahkan dan menghapus item diaktifkan secara default di RecyclerView. Untuk menyesuaikan animasi ini, perluas kelas RecyclerView.ItemAnimatordan gunakan metode RecyclerView.setItemAnimator().

Contoh

Contoh kode berikut memperagakan cara menambahkan RecyclerView ke layout:

<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Begitu Anda menambahkan widget RecyclerView ke layout, dapatkan pengatur atau handle objek itu, hubungkan dengan pengelola layout, dan sertakan adaptor untuk data yang akan ditampilkan:

public class MyActivity extends Activity {
    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        // use this setting to improve performance if you know that changes
        // in content do not change the layout size of the RecyclerView
        mRecyclerView.setHasFixedSize(true);

        // use a linear layout manager
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);

        // specify an adapter (see also next example)
        mAdapter = new MyAdapter(myDataset);
        mRecyclerView.setAdapter(mAdapter);
    }
    ...
}

Adaptor menyediakan akses ke item dataset Anda, membuat tampilan untuk item, dan mengganti materi sebagian tampilan dengan item data baru bila item semula tidak lagi terlihat. Contoh kode berikut menampilkan implementasi sederhana untuk sebuah dataset yang terdiri dari larik string yang ditampilkan dengan menggunakan widget TextView:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private String[] mDataset;

    // Provide a reference to the views for each data item
    // Complex data items may need more than one view per item, and
    // you provide access to all the views for a data item in a view holder
    public static class ViewHolder extends RecyclerView.ViewHolder {
        // each data item is just a string in this case
        public TextView mTextView;
        public ViewHolder(TextView v) {
            super(v);
            mTextView = v;
        }
    }

    // Provide a suitable constructor (depends on the kind of dataset)
    public MyAdapter(String[] myDataset) {
        mDataset = myDataset;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.my_text_view, parent, false);
        // set the view's size, margins, paddings and layout parameters
        ...
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - get element from your dataset at this position
        // - replace the contents of the view with that element
        holder.mTextView.setText(mDataset[position]);

    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return mDataset.length;
    }
}

Gambar 3. Contoh kartu.

Membuat Kartu

CardView memperluas kelas FrameLayout dan memungkinkan Anda menampilkan informasi dalam kartu yang memiliki tampilan konsisten lintas platform. Widget CardView bisa memiliki bayangan dan sudut lengkung.

Untuk membuat kartu dengan bayangan, gunakan atribut card_view:cardElevation. CardView menggunakan elevasi nyata dan bayangan dinamis pada Android 5.0 (API level 21) ke atas dan memundurkan ke implementasi bayangan terprogram pada versi terdahulu. Untuk informasi selengkapnya, lihat Mempertahankan Kompatibilitas.

Gunakan properti-properti ini untuk menyesuaikan penampilan widget CardView:

Contoh kode berikut menampilkan cara menyertakan widget CardView dalam layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>
</LinearLayout>

Untuk informasi selengkapnya, lihat referensi API untuk CardView.

Menambahkan Dependensi

Widget RecyclerView dan CardView adalah bagian dari v7 Support Library. Untuk menggunakan widget dalam proyek Anda, tambahkan dependensi Gradle ini ke modul aplikasi Anda:

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
    compile 'com.android.support:recyclerview-v7:21.0.+'
}
Situs ini menggunakan cookies untuk menyimpan preferensi Anda tentang bahasa di situs tertentu dan opsi tampilan.

Dapatkan berita dan tips terbaru dari developer Android yang akan membantu Anda mencapai kesuksesan di Google Play.

* Wajib Diisi

Hore!

Ikuti Google Developers di WeChat

Buka situs ini dalam bahasa ?

Anda meminta halaman dalam bahasa , namun preferensi bahasa untuk situs ini adalah .

Ingin mengubah preferensi bahasa dan mengakses situs ini dalam bahasa ? Jika nanti Anda ingin mengubah preferensi bahasa, gunakan menu bahasa di bagian bawah setiap halaman.

Kelas ini memerlukan tingkat API atau yang lebih tinggi

Dokumen ini tersembunyi karena level API yang Anda pilih untuk dokumentasi ini adalah . Anda dapat mengubah level API dokumentasi dengan pemilih di atas menu navigasi sebelah kiri.

Untuk informasi lebih lanjut tentang menentukan level API yang diperlukan aplikasi Anda, baca Mendukung Versi Platform Yang Berbeda.

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)