Coming Soon!

Segera hadir Ebook Tutorial Xamarin Form Berbahasa Indonesia !!

- Jumat, 07 Juli 2017

Tutorial Xamarin Android : Mengenal Fragment


Selamt sore, jumpa lagi dengan saya dalam blog xamarin berbahasa indonesia. Pada kesempatan kali ini saya akan bereksperiment tentang sebuah fragment. Fragment itu seperti Activity yang menghandle sebuah layout, namun bedanya, Fragment tidak dapat berjalan individual fragment selalu membutuhkan sebuah Activity, simplenya sebuah fragment selalu berjalan di atas Activity. Keuntungan menggunakan Fragment itu sendiri adalah ketika dihadapkan pada masalah mengenai multi-pane UI. (Pratama Wijaya)

Android 3.0 memperkenalkan Fragmen. Fragmen bersifat mandiri, komponen modular yang digunakan untuk membantu mengatasi kompleksitas penulisan aplikasi yang mungkin berjalan pada layar dengan ukuran berbeda. Artikel ini berjalan melalui cara menggunakan fragmen untuk mengembangkan aplikasi Xamarin.Android, dan bagaimana mendukung fragmen pada perangkat pra-Android 3.0. (Xamarin Developer)

Seperti pada kesempatan sebelumnya kita sudah membuat sebuah left drawer bukan? Nah pada leftdrawer tersebut kita juga memiliki tampilan yang akan muncul pertama kali, selanjutnya pada leftdrawer ada beberapa menu yang memungkinkan kita untuk menuju sebuah layout lainnya. Daripada membuat sebuah activity baru alangkah lebih praktisnya kita memanfaatkan fragment. Fragment ini memiliki banyak kelebihan seperti transisi animasi yang baik, jika kita ingin membuat aplikasi multi layout kita bisa memanfaatkan fragment.

Sekarang agar lebih ringkas kita gunakan saja aplikasi leftdrawer yang sudah kita buat sebelumnya, bagi kalian yang baru membuka blog saya, kalian bisa mengikuti pembuatan LeftDrawer dari Part 1 - 3 di sini Xamarin Android : Left Drawer. Sebagai eksperiment pertama, kita akan membuat halaman fragment untuk home, jadi nanti ketika aplikasi dijalankan layout yang pertama kali muncul adalah fragment home.

Ikuti langkah-langkah ini

Langkah 1
Bukalah aplikasi leftdrawer yang sudah anda buat dari mengikuti tutorial tentang LeftDrawer

Langkah 2
Buka file main.axml lalu ubahlah codenya sebagai berikut

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?android:attr/actionBarSize"
        android:background="?android:attr/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <!-- The Main Content View -->
        <FrameLayout
   android:id="@+id/fragmentContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    <!-- isi listview untuk menu left drawer -->
        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="#818181"
            android:dividerHeight="1dp"
            android:background="#E3F2FD" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

Untuk menampilkan fragement saya menggunakan FrameLayout lalu kita berikan id dengan nama fragmentContainer.

Langkah 3
Pada project anda buatlah sebuah folder dengan nama Fragments -> Klik kanan Add New Files -> Fragment -> Buat sebuah file bertipe Fragments dengan nama HomeFragments.cs

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 HomeFragment : Fragment
 {
  public override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Create your fragment here
  }

  public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
   // Use this to return your custom view for this Fragment
   // return inflater.Inflate(Resource.Layout.YourFragment, container, false);

   View view = inflater.Inflate(Resource.Layout.HomeFragment, container, false);
   return view;
  }
 }
}

Bisa kita lihat class HomeFragment berekstend dari Fragment, pada code

View view = inflater.Inflate(Resource.Layout.HomeFragment, container, false);

Fragment tersebut akan memnaggil view sebuah layout dengan nama HomeFragment.axml. Oleh karena itu kita harus membuat sebuah layout baru pada Folder Resources -> Layout -> Klik Kanan lalu Add New Files -> Layout -> HomeFragment.axml lalu ketikan codenya 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="#E2E2E2">



 <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Homefragment"
  android:textColor="#000"
  android:layout_centerInParent="true"/>
  
  
 </RelativeLayout>

Langkah 4
Buka kembali file MainActivity.cs nya lalu update 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;


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

   FragmentTransaction trans = this.FragmentManager.BeginTransaction();
   trans.Add(Resource.Id.fragmentContainer, new HomeFragment(), "Home");
   trans.Commit();

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

Point pentingnya adalah Main.axml akan terisi content didalamnya berupa content dari layout fragment yang kita buat yaitu HomeFragment.cs lihat code berikut :

FragmentTransaction trans = this.FragmentManager.BeginTransaction();
   trans.Add(Resource.Id.fragmentContainer, new HomeFragment(), "Home");
   trans.Commit();

Kita menjalankan FragmentTransaction dimana menambahkan sebuah id berdasarkan nama framelayoutnya pada file Main.axml

<FrameLayout
   android:id="@+id/fragmentContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

Bisa kita cek disana bahwa pada code Resource.id.fragmentContainer nah hal ini adalah id yang kita panggil dari FrameLayout Tersebut

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