Tutorial Xamarin Android : Membuat Recycler View - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Tutorial Xamarin Android : Membuat Recycler View, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel custom recyclerview, Artikel xamarin android, Artikel xamarin recyclerview, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Tutorial Xamarin Android : Membuat Recycler View
link : Tutorial Xamarin Android : Membuat Recycler View

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.

Demikianlah Artikel Tutorial Xamarin Android : Membuat Recycler View

Sekianlah artikel Tutorial Xamarin Android : Membuat Recycler View kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Tutorial Xamarin Android : Membuat Recycler View dengan alamat link https://dev-create.blogspot.com/2020/02/tutorial-xamarin-android-membuat.html