Tutorial Xamarin Android : Membuat Navigation Drawer Part 2

Yap, melajutkan tutorial sebelumnya tentang Navigation Drawer pada xamarin android, next kita akan menambahkan beberapa langkah lagi ya, bagi kalian yang ketinggalan bisa mengikuti tutorial part 1 di Tutorial Xamarin Android : Membuat Navigation Drawer Part 1.

Setelah anda mengikuti langkah-langkah pada part 1, sekarang ikuti langkah selanjutnya.

Langkah 13
Buatlah sebuah fragment dengan nama HomeFragment.cs dengan cara klik kanan pada project anda lalu Pilih add new -> pilih fragment -> Berikan nama dengan HomeFragment.cs lalu masukan code seperti 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 TutorialNavigationDrawer
{
 public class HomeFragment : 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)
  {
   //Menampilkan layout untuk fragment
   View view = inflater.Inflate(Resource.Layout.homeLayout, container, false);
   return view;
  }
 }
}

Langkah 14
Buat kembali sebuah fragment dengan nama WriteFragment.cs dengan code seperti 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.Support.V4.App;
using Android.Util;
using Android.Views;
using Android.Widget;

namespace TutorialNavigationDrawer
{
 public class WriteFragment : 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.writeLayout, container, false);
   return view;

  }
 }
}

Langkah 15 Buka file MainActivity.cs lalu ubah code menjadi seperti ini

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

namespace TutorialNavigationDrawer
{
 [Activity(Label = "NavigationDrawer", MainLauncher = true, Theme = "@style/Temaku")]
 public class MainActivity : AppCompatActivity
 {

  DrawerLayout drawerLayout;
  private SupportFragment mCurrentFragment;
  private Stack<SupportFragment> mStackFragment;
  private HomeFragment homeFragment;
  private WriteFragment writeFragment;

  protected override void OnCreate(Bundle savedInstanceState)
  {

   base.OnCreate(savedInstanceState);
   SetContentView(Resource.Layout.Main);
   drawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);

   // Membuat konfigurasi Toolbar
   var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.app_bar);
   SetSupportActionBar(toolbar);
   SupportActionBar.SetTitle(Resource.String.app_name);
   SupportActionBar.SetDisplayHomeAsUpEnabled(true);
   SupportActionBar.SetDisplayShowHomeEnabled(true);

   // Memasukan item yang terseleksi agar masuk di navigasi
   var navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
   navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;

   // Membuat drawer toolbar
   var drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, Resource.String.open_drawer, Resource.String.close_drawer);
   drawerLayout.SetDrawerListener(drawerToggle);
   drawerToggle.SyncState();

   //Definisikan nama fragment agar dapat dipanggil pada navigasi
   homeFragment = new HomeFragment();
   writeFragment = new WriteFragment();

   mStackFragment = new Stack<SupportFragment>();

   //Menambahkan Fragment
   var trans = SupportFragmentManager.BeginTransaction();
   //Menyembungikan fragment pesan agar hanya home yang muncul
   trans.Add(Resource.Id.HomeFrameLayout, writeFragment, "Pesan");
   trans.Hide(writeFragment);
   //Tampilkan home Fragment
   trans.Add(Resource.Id.HomeFrameLayout, homeFragment, "Home");

   trans.Commit();
   mCurrentFragment = homeFragment;
  }
  //Definisikan Cutom Title Text
  protected override void OnResume()
  {
   SupportActionBar.SetTitle(Resource.String.app_name);
   base.OnResume();
  }


  //Definisikan kemana navigasi akan diarahkan
  void NavigationView_NavigationItemSelected(object sender, NavigationView.NavigationItemSelectedEventArgs e)
  {
   switch (e.MenuItem.ItemId)
   {
    case (Resource.Id.nav_home):
     Toast.MakeText(this, "Anda memilih halaman Home!", ToastLength.Short).Show();
     ShowFragment(homeFragment);
     break;
    case (Resource.Id.nav_messages):
     Toast.MakeText(this, "Anda memilih halaman Pesan!", ToastLength.Short).Show();
     ShowFragment(writeFragment);
     break;
    case (Resource.Id.nav_friends):
     Toast.MakeText(this, "Anda memilih halaman Teman!", ToastLength.Short).Show();

     break;
   }
   // Close drawer
   drawerLayout.CloseDrawers();
  }

  //Tambahkan Custom Icon pada toolbar
  public override bool OnCreateOptionsMenu(Android.Views.IMenu menu)
  {
   MenuInflater.Inflate(Resource.Menu.action_menu, menu);
   if (menu != null)
   {
    menu.FindItem(Resource.Id.action_refresh).SetVisible(true);
    menu.FindItem(Resource.Id.action_attach).SetVisible(false);
   }
   return base.OnCreateOptionsMenu(menu);
  }
  //Definisikan icon jika di press / click / terseleksi
  public override bool OnOptionsItemSelected(IMenuItem item)
  {
   switch (item.ItemId)
   {
    case Android.Resource.Id.Home:
     //Masukan navigasi

     return true;
    case Resource.Id.action_attach:
     //Masukan navigasi

     return true;
    default:
     return base.OnOptionsItemSelected(item);
   }
  }

  //Fungsi menampilkan fragment
  private void ShowFragment(SupportFragment fragment)
  {

   if (fragment.IsVisible)
   {

    return;
   }

   var trans = SupportFragmentManager.BeginTransaction();
   //trans.SetCustomAnimations(Resource.Animation.Slide_in,Resource.Animation.Slide_out,Resource.Animation.Slide_in, Resource.Animation.Slide_out )
   trans.SetCustomAnimations(Resource.Animation.Slide_in, Resource.Animation.Slide_out);
   trans.Hide(mCurrentFragment);
   trans.Show(fragment);
   trans.AddToBackStack(null);
   trans.Commit();

   mStackFragment.Push(mCurrentFragment);
   mCurrentFragment = fragment;


  }


  //Fungsi ketika tombol back di pree
  public override void OnBackPressed()
  {
   if (FragmentManager.BackStackEntryCount != 0)
   {
    FragmentManager.PopBackStack();//fragmentManager.popBackStack();
   }
   else
   {
    base.OnBackPressed();
   }
  }


 }
}

Pada MainActivity.cs ada beberapa yang harus dipahami antara lain adalah

// Membuat konfigurasi Toolbar
   var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.app_bar);
   SetSupportActionBar(toolbar);
   SupportActionBar.SetTitle(Resource.String.app_name);
   SupportActionBar.SetDisplayHomeAsUpEnabled(true);
   SupportActionBar.SetDisplayShowHomeEnabled(true);

Kode diatas adalah untuk konfigurasi toolbar/ action bar kita

// Memasukan item yang terseleksi agar masuk di navigasi
   var navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
   navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;

Mendefinisikan menu pada navigasi

//Menambahkan Fragment
   var trans = SupportFragmentManager.BeginTransaction();
   //Menyembungikan fragment pesan agar hanya home yang muncul
   trans.Add(Resource.Id.HomeFrameLayout, writeFragment, "Pesan");
   trans.Hide(writeFragment);
   //Tampilkan home Fragment
   trans.Add(Resource.Id.HomeFrameLayout, homeFragment, "Home");

   trans.Commit();
   mCurrentFragment = homeFragment;

Mendaftarkan fragment pada activity , serta menentukan Current Fragment

//Definisikan kemana navigasi akan diarahkan
  void NavigationView_NavigationItemSelected(object sender, NavigationView.NavigationItemSelectedEventArgs e)
  {
   switch (e.MenuItem.ItemId)
   {
    case (Resource.Id.nav_home):
     Toast.MakeText(this, "Anda memilih halaman Home!", ToastLength.Short).Show();
     ShowFragment(homeFragment);
     break;
    case (Resource.Id.nav_messages):
     Toast.MakeText(this, "Anda memilih halaman Pesan!", ToastLength.Short).Show();
     ShowFragment(writeFragment);
     break;
    case (Resource.Id.nav_friends):
     Toast.MakeText(this, "Anda memilih halaman Teman!", ToastLength.Short).Show();

     break;
   }
   // Close drawer
   drawerLayout.CloseDrawers();
  }

Code diatas akan mengarahkan ke mana navigasi tersebut apakah ke fragment lain atau activity lain.

//Fungsi menampilkan fragment
  private void ShowFragment(SupportFragment fragment)
  {

   if (fragment.IsVisible)
   {

    return;
   }

   var trans = SupportFragmentManager.BeginTransaction();
   //trans.SetCustomAnimations(Resource.Animation.Slide_in,Resource.Animation.Slide_out,Resource.Animation.Slide_in, Resource.Animation.Slide_out )
   trans.SetCustomAnimations(Resource.Animation.Slide_in, Resource.Animation.Slide_out);
   trans.Hide(mCurrentFragment);
   trans.Show(fragment);
   trans.AddToBackStack(null);
   trans.Commit();

   mStackFragment.Push(mCurrentFragment);
   mCurrentFragment = fragment;


  }

Fungsi diatas adalah untuk menampilkan fragment

Salam

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