Pada kesempatan di siang hari ini, akan melanjutkan tutorial sebelumnya yaitu Membuat navigasi menu menuju fragments dengan xamarin android. Nah jika kalian sudah mempraktekannya maka dapat kalian temukan sedikit kejanggalan disana. Pada tutorial kali ini tidak hanya membahas animasi ketika fragment muncul atau keluar saja tapi akan membahas beberapa fungsi seperti Ketika isi menu pada listview drawer diklik maka secara otomatis Drawer akan tertutup lalu fragment akan muncul. Pada tutorial sebelumnya kita sudah berhasil melakukan navigasi ke fragment tertentu oleh karena itu ini adalah tutorial penyempurnaan dari tutorial sebelumnya ya.
Sebelum dilanjutkan pastikan kalian sudah mengikuti tutorial-tutorial saya sebelumnya agar tidak terjadi kebingungan, karena tutorial terus berkesinambungan. Saya asumsikan kalian sudah mengikuti tutorial sebelumnya jadi tinggal melanjutkan atau merubah code yang ada.
Agar lebih jelas kalian bisa melihat video berikut ini untuk demo animasnya.
Baik, ikuti beberapa perubahan yang akan saya jelaskan dibawah ini.
Langkah 1
Buatlah sebuah folder pada resources -> namakan dengan anim pada folder ini kita akan membuat 2 buah file xml untuk menganimasikan fragment.
Langkah 2
Buatlah sebuah file pada folder anim dengan cara Klik Kanan -> Add New Files -> pilih xml lalu berikan nama Slide_in.xml lalu ketika dengan kode seperti ini
<?xml version="1.0" encoding="UTF-8" ?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:interpolator/bounce"> <translate android:fromYDelta="-100%" android:toYDelta="0" android:duration="1000" android:startOffset="500" /> <alpha android:fromAlpha="0.3" android:toAlpha="1.0" android:duration="1000" android:startOffset="500"/> </set>
Kita memilih animasi bounce pada transisinya, keterangan tentang interpolar dapat kalian cek disini
Android Interpolator
Langkah 3
Sama seperti pada langkah ke 2 buatlah kembali file dengan nama Slide_out.xml lalu masukan code seperti berikut
<?xml version="1.0" encoding="UTF-8" ?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:interpolator/anticipate"> <translate android:fromYDelta="0" android:toYDelta="100%" android:duration="650" /> <alpha android:fromAlpha="1.0" android:toAlpha="0.5" android:duration="650"/> </set>
Langkah 4
Buka kembali file MainActivity.cs lalu ubah codenya seperti berikut ini
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;
private Stack<SupportFragment> mStackFragment;
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();
mStackFragment = new Stack<SupportFragment>();
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();
mDrawerLayout.CloseDrawers();
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();
mDrawerLayout.CloseDrawers();
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)
{
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;
}
public override void OnBackPressed()
{
if (SupportFragmentManager.BackStackEntryCount > 0)
{
SupportFragmentManager.PopBackStack();
mCurrentFragment = mStackFragment.Pop();
}
else
{
base.OnBackPressed();
}
}
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();
}
}
}
Pada file MainActivity.cs tersebut ada beberapa tambahan code antara lain adalah
private Stack<SupportFragment> mStackFragment;
Variable ini akan kita gunakan pada fungsi OnBackPressed() yaitu sebuah fungsi yang akan mengembalikan ke sesi sebelumnya
public override void OnBackPressed()
{
if (SupportFragmentManager.BackStackEntryCount > 0)
{
SupportFragmentManager.PopBackStack();
mCurrentFragment = mStackFragment.Pop();
}
else
{
base.OnBackPressed();
}
}
Bisa dilihat ada fungsi Pop() yaitu sebuah fungsi yang akan menghapus sesi pada alur Bac Pressed.
//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;
}
Pada fungsi ShowFragment() kita tambahkan code
trans.SetCustomAnimations(Resource.Animation.Slide_in, Resource.Animation.Slide_out);
Code ini yang akan memanggil animasi yang sudah kita buat sebelumnya yaitu Slide_in.xml dan Slide_out.xml
else if (mLeftDataSet[e.Position] == "Tentang Kami")
{
Toast.MakeText(this, "Anda Memilih Tentang Kami ", ToastLength.Long).Show();
mDrawerLayout.CloseDrawers();
ShowFragment(tentangFragment);
}
Nah , terakhir kita menambahkan fungsi
mDrawerLayout.CloseDrawers();
Hal ini bertujuan agar LeftDrawer Menu akan tertutup ketika fragmen muncul.
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.