- Thursday, July 6, 2017

Tutorial Xamarin Android : Left Drawer Part 3 (List Menu)

Siang ini saya bereksperiment kembali bagaimana caranya mengisi LeftDrawer menu yang sudah kita buat sebelumnya serta membuat toggle menu pada Action bar. Kalian bisa mengikuti tutorial ini pada link Tutorial LeftDrawer Part 2 . Nah karena leftdrawer masih kosong sekarang kita akan mengisinya dengan List Menu. Agar lebih paham apa yang saya maksudkan dapat melihat gambar ini.


Untuk membuatnya kita hanya perlu menambahkan isi pada ListView melalui MainActivity.cs dimana ListViewnya sudah set templatenya pada Main.axml. Untuk menampilkan isi listview kita membutuhkan adapter. Setelah adapter dibuat kita akan bisa menampilkannya. Ubahlah code MainActivity.cs 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;

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;

  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);

   SetSupportActionBar(mToolbar);

   //isi list left menu
   mLeftDataSet = new List<string>();
   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;


   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);
   }


  }

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

  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();
  }
 }
}

Kita telah megupdate code MainActivity.cs dengan baris code ini

private ListView mLeftDrawer;
private ArrayAdapter mLeftAdapter;
private List<string> mLeftDataSet;

Hal tersebut merupakan pembuatan variable yang akan menampilkan ListView serta Adapternya.

//isi list left menu
   mLeftDataSet = new List<string>();
   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;

Selanjutnya Kita Add atau tambahkan menu apa saja yang akan kita tampilkan melalui ListView.

Terimakasih

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

No comments:

Post a Comment

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