Tutorial Xamarin Android : Custom List View

Hello Selamat siang, jumpa lagi dengan saya, pada kesempatan kali ini saya akan melanjutkan bermain ListView pada Xamarin Android ya, kalau belum lihat tutorial yang berkaitan dengan listview bisa kalian cek dulu tutorial nya yaitu :

1. Membuat listview sederhana
2. Membuat Simple ListView dengan TextView

Jika, tidak mari kita lanjutkan untuk membahas tentang custom listviewnya. Jika kalian penasaran dengan listview dengan gambar, jangan terburu-buru terlebih dahulu, karena listview akan kita ganti dengan Desain Library Xamarin yaitu Recycler View ya, Sebetulnya ListView akan mulai ditinggalkan dan mulai menggunakan RecyclerView hal ini sudah direkomendasikan oleh para developer-developer android di dunia loh :). 

Ya, kita kembali lagi ke Custom ListView saja deh.  Oh iya karena tutorial ini lanjutan dari tutorial sebelumnya yaitu Simple List View maka , project yang digunakan adalah project Simple List View, namun akan kita modifikasi / melakukan pengubahan beberapa code.

Step 1 :

Bukalah kembali solution SimpleListView nya .

Step 2 :
Buatlah sebuah Class baru dengan nama Makanan.cs (cara membuat class baru sudah dijelaskan pada tutorial ke 2 yaitu (Simple List View). Lalu code untuk Makanan.cs adalah sebagai berikut

using System;
namespace ListViewSederhana
{
 public class Makanan
 {
  public Makanan()
  {
  }

  public string Nama { get; set; }
  public string Kategori { get; set; }
  public string Harga { get; set; }
  public string Stok { get; set; }
 }
}

Pada step ini kita deklarasikan 4 variable untuk menampung data custom listview yaitu Nama Makanan, Kategori Makanan, Harga Makanan dan Stok Makanan.

Step 3 :
Lakukan modifikasi pada ListViewRow.axml dengan code sebagai berikut

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px"
    android:padding="5dp"
    android:weightSum="100"
 >
    <TextView
        android:text="Nama Makanan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
  android:layout_weight="25"
        android:id="@+id/txtNama" />
 <TextView
        android:text="Kategori Makanan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
  android:layout_weight="25"
        android:id="@+id/txtKategori" />
 <TextView
        android:text="Harga Makanan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
  android:layout_weight="25"
        android:id="@+id/txtHarga" />
 <TextView
        android:text="Stok Makanan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
  android:layout_weight="25"
        android:id="@+id/txtStok" />
</LinearLayout>

Pada android orentiation saya buat horizontal, kemudian saya copy menjadi 4 buah TextView lalu masing-masih TextView saya berikan id nya masing, masing yaitu : txtNama, txtKategori, txtHarga dan txtStok.

Step 4:
Bukalah Class MyListViewAdapter.cs dan ubah codenya sebagai berikut :

using System;
using System.Collections.Generic;
using Android.Widget;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;

namespace ListViewSederhana
{
 public class MyListViewAdapter : BaseAdapter<Makanan>
 {
  public MyListViewAdapter()
  {
   
  }

  public List<Makanan> itemMakanan;
  private Context mContext;


  public MyListViewAdapter(Context context, List<Makanan> items)
  {
   itemMakanan = items;
   mContext = context;
  }

  public override int Count
  {
   get
   {
    return itemMakanan.Count;
   }
  }

  public override long GetItemId(int position)
  {
   return position;
  }

  public override Makanan this[int position]
  {
   get
   {
    return itemMakanan[position];
   }
  }

  public override View GetView(int position, View convertView, ViewGroup parent)
  {
   View row = convertView;
   if (row == null)
   {
    row = LayoutInflater.From(mContext).Inflate(Resource.Layout.ListViewRow, null, false);

   }
   TextView txtNama = row.FindViewById<TextView>(Resource.Id.txtNama);
   txtNama.Text = itemMakanan[position].Nama;

   TextView txtKategori = row.FindViewById<TextView>(Resource.Id.txtKategori);
   txtKategori.Text = itemMakanan[position].Kategori;

   TextView txtHarga = row.FindViewById<TextView>(Resource.Id.txtHarga);
   txtHarga.Text = itemMakanan[position].Harga;

   TextView txtStok = row.FindViewById<TextView>(Resource.Id.txtStok);
   txtStok.Text = itemMakanan[position].Stok;

   return row;

  }
 }
}

Perubahan yang kita lakukan adalah memanggil nama class Makanan, oleh karena itu semua atribut pemanggilan data via string kita rubah menjadi Makanan. Bisa kalian cek di code berikut :

public class MyListViewAdapter : BaseAdapter<Makanan>

public List<Makanan> itemMakanan;

public override Makanan this[int position]

Tujuannya adalah agar kita dapat mengambil dan mempermudah penampilan data listviewnya.

Step 5 :
Buka kembali MainActivity.cs nya lalu lakukan juga modifikasi sebagai berikut :

using Android.App;
using Android.Widget;
using Android.OS;
using System.Collections.Generic;

namespace ListViewSederhana
{
 [Activity(Label = "ListView", MainLauncher = true)]
 public class MainActivity : Activity
 {

  private List<Makanan> itemMakanan;
  private ListView DaftarMakanan;

  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.Main);
   DaftarMakanan = FindViewById<ListView>(Resource.Id.listViewMakanan);

   itemMakanan = new List<Makanan>();

   itemMakanan.Add(new Makanan() {Nama="Soto babat", Kategori="Makanan Kuah", Harga="Rp. 8000", Stok="100 pcs" });
   itemMakanan.Add(new Makanan() { Nama = "Sate Ayam", Kategori = "Makanan Tusuk", Harga = "Rp. 12000", Stok = "150 pcs" });
   itemMakanan.Add(new Makanan() { Nama = "Hamburger", Kategori = "Junk Food", Harga = "Rp. 18000", Stok = "200 pcs" });
   itemMakanan.Add(new Makanan() { Nama = "Gado-gado", Kategori = "Makanan Berat", Harga = "Rp. 15000", Stok = "120 pcs" });
   itemMakanan.Add(new Makanan() { Nama = "Ayam Bakar", Kategori = "Makanan Berat", Harga = "Rp. 12000", Stok = "100 pcs" });

   MyListViewAdapter adapter = new MyListViewAdapter(this, itemMakanan);



   DaftarMakanan.Adapter = adapter;
  }
 }
}

Seperti halnya pada class adapter, kita juga ubah sting menjadi nama class yaitu makanan. Dan kita modifikasi item makanan tersebut dengan mendaftarkan kembali dengan new Makanan() dan inputkan data seperti nama, kategori, harga dan stoknya.

Terimakasih

Salam

Ipung Purwono
https://www.facebook.com/ipungz.purwono