Tutorial xamarin android : Membuat List View

Simple List View Xamarin

Hi, All

Pada kesempatan kali ini saya akan mencoba membuat sebuah list view sederhana menggunakan xamarin studio. Perlu diketahui xamarin studio adalah sebuah IDE yang dapat menghasilkan aplikasi mobile cross platform menggunakan bahasa C#. Kalian bisa juga menggunakan IDE Visual Studio jika menggunakan Operating System Windows 10.

Baik, seperti pada umumnya listview ini akan sangat sering kita jumpai pada berbagai aplikasi mobile, Nah saya berkesempatan belajar dengan joe rock dan mencoba menerapkan hasil belajar ini dalam bahasa indonesia dengan modifikasi beberapa aplikasinya ya.

Baik ikuti beberapa langkah untuk membuat aplikasi list viewnya. Saya anggap kalian sudah menginstal visual studio atau xamarin studio.

Oh iya anggap saja kita akan membuat list makanan yang kita suka jadi nanti kita akan membuat sebuah listview sederhana berisi daftar menu makanan favorit kita.

Step 1 :

Buatlah file -> new solution dengan nama listviewsederhana jangan gunanakan nama listview saja ya karena akan bentrok dengan nama atribut di xamarin.

Step 2 :
Pilih target platform minimal android jelly beans ya. Tunggu hingga solution ini terbuka.

Step 3 :
Saat ini anda akan masuk pada halaman editor, kalian akan menjumpai MainActivity.cs yaitu code aktivitas yang pertama kali dijalankan . Didalam code tersebut dapat kita jumpai code MainLauncer = True berarti aktivitas ini adalah aktivitas yang pertama kali dijalankan.

Step 4 :
Buka file Main.axml , file ini dapat kalian jumpai pada Resources -> Layout . File axml adalah file yang akan menampung User Interface, bahasanya mirip dengan bahasa xml bagi yang sudah terbiasa dengan android studio.

Step5 :
Tambahkan code untuk menampilkan ListView Sebagai berikut pada Main.axml.

<?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">
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listViewMakanan" />
</LinearLayout>

Kita dapat melihat code yang diawali <Listview> pada axml tersebut yang menginisialkan menggunakan id = listViewMakanan. id ini yang akan kita gunakan sebagai tempat untuk menampilkan data list makanan favorit. Selanjutnya adalah kita membuka code 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");

   ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemMakanan);
   DaftarMakanan.Adapter = adapter;
  }
 }
}

Kita harus menambahkan code using System.Collections.Generic; hal ini bertujuan agar dapat menampilkan data ke dalam listview. Kemudian Buatlah 2 buah variable yaitu :

private List<string> itemMakanan;
private ListView DaftarMakanan;

Kode List<string> itemMakanan; akan menampung jenis makanan yang akan kita tambahkan, kemudian Kode ListView DaftarMakanan adalah sarana pemanggil dari code axml yang sudah kita buat pada Main.axml melalui id ListView yang kita buat yaitu  id=listViewMakanan.

Karena bahasa C# berbasis OOP maka kita harus membuat new List yang akan menampung jenis makanan. Kita bisa menambahkan menggunakan code Add("Jenis Makanan"); Selanjutnya kita wajib membuat sebuah adapter, adapter ini berfungsi sebagai alat yang akan menampilkan data-data item yang sudah kita buat sebelumnya ke bentuk ListView.

ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemMakanan);
DaftarMakanan.Adapter = adapter;

Jika sudah membuat adapter, kita clean projectnya dengan cara pilih project -> clean lalu, project->rebuild. Saya menggunakan emulator bawaan xamarin sehingga hasilnya dapat kita lihat seperti gambar diatas.

Terimakasih

Salam

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