Tutorial Xamarin Android : Simple List View

Hello, teman-teman apakabar? setelah sebelumnya saya membuat tutorial tentang listview sederhana , sekarang saya akan mencoba membuat listview yang sudah saya custom, anda bisa membuka kembali project kita sebelumnya yaitu listview.

Custom yang dimaksud adalah membuat adapter listview sendiri menggunakan class yang bisa kita buat. Adapter custom tersebut akan mengambil data yang akan ditampilkan pada tampilan aplikasi android. Bedanya pada tutorial sebelumnya kita langsung menggunakan adapter pada MainActivity.cs namun sekarang kita membuat adapater sendiri pada class berbeda. Class ini bersifat public sehingga kita bisa memanggilnya pada activity manapun.

Nah untuk kasus kemarin kita menggunakan layout main.axml sebagai tempat untuk menampilkan ListViewnya dengan menggunakan ListView, namun sekarang kita bisa juga menggunakan layout lain dengan menggunakan TextView , pada kesempatan ini saya berikan nama ListViewRow.axml . Layout ini tetap akan dijadikan alat untuk menampilkan sebuah daftar listview ketika Aktivity Utama dijalankan.

Cara membuat layout baru tersebut anda bisa memilih pada folder Layout yang terletak pada Folder Resources, kemudian

Step 1:

Layout -> Klik kanan -> Add New File -> Pilih Android Layout -> Berikan nama ListViewRow.axml , lalu ubah code nya sebagai berikut :

<?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:minWidth="25px"
    android:minHeight="25px"
    android:padding="5dp">
    <TextView
        android:text="Nama Makanan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNama" />
</LinearLayout>

Pada layout ini saya tidak menggunakan ListView componen, namun menggunakan TextView dengan id = txtNama untuk menampilkan data List Makanan.

Step 2 :

Selanjutnya kita membuat sebuah class baru, caranya pada nama solution / project klik kanan -> Add New File -> Pilih Empty Class -> Namakan dengan MyListViewAdapter.cs lalu 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<string>
 {
  public MyListViewAdapter()
  {
   
  }

  public List<string> itemMakanan;
  private Context mContext;


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

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

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

  public override string 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];

   return row;

  }
 }
}

Pada file class adapter ini, kita membuat beberapa fungsi antara lain adalah Context , Context ini adalah sebuah komponen pada xamarin c# dimana dia berfungsi sebagai seseorang / pelayan yang dapat kita berikan perintah untuk mengerjakan beberapa pekerjaan terkait dengan data, nah pada kasus ini data yang dimaksud adalah data list makanan, maka kita menggunakan context agar dia mau melayani / memberikan/ diperintah  untuk mengakses data tersebut lalu ditampilkan ditempat yang hendak kita mau.

Selain itu ada juga fungsi Count, berfungsi untuk menghitung keseluruhan data item makanan tersebut, Kemudian Fungsi long berfungsi untuk melihat/ merangkul panjangnya data, Ada juga fungsi string position yang berguna untuk melakukan pengurutan listview dan terakhir ada fungsi View, tentunya sudah paham bahwa fubgsi ini lah yang akan menampilkan data makanan tersebut ke dalam sebuah layout. Layout tersebut tentunya sudah di berikkan id yaitu id = txtNama yang sudah kita buat di Layout ListViewRow.axml


Step 3 :
Setelah anda membuat class baru yaitu berupa pembuatan adapter, kita beralih ke MainActivity.cs lalu ubah code 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<string> 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<string>();
   itemMakanan.Add("Soto Betawi");
   itemMakanan.Add("Soto Babad");
   itemMakanan.Add("Sate Madura");
   itemMakanan.Add("Pecel Lele");
   itemMakanan.Add("Hamburger");
   itemMakanan.Add("Bubur Ayam");

   MyListViewAdapter adapter = new MyListViewAdapter(this, itemMakanan);

   string indexerTest = adapter.itemMakanan[1];

   DaftarMakanan.Adapter = adapter;
  }
 }
}

Selanjutnya : Custom List View

Salam

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