Posted by - Friday, July 21, 2017

Tutorial Xamarin Android : Membuat Recycler View

Selamat malam, pada kesempatan kali ini kita akan bereksperimen Tutorial Xamarin RecyclerView menggunakan component android dengan nama RecyclerView. Sebetulnya fungsinya hampir mirip dengan ListView namun pada pengembangannya RecyclerView dapat menampung tampilan data list yang lebih kompleks. Saat ini hampir semua disarankan untuk menggunakan Recycler untuk data list. Kurang lebih demo RecyclerView adalah sebagai berikut


Langkah 1
Buatlah project dengan nama TutorialRecyclerView pada Xamarin anda.

Langkah 2
Untuk membuat RecyclerView kita membutuhkan komponen dengan nama Android Support Library V7 Recycler View. Untuk mengunakannya anda harus menginstal komponen tersebut pada folder Component -> Klik Kanan -> Get More Component lalu cari dengan nama Recycler View. Instal dan tunggu hingga selesai.

Langkah 3
Bukalah file Main.axml lalu tambahkan RecyclerView sehingga code menjadi seperti berikut
<?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.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />
</LinearLayout>

Kita menambahkan sebuah recyclerview dengan ID = recyclerView

Langkah 3
Buatlah sebuah file baru pada layout folder dengan nama row.axml lalu isikan 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="fill_parent"
    android:layout_height="75dp"
    android:minWidth="25px"
    android:minHeight="25px"
    android:padding="5dp"
    android:weightSum="100"
    android:id="@+id/linearLayout1"
    android:showDividers="none"
    android:background="#ff1565c0"
    android:layout_marginTop="1dp">
    <LinearLayout
        android:orientation="vertical"
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_weight="70"
        android:layout_height="70dp"
        android:layout_width="0dp"
        android:id="@+id/linearLayout2"
        android:padding="5dp">
        <TextView
            android:text="XamarinID"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:layout_width="255.5dp"
            android:layout_height="wrap_content"
            android:id="@+id/txtUsername"
            android:textStyle="bold"
            android:textSize="@dimen/item_touch_helper_max_drag_scroll_per_frame"
            android:textColor="#ffffffff" />
        <TextView
            android:text="xamarinindonesia@gmail.com"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:layout_width="265.0dp"
            android:layout_height="wrap_content"
            android:id="@+id/txtEmail"
            android:textColor="#ffffee58" />
        <TextView
            android:text="0821-0989-0000"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:layout_width="262.0dp"
            android:layout_height="wrap_content"
            android:id="@+id/txtTelepon"
            android:textSize="10dp"
            android:textColor="#ffffebee" />
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_weight="30"
        android:layout_height="60dp"
        android:layout_width="0dp"
        android:id="@+id/linearLayout3">
        <TextView
            android:text="15s"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/txtTime"
            android:textStyle="bold"
            android:textSize="12sp"
            android:textColor="#ffffffff"
            android:layout_marginBottom="7.5dp" />
        <CheckBox
            android:text="Pilih"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/checkBox1"
            android:textColor="#ffffffff" />
    </LinearLayout>
</LinearLayout>

pada row.axml ini kita custom tampilan dari list tersebut, kita memanfaatkan weightSum agar layout dapat kita modifikasi dengan mudah.

Langkah 4
Buatlah sebuah class baru dengan nama Anggota.cs lalu masukan code sebagai berikut
using System;
namespace TutorialRecyclerView
{
 public class Anggota
 {
  public Anggota()
  {
   
  }

  public string Username { get; set;}
  public string Email { get; set; }
  public string Telepon { get; set; }
 }
}

Pada Class ini kita akan menampung 3 buah data variable yaitu Username, Email dan Telepon.

Langkah 5
Bukalah kembali file MainActivity.cs lalu ubah codenya menjadi sebagai berikut

using System;
using Android.App;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using Android.Support.V7.Widget;
using System.Collections.Generic;


namespace TutorialRecyclerView
{
 [Activity(Label = "RecyclerViewTutorial", MainLauncher = true)]
 public class MainActivity : Activity
 {
  private RecyclerView mRecyclerView;
  private RecyclerView.LayoutManager mLayoutManager;
  private RecyclerView.Adapter mAdapter;
  private List<Anggota> mAnggotas;


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

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.Main);
   mRecyclerView = FindViewById<RecyclerView>(Resource.Id.recyclerView);
   mAnggotas = new List<Anggota>();
   mAnggotas.Add(new Anggota() { Username = "Ipung Purwono", Email = "xamarinid@gmail.com",Telepon = "08978987675" });
   mAnggotas.Add(new Anggota() { Username = "Miguel De Izaza", Email = "deicaza@gmail.com", Telepon = "089784546465" });
   mAnggotas.Add(new Anggota() { Username = "Ipung Purwono", Email = "ipungofficial@gmail.com", Telepon = "04678987675" });
   mAnggotas.Add(new Anggota() { Username = "Mark Zukenberg", Email = "markfabook@gmail.com", Telepon = "08788788675" });
   mAnggotas.Add(new Anggota() { Username = "Bill Gates", Email = "gatesbill@gmail.com", Telepon = "0897887875" });
   mAnggotas.Add(new Anggota() { Username = "Ipung Purwono", Email = "xamarinid@gmail.com", Telepon = "08978987675" });
   mAnggotas.Add(new Anggota() { Username = "Miguel De Izaza", Email = "deicaza@gmail.com", Telepon = "089784546465" });
   mAnggotas.Add(new Anggota() { Username = "Ipung Purwono", Email = "ipungofficial@gmail.com", Telepon = "04678987675" });
   mAnggotas.Add(new Anggota() { Username = "Mark Zukenberg", Email = "markfabook@gmail.com", Telepon = "08788788675" });
   mAnggotas.Add(new Anggota() { Username = "Bill Gates", Email = "gatesbill@gmail.com", Telepon = "0897887875" });



   //Create our layout manager
   mLayoutManager = new LinearLayoutManager(this);
   mRecyclerView.SetLayoutManager(mLayoutManager);
   mAdapter = new RecyclerAdapter(mAnggotas);
   mRecyclerView.SetAdapter(mAdapter);

  }
 }

 public class RecyclerAdapter : RecyclerView.Adapter
 {
  private List<Anggota> mAnggotas;

  public RecyclerAdapter(List<Anggota> anggotas)
  {
   mAnggotas = anggotas;
  }

  public class MyView : RecyclerView.ViewHolder
  {
   public View mMainView { get; set; }

   public TextView mUsername { get; set; }
   public TextView mEmail { get; set; }
   public TextView mTelepon { get; set; }

   public MyView(View view) : base(view)
   {
    mMainView = view;
   }
  }

  public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)
  {
   View row = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.row, parent, false);


   TextView txtUsername = row.FindViewById<TextView>(Resource.Id.txtUsername);
   TextView txtEmail = row.FindViewById<TextView>(Resource.Id.txtEmail);
   TextView txtTelepon = row.FindViewById<TextView>(Resource.Id.txtTelepon);

   MyView view = new MyView(row) {mUsername=txtUsername, mEmail = txtEmail, mTelepon = txtTelepon };
   return view;
  }

  public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
  {
   MyView myHolder = holder as MyView;
   myHolder.mUsername.Text = mAnggotas[position].Username;
   myHolder.mEmail.Text = mAnggotas[position].Email;
   myHolder.mTelepon.Text = mAnggotas[position].Telepon;
  
  }



  public override int ItemCount
  {
   get { return mAnggotas.Count; }
  }
 }
}

Sebagai penjelasan adalah sebagai berikut

private RecyclerView mRecyclerView;
  private RecyclerView.LayoutManager mLayoutManager;
  private RecyclerView.Adapter mAdapter;
  private List<Anggota> mAnggotas;

Buatlah variable yang akan menampung data yang akan ditampilkan pada RecyclerView

//Create our layout manager
   mLayoutManager = new LinearLayoutManager(this);
   mRecyclerView.SetLayoutManager(mLayoutManager);
   mAdapter = new RecyclerAdapter(mAnggotas);
   mRecyclerView.SetAdapter(mAdapter);

Kemudian kita membuat agar layout yaitu row bisa menampung data adapter RecyclerView

public class RecyclerAdapter : RecyclerView.Adapter
 {
  private List<Anggota> mAnggotas;

  public RecyclerAdapter(List<Anggota> anggotas)
  {
   mAnggotas = anggotas;
  }

  public class MyView : RecyclerView.ViewHolder
  {
   public View mMainView { get; set; }

   public TextView mUsername { get; set; }
   public TextView mEmail { get; set; }
   public TextView mTelepon { get; set; }

   public MyView(View view) : base(view)
   {
    mMainView = view;
   }
  }

  public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)
  {
   View row = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.row, parent, false);


   TextView txtUsername = row.FindViewById<TextView>(Resource.Id.txtUsername);
   TextView txtEmail = row.FindViewById<TextView>(Resource.Id.txtEmail);
   TextView txtTelepon = row.FindViewById<TextView>(Resource.Id.txtTelepon);

   MyView view = new MyView(row) {mUsername=txtUsername, mEmail = txtEmail, mTelepon = txtTelepon };
   return view;
  }

  public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
  {
   MyView myHolder = holder as MyView;
   myHolder.mUsername.Text = mAnggotas[position].Username;
   myHolder.mEmail.Text = mAnggotas[position].Email;
   myHolder.mTelepon.Text = mAnggotas[position].Telepon;
  
  }



  public override int ItemCount
  {
   get { return mAnggotas.Count; }
  }
 }

Kita membuat adapter yang memanggil data Class Anggota.cs yang sudah kita buat sebelumnya

mRecyclerView = FindViewById<RecyclerView>(Resource.Id.recyclerView);
   mAnggotas = new List<Anggota>();
   mAnggotas.Add(new Anggota() { Username = "Ipung Purwono", Email = "xamarinid@gmail.com",Telepon = "08978987675" });
   mAnggotas.Add(new Anggota() { Username = "Miguel De Izaza", Email = "deicaza@gmail.com", Telepon = "089784546465" });
   mAnggotas.Add(new Anggota() { Username = "Ipung Purwono", Email = "ipungofficial@gmail.com", Telepon = "04678987675" });
   mAnggotas.Add(new Anggota() { Username = "Mark Zukenberg", Email = "markfabook@gmail.com", Telepon = "08788788675" });
   mAnggotas.Add(new Anggota() { Username = "Bill Gates", Email = "gatesbill@gmail.com", Telepon = "0897887875" });
   mAnggotas.Add(new Anggota() { Username = "Ipung Purwono", Email = "xamarinid@gmail.com", Telepon = "08978987675" });
   mAnggotas.Add(new Anggota() { Username = "Miguel De Izaza", Email = "deicaza@gmail.com", Telepon = "089784546465" });
   mAnggotas.Add(new Anggota() { Username = "Ipung Purwono", Email = "ipungofficial@gmail.com", Telepon = "04678987675" });
   mAnggotas.Add(new Anggota() { Username = "Mark Zukenberg", Email = "markfabook@gmail.com", Telepon = "08788788675" });
   mAnggotas.Add(new Anggota() { Username = "Bill Gates", Email = "gatesbill@gmail.com", Telepon = "0897887875" });

Kemudian kita masukan data pada RecyclerView.

Terimakasih

Ipung Purwono
at
Labels: , ,
Banyustudio Jl. Jend. Sudirman No.296, Sokanegara, Purwokerto Tim., Kabupaten Banyumas, Jawa Tengah 53116, Indonesia

No comments:

Post a Comment

Mohon melakukan komentar dengan bahasa yang mudah dipahami, santun dan dengan bahasa yang baik.

Subscribe to: Post Comments (Atom)