PMO Pertemuan 4 Fragment

FRAGMENT

Fragment merupakan bagian dari UI dalam activity. Kamu dapat menggabungkan beberapa fragment dalam activity untuk membuat multi-pane UI.Ada beberapa hal yang kamu perlu tahu tentang fragment yaitu, fragment memiliki siklus hidup(lifecycle) sendiri, dapat proses event sendiri, dan dapat ditambah atau dihapus ketika activity sedang jalan.Anda bisa mengombinasikan beberapa fragmen dalam satu aktivitas untuk membangun UI multipanel dan menggunakan kembali sebuah fragmen dalam beberapa aktivitas. Anda bisa menganggap fragmen sebagai bagian modular dari aktivitas, yang memiliki daur hidup sendiri, menerima kejadian masukan sendiri, dan yang bisa Anda tambahkan atau hapus saat aktivitas berjalan (semacam “sub aktivitas” yang bisa digunakan kembali dalam aktivitas berbeda).

Harus selalu tersemat dalam aktivitas dan daur hidup fragmen secara langsung dipengaruhi oleh daur hidup aktivitas host-nya. Misalnya, saat aktivitas dihentikan sementara, semua fragmen di dalamnya juga dihentikan sementara, dan bila aktivitas dimusnahkan, semua fragmen juga demikian. Akan tetapi, saat aktivitas berjalan (dalam status daur hidupdilanjutkan, Anda bisa memanipulasi setiap fragmen secara terpisah, seperti menambah atau membuangnya. Saat melakukan transaksi fragmen, Anda juga bisa menambahkannya ke back-stack yang dikelola oleh aktivitas —setiap entri back-stack merupakan catatan transaksi fragmen yang terjadi. Dengan back-stack pengguna dapat membalikkan transaksi fragmen (mengarah mundur), dengan menekan tombol Kembali. Bila Anda menambahkan fragmen sebagai bagian dari layout aktivitas, fragmen itu akan berada dalam ViewGroup di hierarki tampilan aktivitas tersebut dan fragmen mendefinisikan layout tampilannya sendiri. Anda bisa menyisipkan fragmen ke dalam layout aktivitas dengan mendeklarasikan fragmen dalam file layout aktivitas, sebagai elemen <fragment>, atau dari kode aplikasi dengan menambahkannya ke ViewGroup yang ada. Akan tetapi, fragmen tidak harus menjadi bagian dari layout aktivitas; Anda juga bisa menggunakan fragmen tanpa UI-nya sendiri sebagai pekerja tak terlihat untuk aktivitas tersebut.

MEMBUAT FRAGMENT

Untuk membuat fragmen, Anda harus membuat subkelas Fragment (atau subkelasnya yang ada). Kelas Fragment memiliki kode yang mirip seperti Activity. Kelas ini memiliki metode callback yang serupa dengan aktivitas, seperti onCreate(), onStart(), onPause(), dan onStop(). Sebenarnya , jika Anda mengkonversi aplikasi Android saat ini untuk menggunakan fragmen, Anda mungkin cukup memindahkan kode dari metode callback aktivitas ke masing-masing metode callback fragmen.

Biasanya, Anda harus mengimplementasikan setidaknya metode daur hidup berikut ini:

onCreate()

Sistem akan memanggilnya saat membuat fragmen. Dalam implementasi, Anda harus melakukan inisialisasi komponen penting dari fragmen yang ingin dipertahankan saat fragmen dihentikan sementara atau dihentikan, kemudian dilanjutkan.

onCreateView()

Sistem akan memanggilnya saat fragmen menggambar antarmuka penggunanya untuk yang pertama kali. Untuk menggambar UI fragmen, Anda harus mengembalikan View dari metode ini yang menjadi akar layout fragmen. Hasil yang dikembalikan bisa berupa null jika fragmen tidak menyediakan UI.

onPause()

Sistem akan memanggil metode ini sebagai indikasi pertama bahwa pengguna sedang meninggalkan fragmen Anda (walau itu tidak selalu berarti fragmen sedang dimusnahkan). Inilah biasanya tempat Anda harus mengikat setiap perubahan yang harus dipertahankan selepas sesi pengguna saat ini (karena pengguna mungkin tidak kembali).

Kebanyakan aplikasi harus mengimplementasikan setidaknya tiga metode ini untuk setiap fragmen, namun ada beberapa metode callback lain yang juga harus Anda gunakan untuk menangani berbagai tahap daur hidup fragmen. Semua metode callback daur hidup akan dibahas secara lebih detail, di bagian tentang Menangani Daur Hidup Fragmen.

Ada juga beberapa subkelas yang mungkin perlu diperpanjang, sebagai ganti kelas basis Fragment:

DialogFragment

Menampilkan dialog mengambang. Penggunaan kelas ini untuk membuat dialog merupakan alternatif yang baik dari penggunaan metode helper dialog di kelas Activity, karena Anda bisa menyatukan dialog fragmen ke dalam back-stack fragmen yang dikelola oleh aktivitas, sehingga pengguna bisa menutup ke fragmen yang ditinggalkan.

ListFragment

Menampilkan daftar item yang dikelola oleh adaptor (misalnya SimpleCursorAdapter), serupa dengan ListActivity. Menampilkan beberapa metode pengelolaan tampilan daftar seperti callback onListItemClick() untuk menangani kejadian klik.

PreferenceFragment

Menampilkan hierarki objek Preference sebagai daftar, serupa denganPreferenceActivity. Hal ini berguna saat membuat aktivitas “setelan” untuk aplikasi Anda.

Gambar. Daur hidup fragmen (saat aktivitasnya berjalan).

MEMBUAT FRAGMENT DALAM ACTIVITY

cara membuat fragment di android dengan XML dan Java code.

Berikut beberapa langkah cara membuat fragment.

1. Buat Class baru kemudian extend fragment.

2. Buat Layout untuk fragment.

3. Gunakan method onCreateView untuk mengkaitkan dengan tampilan(UI).

4. Menambahkan fragment ke dalam activity dengan XML (menggunakan <fragment>) atau dengan Java code. Beberapa fragment dapat di tambahkan ke dalam activity.

Langkah – langkah pembuatan Fragment dalam Activity, sebagai berikut :

Buat project baru, pada tutorial ini saya menggunakan nama package com.teknorial.cobafragment

Modifikasi file MainActivity.java seperti diberikut dibawah ini.

package com.teknorial.cobafragment;

import android.app.Activity;

import android.os.Bundle;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

}

Buat class java baru dengan fragmentkita.java , kemudian extend fragment

package com.teknorial.cobafragment;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class FragmentKita extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle SavedInstanceState){

return inflater.inflate(R.layout.fragmentkita_layout,container,false);

}

}

Kemudian kita akan membuat file layout untuk fragment dengan nama fragmentkita_layout.xml

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”

android:orientation=”vertical” android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:background=”#52B3D9″>

<TextView

android:layout_margin=”40dp”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:textAppearance=”?android:attr/textAppearanceLarge”

android:text=”Hello Fragment”

android:id=”@+id/textView” />

</LinearLayout>

5.Untuk menambahkan fragment ke dalam activity ada dua cara,yaitu menambah pada file XML layout atau dengan java code.

Menambahkan Fragment dengan XML

Buka MainActivity.xml, tambahkan tag fragment seperti berikut untuk manambahkan fragment kedalam activity.

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent”

android:layout_height=”match_parent” tools:context=”.MainActivity”

android:background=”#446CB3″>

<!–tag fragment berikut untuk menambahkan fragment ke dalam activity –>

<fragment

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:name=”com.teknorial.cobafragment.FragmentKita”

android:id=”@+id/fragment”

android:layout_alignParentTop=”true”

android:layout_alignParentLeft=”true”

android:layout_alignParentStart=”true” />

</RelativeLayout>

Jika tidak ada error kode aplikasi kita , maka tampilan akan seperti screenshot berikut.

Menambahkan Fragment dengan Java Code

1. Mendapatkan referensi untuk FragmentManager.
Setiap Activity memiliki Fragment Manager sendiri yang dapat diakses melalui getfragmentmanager(). FragmentManager mengatur reference untuk semua fragment dalam activity.

Gunakan findfragmentById() atau findFragmentByTag() untuk mendapatkan reference dari fragment tertentu.

2. Memulai transaction dengan memanggil beginTransaction()
FragmentTransaction dapat mengubah UI dalam hal menambahkan, menghapus, dan mengganti fragment.

Sekarang kita akan mencoba menambahkan fragment ke dalam activity dengan java code.

Buka kembali actvity_main.xml, kemudian tambahkan id pada layout.

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent”

android:layout_height=”match_parent” tools:context=”.MainActivity”

android:background=”#446CB3″

android:id=”@+id/my_layout”>

</RelativeLayout>

Buka MainActivity.java, pada method onCreate, kita tambahkan FragmentManager dan FragmentTransaction.

package com.teknorial.cobafragment;

import android.app.Activity;

import android.app.FragmentManager;

import android.app.FragmentTransaction;

import android.os.Bundle;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

FragmentKita frag= new FragmentKita();

FragmentManager manager=getFragmentManager();

FragmentTransaction transaction=manager.beginTransaction();

transaction.add(R.id.my_layout,frag,”Kita”);/*parameter|id layout,objek fragment, String berguna untuk findFragmentByTag()|*/

transaction.commit();

}

Sekarang coba jalankan aplikasi, jika fragment menutupi activity, buka fragmentkita_layout.xml
lihat pada tag LinearLayout, ubah lah atribut seperti berikut.

android:layout_height=”wrap_content”

Jika tidak ada error kode aplikasi kita , maka tampilan akan seperti screenshot berikut.

MEMBUAT UI FLEXIBLE dengan FRAGMENT

Saat mendesain aplikasi untuk mendukung berbagai ukuran layar, Anda bisa menggunakan kembali fragmen dalam konfigurasi layout berbeda untuk mengoptimalkan pengalaman pengguna berdasarkan ruang layar yang tersedia.

Misalnya, pada perangkat handset, bisa jadi tepat untuk menampilkan satu fragmen dalam satu waktu untuk antarmuka pengguna satu panel. Sebaliknya, Anda mungkin ingin menyetel fragmen dari sisi ke sisi pada tablet yang memiliki ukuran layar yang lebih lebar untuk menampilkan informasi lebih lanjut kepada pengguna.

Gambar 1. Dua fragmen yang ditampilkan dalam konfigurasi yang berbeda untuk aktivitas yang sama pada berbagai ukuran layar. Pada layar besar, kedua fragmen muat dari sisi ke sisi, tetapi pada perangkat handset, hanya satu fragmen muat dalam satu waktu, jadi fragmen harus menggantikan satu sama lain seiring pengguna bernavigasi.

Kelas FragmentManager menyediakan metode yang mengizinkan Anda untuk menambahkan, membuang, dan mengganti fragmen ke sebuah aktivitas pada waktu proses untuk menciptakan pengalaman dinamis.

COMMUNICATING WITH OTHER FRAGMENTS

Untuk menggunakan kembali komponen Fragment UI, Anda harus membangun masing-masing komponen komponen modular yang benar-benar mandiri, yang mendefinisikan tata letak dan tingkah lakunya sendiri. Setelah Anda mendefinisikan Fragmen yang dapat digunakan kembali ini, Anda dapat mengaitkannya dengan Aktivitas dan menghubungkannya dengan logika aplikasi untuk mewujudkan keseluruhan UI komposit.

Menetapkan sebuah Interface

Agar Fragmen dapat berkomunikasi sesuai dengan Aktivitasnya, Anda dapat menentukan sebuah antarmuka di kelas Fragment dan menerapkannya di dalam Activity. Fragmen menangkap implementasi antarmuka selama metode siklus hidup onAttach () dan kemudian dapat memanggil metode Antarmuka untuk berkomunikasi dengan Aktivitas

Here is an example of Fragment to Activity communication:

public class HeadlinesFragment extends ListFragment {

OnHeadlineSelectedListener mCallback;
// Container Activity must implement this interface

public interface OnHeadlineSelectedListener {

public void onArticleSelected(int position); }
@Override

public void onAttach(Activity activity) {

super.onAttach(activity);
// This makes sure that the container activity has implemented

// the callback interface. If not, it throws an exception

try {

mCallback = (OnHeadlineSelectedListener) activity;

} catch (ClassCastException e) {

throw new ClassCastException(activity.toString()

+ ” must implement OnHeadlineSelectedListener”);

}

}

}

Sekarang fragmen tersebut dapat mengirimkan pesan ke aktivitas dengan memanggil metodeArticleSelected() (atau metode lain di antarmuka) dengan menggunakan instance mCallback dari antarmuka OnHeadlineSelectedListener.
Misalnya, metode berikut dalam fragmen dipanggil saat pengguna mengklik item daftar. Fragmen menggunakan antarmuka panggilan balik untuk menyampaikan acara ke aktivitas utama.

@Overridepublicvoid onListItemClick(ListView l,View v,int position,long id){

// Send the event to the host activity

mCallback.onArticleSelected(position);}

Deliver a Message to a Fragment
host dapat mengirimkan pesan ke fragmen dengan menangkap instance Fragmen dengan findFragmentById (), lalu langsung memanggil metode publik fragmen tersebut.

Misalnya, bayangkan bahwa aktivitas yang ditunjukkan di atas mungkin berisi fragmen lain yang digunakan untuk menampilkan item yang ditentukan oleh data yang dikembalikan dalam metode callback di atas. Dalam kasus ini, aktivitas dapat melewati informasi yang diterima dalam metode callback ke fragmen lain yang akan menampilkan item.

public static class MainActivity extends Activity

implementsHeadlinesFragment.OnHeadlineSelectedListener{ …
public void onArticleSelected(int position){

// The user selected the headline of an article from the HeadlinesFragment

// Do something here to display that article
ArticleFragment articleFrag =(ArticleFragment) getSupportFragmentManager().findFragmentById(R.id.article_fragment);

if(articleFrag !=null){

// If article frag is available, we’re in two-pane layout…
// Call a method in the ArticleFragment to update its content articleFrag.updateArticleView(position);

}else{

// Otherwise, we’re in the one-pane layout and must swap frags…
// Create fragment and give it an argument for the selected article

ArticleFragment newFragment =newArticleFragment();

Bundle args =newBundle();

args.putInt(ArticleFragment.ARG_POSITION, position);

newFragment.setArguments(args);
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
// Replace whatever is in the fragment_container view with this fragment,

// and add the transaction to the back stack so the user can navigate back transaction.replace(R.id.fragment_container, newFragment);

transaction.addToBackStack(null);
// Commit the transaction

transaction.commit();

}

}

}