Tutorial Xamarin Android : Animasi pada fragments - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Tutorial Xamarin Android : Animasi pada fragments , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel animasi fragment, Artikel drawer fragment, Artikel listview fragment, Artikel navigasi fragment, Artikel xamarin android fragment, Artikel xamarin fragment, Artikel xamarin leftdrawer, Artikel xamarin toggle menu, Artikel xamarin toolbar, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Tutorial Xamarin Android : Animasi pada fragments
link : Tutorial Xamarin Android : Animasi pada fragments

Tutorial Xamarin Android : Animasi pada fragments

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.

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\

Demikianlah Artikel Tutorial Xamarin Android : Animasi pada fragments

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

Anda sekarang membaca artikel Tutorial Xamarin Android : Animasi pada fragments dengan alamat link https://dev-create.blogspot.com/2020/02/tutorial-xamarin-android-animasi-pada.html