Tutorial Xamarin Android : Membuat Link dari ListView menuju Fragment Lain

Selamat siang teman-teman, semalam saya bereksperiment kembali tentang bagaimana cara membuat link dari sebuah listview menu yang sudah kita buat di LeftDrawer menu kemudian jika item di click / touch maka bisa menuju fragment lain. Asumsinya sebagai berikut , anda memiliki menu Home, Tentang, Galeri dan Kontak. Nah ketika aplikasi pertama kali dijalankan maka halaman home adalah halaman yang pertama kali muncul, lalu ketika Left Drawer di aktifkan pada toggle menu kemudian kita akan melihat menu seperti Home, Tentang, Galeri dan Kontak, lalu ketika Tentang di klik maka akan muncul halaman Tentang.

Untuk membuatnya ada beberapa yang harus kita pahami yaitu pemanggilan fragment, sebuah layout , itemClick pada list view dan membuat sebuah fungsi untuk menampilkan fragment. Sebelum mempraktekannya anda bisa melihat kira-kira gambarannya adalah sebagai berikut

Gambar diatas adalah gambar Home Fragment kemudian kita aktifkan toggle menu let drawernya

Kemudian kita klik/ Touch Tentang Kami maka akan diarahkan ke halaman Tentang Kami

Kira-kira begitulah file aplikasi yang akan kita buat ya. Sebagai persiapkan adalah file yang kita gunakan pada tutorial sebelumnya, bagi yang belum mengikuti boleh melihat link berikut ini :

Tutorial Xamarin Android : Xamarin Fragment Android 

Ikuti beberapa langkah berikut ini .

Langkah 1

Buatlah sebuah file layout baru bernama TentangFragment.axml pada layout -> add new files -> pilih layout -> TentangFragment.axml lalu ketikan code sebagai berikut 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffc107">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tentang fragment"
        android:textColor="#000"
        android:layout_centerInParent="true"
        android:textSize="@dimen/abc_action_bar_progress_bar_size" />
</RelativeLayout>

Langkah 2
Buatlah sebuah fragment class baru pada folder Fragments yang sudah kita buat sebelumnya, Pilih add new files -> adnroid ->  fragments lalu buat dengan nama TentangFragment.cs ketikan code sebagai berikut

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

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

namespace TutorialLeftDrawer
{
 public class TentangFragment : Android.Support.V4.App.Fragment
 {
  public override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Create your fragment here
  }

  public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
   View view = inflater.Inflate(Resource.Layout.TentangFragment, container, false);
   return view;
  }
 }
}

Pada fragment ini kita akan menampilkan sebuah layout dengan nama TentangFragment.axml bisa kita cek code ini

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
   View view = inflater.Inflate(Resource.Layout.TentangFragment, container, false);
   return view;
  }

Langkah 3
Buka lah file MainActivity.cs lalu ubah codenya sebagai berikut

using Android.App;
using Android.Views;
using Android.Widget;
using Android.OS;
using System;
using SupportToolbar = Android.Support.V7.Widget.Toolbar;
using Android.Support.V7.App;
using Android.Support.V4.Widget;
using Android.Support.V7.Widget;
using System.Collections.Generic;
using SupportFragment = Android.Support.V4.App.Fragment;


namespace TutorialLeftDrawer
{
 [Activity(Label = "TutorialLeftDrawer", MainLauncher = true,Theme="@style/MyTheme")]
 public class MainActivity : AppCompatActivity
 {
  private SupportToolbar mToolbar;
  private MyActionBarDrawwerToggle mDrawerToggle;
  private DrawerLayout mDrawerLayout;
  private ListView mLeftDrawer;

  private ArrayAdapter mLeftAdapter;
  private List<string> mLeftDataSet;

  private SupportFragment mCurrentFragment;
  private TentangFragment tentangFragment;
  private HomeFragment homeFragment;

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

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.Main);
   mToolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar);
   mDrawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);
   mLeftDrawer = FindViewById<ListView>(Resource.Id.left_drawer);

   homeFragment = new HomeFragment();
   tentangFragment = new TentangFragment();

   SetSupportActionBar(mToolbar);

   var trans = SupportFragmentManager.BeginTransaction();
   //Menyembungikan fragment
   trans.Add(Resource.Id.fragmentContainer, tentangFragment, "Tentang");
   trans.Hide(tentangFragment);
   //Membuat home Fragment
   trans.Add(Resource.Id.fragmentContainer, homeFragment, "Home");


   trans.Commit();

   //menentukan fragment mana yang akan tampil saat aplikasi baru dibuka
   mCurrentFragment = homeFragment;

   //isi list left menu
   mLeftDataSet = new List<string>();
   mLeftDataSet.Add("Home");
   mLeftDataSet.Add("Tentang Kami");
   mLeftDataSet.Add("Produk");
   mLeftDataSet.Add("Galeri");
   mLeftDataSet.Add("Kontak");
   mLeftAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, mLeftDataSet);
   mLeftDrawer.Adapter = mLeftAdapter;

   mLeftDrawer.ItemClick += MLeftDrawer_ItemClick;


   mDrawerToggle = new MyActionBarDrawwerToggle(
    this, //Host Activity
    mDrawerLayout, //Drawer layout
    Resource.String.openDrawer,
    Resource.String.closeDrawer//Openend Message


   );

   mDrawerLayout.AddDrawerListener(mDrawerToggle);
   SupportActionBar.SetHomeButtonEnabled(true);
   SupportActionBar.SetDisplayShowTitleEnabled(true);
   SupportActionBar.SetDisplayHomeAsUpEnabled(true);
   mDrawerToggle.SyncState();

   if (savedInstanceState != null)
   {
    if (savedInstanceState.GetString("DrawerState") == "Opened")
    {
     SupportActionBar.SetTitle(Resource.String.openDrawer);
    }
    else
    {
     SupportActionBar.SetTitle(Resource.String.closeDrawer);
    }
   }
   else {
    //Pertama kali aplikasi dijalankan
    SupportActionBar.SetTitle(Resource.String.closeDrawer);
   }


  }

  //fungsi ketika list menu diclik
  private void MLeftDrawer_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
  {

   if (mLeftDataSet[e.Position] == "Galeri")
   {
    Toast.MakeText(this, "Anda Memilih Galeri ", ToastLength.Long).Show();
   }
   else if (mLeftDataSet[e.Position] == "Tentang Kami")
   {
    Toast.MakeText(this, "Anda Memilih Tentang Kami ", ToastLength.Long).Show();
    ShowFragment(tentangFragment);
   }
   else if (mLeftDataSet[e.Position] == "Produk")
   {
    Toast.MakeText(this, "Anda Memilih Produk ", ToastLength.Long).Show();
   }
   else if (mLeftDataSet[e.Position] == "Kontak")
   {
    Toast.MakeText(this, "Anda Memilih Kontak ", ToastLength.Long).Show();
   }
   else
   {
    Toast.MakeText(this, "Anda Memilih Home ", ToastLength.Long).Show();
    ShowFragment(homeFragment);
   }

  }

  public override bool OnOptionsItemSelected(Android.Views.IMenuItem item)
  {
   mDrawerToggle.OnOptionsItemSelected(item);
   return base.OnOptionsItemSelected(item);
  }

  //Fungsi menampilkan fragment
  private void ShowFragment(SupportFragment fragment)
  {
   var trans = SupportFragmentManager.BeginTransaction();
   trans.Hide(mCurrentFragment);
   trans.Show(fragment);
   trans.AddToBackStack(null);
   trans.Commit();

   mCurrentFragment = fragment;
   
  }


  protected override void OnSaveInstanceState(Bundle outState)
  {
   if (mDrawerLayout.IsDrawerOpen((int)GravityFlags.Left))
   {
    outState.PutString("DrawerState", "Opened");

   }
   else
   {
    outState.PutString("Drawer State", "Closed");
   }
   base.OnSaveInstanceState(outState);
  }

  protected override void OnPostCreate(Bundle savedInstanceState)
  {
   base.OnPostCreate(savedInstanceState);
   mDrawerToggle.SyncState();
  }
 }
}

Kalau kita melihat baris code panjang seperti ini janganlah bingung dulu ya, saya akan jelaskan satu-persatu .

private SupportFragment mCurrentFragment;
  private TentangFragment tentangFragment;
  private HomeFragment homeFragment;

Maksud code ini adalah , kita membuat 3 buah variable, variable mCurrentFragment akan digunakan untuk menampilkan fragment mana yang akan kita tampilkan pertama kali atau fragment saat ini. Selanjutnya kita juga membuat 2 buah fragment lagi yaitu tentangFragment dan homeFragment

homeFragment = new HomeFragment();
   tentangFragment = new TentangFragment();

Variable yang sudah kita buat sebelumnya tercipta dari Class fragment yang sudah kita buat sebelumnya ya yaitu dari HomeFragment.cs dan TentangFragment.cs

var trans = SupportFragmentManager.BeginTransaction();
   //Menyembungikan fragment
   trans.Add(Resource.Id.fragmentContainer, tentangFragment, "Tentang");
   trans.Hide(tentangFragment);
   //Membuat home Fragment
   trans.Add(Resource.Id.fragmentContainer, homeFragment, "Home");


   trans.Commit();

   //menentukan fragment mana yang akan tampil saat aplikasi baru dibuka
   mCurrentFragment = homeFragment;

Pada code diatas kita mengaktifkan fragment pada xamarin, dengan memulainya sebagai transaksi fragment yang akan kita jalankan. Lalu tambahkan dengan code Add() untuk menambahkan / mendaftarkan nama fragment yang sudah kita buat pada variable. Fungsi .Hide() adalah agar saat di jalankan pada Main.axml yang menggunakan frameLayout maka yang muncul pertama kali hanya homeFragment, lalu tentukan mCurrentFragment nya adalah homeFragment. Jadi saat aplikasi pertama kali dijalankan maka halaman homeFragment adalah yang pertama kali muncul.

//Fungsi menampilkan fragment
  private void ShowFragment(SupportFragment fragment)
  {
   var trans = SupportFragmentManager.BeginTransaction();
   trans.Hide(mCurrentFragment);
   trans.Show(fragment);
   trans.AddToBackStack(null);
   trans.Commit();

   mCurrentFragment = fragment;
   
  }

Agar fragment bisa ditampilkan maka kita membuat sebuah fungsi dengan nama ShowFragment()  seperti code diatas.

Langkah terakhir adalah bagaimana listview menu saat di klik dengan fungsi ini

//fungsi ketika list menu diclik
  private void MLeftDrawer_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
  {

   if (mLeftDataSet[e.Position] == "Galeri")
   {
    Toast.MakeText(this, "Anda Memilih Galeri ", ToastLength.Long).Show();
   }
   else if (mLeftDataSet[e.Position] == "Tentang Kami")
   {
    Toast.MakeText(this, "Anda Memilih Tentang Kami ", ToastLength.Long).Show();
    ShowFragment(tentangFragment);
   }
   else if (mLeftDataSet[e.Position] == "Produk")
   {
    Toast.MakeText(this, "Anda Memilih Produk ", ToastLength.Long).Show();
   }
   else if (mLeftDataSet[e.Position] == "Kontak")
   {
    Toast.MakeText(this, "Anda Memilih Kontak ", ToastLength.Long).Show();
   }
   else
   {
    Toast.MakeText(this, "Anda Memilih Home ", ToastLength.Long).Show();
    ShowFragment(homeFragment);
   }

  }

Bisa kita lihat saat code ini

else if (mLeftDataSet[e.Position] == "Tentang Kami")
   {
    Toast.MakeText(this, "Anda Memilih Tentang Kami ", ToastLength.Long).Show();
    ShowFragment(tentangFragment);
   }

terlihat saat kita klik / touch Menu Tentang Kami maka akan di panggil fungsi ShowFragment(tentangFragment)

Demikianlah tutorial untuk fragment bagian 2

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