Bagikan melalui

Xamarin.Android CardView

  • Artikel

Widget Cardview adalah komponen UI yang menyajikan konten teks dan gambar dalam tampilan yang menyerupai kartu. Panduan ini menjelaskan cara menggunakan dan menyesuaikan CardView di aplikasi Xamarin.Android sambil mempertahankan kompatibilitas mundur dengan versi Android yang lebih lama.

Gambaran Umum

Cardview Widget, yang diperkenalkan di Android 5.0 (Lollipop), adalah komponen UI yang menyajikan konten teks dan gambar dalam tampilan yang menyerupai kartu. CardView diimplementasikan sebagai FrameLayout widget dengan sudut bulat dan bayangan. Biasanya, CardView digunakan untuk menyajikan item baris tunggal dalam ListView grup atau GridView tampilan. Misalnya, cuplikan layar berikut adalah contoh aplikasi reservasi perjalanan yang menerapkan CardViewkartu tujuan perjalanan berbasis dalam yang dapat digulir :ListView

Contoh aplikasi menggunakan CardView untuk setiap tujuan perjalanan

Panduan ini menjelaskan cara menambahkan CardView paket ke proyek Xamarin.Android Anda, cara menambahkan CardView ke tata letak Anda, dan cara menyesuaikan tampilan CardView di aplikasi Anda. Selain itu, panduan ini menyediakan daftar CardView terperinci atribut yang dapat Anda ubah, termasuk atribut untuk membantu Anda menggunakan CardView versi Android yang lebih lama dari Android 5.0 Lollipop.

Persyaratan

Berikut ini diperlukan untuk menggunakan fitur Android 5.0 dan yang lebih baru (termasuk CardView) di aplikasi berbasis Xamarin:

  • Xamarin.Android – Xamarin.Android 4.20 atau yang lebih baru harus diinstal dan dikonfigurasi dengan Visual Studio atau Visual Studio untuk Mac.

  • Android SDK – Android 5.0 (API 21) atau yang lebih baru harus diinstal melalui Android SDK Manager.

  • Java JDK 1.8 – JDK 1.7 dapat digunakan jika Anda secara khusus menargetkan API level 23 dan yang lebih lama. JDK 1.8 tersedia dari Oracle.

Aplikasi Anda juga harus menyertakan Xamarin.Android.Support.v7.CardView paket. Untuk menambahkan Xamarin.Android.Support.v7.CardView paket di Visual Studio untuk Mac:

  1. Buka proyek Anda, klik kanan Paket dan pilih Tambahkan Paket.

  2. Dalam dialog Tambahkan Paket, cari CardView.

  3. Pilih Xamarin Support Library v7 CardView, lalu klik Tambahkan Paket.

Untuk menambahkan Xamarin.Android.Support.v7.CardView paket di Visual Studio:

  1. Buka proyek Anda, klik kanan simpul Referensi (di panel Penjelajah Solusi) dan pilih Kelola Paket NuGet....

  2. Saat dialog Kelola Paket NuGet ditampilkan, masukkan CardView di kotak pencarian.

  3. Saat Pustaka Dukungan Xamarin v7 CardView muncul, klik Instal.

Untuk mempelajari cara mengonfigurasi proyek aplikasi Android 5.0, lihat Menyiapkan Proyek Android 5.0. Untuk informasi selengkapnya tentang menginstal paket NuGet, lihat Panduan: Menyertakan NuGet di proyek Anda.

Memperkenalkan CardView

Defaultnya CardView menyerupai kartu putih dengan sudut bulat minimal dan sedikit bayangan. Contoh tata letak Main.axml berikut menampilkan satu CardView widget yang berisi TextView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:padding="5dp">
    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="245dp"
        android:layout_gravity="center_horizontal">
        <TextView
            android:text="Basic CardView"
            android:layout_marginTop="0dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true" />
    </android.support.v7.widget.CardView>
</LinearLayout>

Jika Anda menggunakan XML ini untuk menggantikan konten Main.axml yang ada, pastikan untuk mengomentari kode apa pun di MainActivity.cs yang mengacu pada sumber daya di XML sebelumnya.

Contoh tata letak ini membuat default CardView dengan satu baris teks seperti yang diperlihatkan dalam cuplikan layar berikut:

Cuplikan layar CardView dengan latar belakang putih dan baris teks

Dalam contoh ini, gaya aplikasi diatur ke Tema Material ringan (Theme.Material.Light) sehingga CardView bayangan dan tepi lebih mudah dilihat. Untuk informasi selengkapnya tentang tema aplikasi Android 5.0, lihat Tema Materi. Di bagian berikutnya, kita akan mempelajari cara menyesuaikan CardView aplikasi.

Menyesuaikan CardView

Anda dapat memodifikasi atribut dasar CardView untuk menyesuaikan tampilan CardView di aplikasi Anda. Misalnya, elevasi CardView dapat ditingkatkan untuk melemparkan bayangan yang lebih besar (yang membuat kartu tampaknya mengapung lebih tinggi di atas latar belakang). Selain itu, radius sudut dapat ditingkatkan untuk membuat sudut kartu lebih bulat.

Dalam contoh tata letak berikutnya, yang disesuaikan CardView digunakan untuk membuat simulasi foto cetak ("rekam jepret"). Ditambahkan ImageView ke CardView untuk menampilkan gambar, dan diposisikan TextView di bawah ImageView untuk menampilkan judul gambar. Dalam tata letak contoh ini, CardView memiliki kustomisasi berikut:

  • ditingkatkan cardElevation menjadi 4dp untuk melemparkan bayangan yang lebih besar.
  • ditingkatkan cardCornerRadius menjadi 5dp untuk membuat sudut tampak lebih bulat.

Karena CardView disediakan oleh pustaka dukungan Android v7, atributnya tidak tersedia dari android: namespace. Oleh karena itu, Anda harus menentukan namespace XML Anda sendiri dan menggunakan namespace tersebut sebagai awalan CardView atribut. Dalam contoh tata letak di bawah ini, kita akan menggunakan baris ini untuk menentukan namespace yang disebut cardview:

    xmlns:cardview="http://schemas.android.com/apk/res-auto"

Anda dapat memanggil namespace card_view layanan ini atau bahkan myapp jika Anda memilih (hanya dapat diakses dalam cakupan file ini). Apa pun yang Anda pilih untuk memanggil namespace ini, Anda harus menggunakannya untuk mengawali CardView atribut yang ingin Anda ubah. Dalam contoh tata letak ini, cardview namespace adalah awalan untuk cardElevation dan cardCornerRadius:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:padding="5dp">
    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="245dp"
        android:layout_gravity="center_horizontal"
        cardview:cardElevation="4dp"
        cardview:cardCornerRadius="5dp">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="240dp"
            android:orientation="vertical"
            android:padding="8dp">
            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="190dp"
                android:id="@+id/imageView"
                android:scaleType="centerCrop" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#333333"
                android:text="Photo Title"
                android:id="@+id/textView"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="5dp" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

Ketika contoh tata letak ini digunakan untuk menampilkan gambar dalam aplikasi tampilan foto, CardView memiliki tampilan rekam jepret foto, seperti yang digambarkan dalam cuplikan layar berikut:

CardView dengan gambar dan keterangan di bawah gambar

Perhatikan bahwa CardView dapat menampilkan lebih dari satu tampilan anak di area kontennya. Misalnya, dalam contoh aplikasi tampilan foto di atas, area konten terdiri dari ListView yang berisi ImageView dan TextView. Meskipun CardView instans sering disusun secara vertikal, Anda juga dapat mengaturnya secara horizontal (lihat Membuat Gaya Tampilan Kustom untuk contoh cuplikan layar).

Opsi Tata Letak CardView

CardView tata letak dapat disesuaikan dengan mengatur satu atau beberapa atribut yang memengaruhi padding, elevasi, radius sudut, dan warna latar belakangnya:

Diagram atribut CardView

Setiap atribut juga dapat diubah secara dinamis dengan memanggil metode mitra CardView (untuk informasi selengkapnya tentang CardView metode, lihat referensi kelas CardView). Perhatikan bahwa atribut ini (kecuali untuk warna latar belakang) menerima nilai dimensi, yang merupakan angka desimal diikuti oleh unit. Misalnya, 11.5dp menentukan 11,5 piksel independen kepadatan.

Padding

CardView menawarkan lima atribut padding untuk memosisikan konten dalam kartu. Anda dapat mengaturnya di XML tata letak atau Anda dapat memanggil metode analog dalam kode Anda:

Diagram atribut padding CardView

Atribut padding dijelaskan sebagai berikut:

  • contentPadding – Padding bagian dalam antara tampilan anak dari CardView dan semua tepi kartu.

  • contentPaddingBottom – Padding bagian dalam antara tampilan anak dari CardView tepi bawah dan kartu.

  • contentPaddingLeft – Padding dalam antara tampilan anak dari CardView dan tepi kiri kartu.

  • contentPaddingRight – Padding dalam antara tampilan anak dari CardView dan tepi kanan kartu.

  • contentPaddingTop – Padding bagian dalam antara tampilan anak dari CardView dan tepi atas kartu.

Atribut content padding relatif terhadap batas area konten daripada widget tertentu yang terletak di dalam area konten. Misalnya, jika contentPadding cukup meningkat di aplikasi tampilan foto, CardView akan memotong gambar dan teks yang ditampilkan pada kartu.

Elevation

CardView menawarkan dua atribut elevasi untuk mengontrol elevasinya dan, sebagai hasilnya, ukuran bayangannya:

Diagram atribut elevasi CardView

Atribut elevasi dijelaskan sebagai berikut:

  • cardElevation – Elevasi CardView (mewakili sumbu Z-nya).

  • cardMaxElevation – Nilai maksimum CardViewelevasi .

Nilai yang lebih besar meningkatkan cardElevation ukuran bayangan untuk membuat CardView tampaknya mengapung lebih tinggi di atas latar belakang. Atribut ini cardElevation juga menentukan urutan gambar tampilan yang tumpang tindih; yaitu, CardView akan digambar di bawah tampilan tumpang tindih lainnya dengan pengaturan elevasi yang lebih tinggi dan di atas tampilan yang tumpang tindih dengan pengaturan elevasi yang lebih rendah. Pengaturan cardMaxElevation ini berguna saat aplikasi Anda mengubah elevasi secara dinamis – mencegah bayangan melewati batas yang Anda tentukan dengan pengaturan ini.

Radius Sudut dan Warna Latar Belakang

CardView menawarkan atribut yang dapat Anda gunakan untuk mengontrol radius sudut dan warna latar belakangnya. Kedua properti ini memungkinkan Anda mengubah gaya CardViewkeseluruhan :

Diagram radious sudut CardView dan atribut warna latar belakang

Atribut ini dijelaskan sebagai berikut:

  • cardCornerRadius – Radius sudut semua sudut CardView.

  • cardBackgroundColor– Warna latar belakang .CardView

Dalam diagram ini, cardCornerRadius diatur ke 10dp yang lebih bulat dan cardBackgroundColor diatur ke "#FFFFCC" (kuning muda).

Kompatibilitas

Anda dapat menggunakan CardView pada versi Android yang lebih lama dari Android 5.0 Lollipop. Karena CardView merupakan bagian dari library dukungan Android v7, Anda dapat menggunakan CardView Android 2.1 (API level 7) dan yang lebih tinggi. Namun, Anda harus menginstal paket seperti yang Xamarin.Android.Support.v7.CardView dijelaskan dalam Persyaratan, di atas.

CardView menunjukkan perilaku yang sedikit berbeda pada perangkat sebelum Lollipop (API level 21):

  • CardView menggunakan implementasi bayangan terprogram yang menambahkan padding tambahan.

  • CardView tidak mengklip tampilan anak yang berpotongan dengan CardViewsudut bulat.

Untuk membantu mengelola perbedaan kompatibilitas ini, CardView berikan beberapa atribut tambahan yang dapat Anda konfigurasi di tata letak Anda:

  • cardPreventCornerOverlap – Atur atribut ini ke untuk true menambahkan padding saat aplikasi Anda berjalan pada versi Android sebelumnya (API level 20 dan yang lebih lama). Pengaturan ini mencegah CardView konten bersinggungan dengan CardViewsudut bulat .

  • cardUseCompatPadding – Atur atribut ini ke untuk true menambahkan padding saat aplikasi Anda berjalan di versi Android pada atau lebih besar dari API level 21. Jika Anda ingin menggunakan CardView pada perangkat pra-Lollipop dan membuatnya terlihat sama di Lollipop (atau yang lebih baru), atur atribut ini ke true. Ketika atribut ini diaktifkan, CardView menambahkan padding tambahan untuk menggambar bayangan saat berjalan pada perangkat pra-Lollipop. Ini membantu mengatasi perbedaan padding yang diperkenalkan ketika implementasi bayangan terprogram pra-Lollipop berlaku.

Untuk informasi selengkapnya tentang mempertahankan kompatibilitas dengan versi Android sebelumnya, lihat Mempertahankan Kompatibilitas.

Ringkasan

Panduan ini memperkenalkan widget baru CardView yang disertakan dalam Android 5.0 (Lollipop). Ini menunjukkan tampilan default CardView dan menjelaskan cara menyesuaikan CardView dengan mengubah elevasi, kebulatan sudut, padding konten, dan warna latar belakangnya. Ini mencantumkan CardView atribut tata letak (dengan diagram referensi), dan menjelaskan cara menggunakan CardView pada perangkat Android yang lebih lama dari Android 5.0 Lollipop. Untuk informasi selengkapnya tentang CardView, lihat referensi kelas CardView.