Mengenal Android (5) : Fragments – Membangun UI yang Fleksibel

Oleh : Reza Ervani

بسم الله الرحمن الرحيم

Referensi :

• http://developer.android.com/training/basics/fragments/fragment-ui.html

Saat merancang aplikasi kita untuk mendukung rentang ukuran layar yang banyak, kita dapat menggunakan fragment kita pada konfigurasi layout yang berbeda untuk mengoptimasi user experience berdasarkan space layar yang tersedia.

Sebagai contoh, pada sebuah perangkat handset mungkin cocok untuk menampilkan hanya satu fragment dalam satu waktu untuk antarmuka user single-pane. Tapi, barangkali kita ingin mengeset fragment side-by-side pada tablet yang memiliki layar lebih lebar untuk menampilkan lebih banyak informasi ke pengguna.

Class FragmentManager menyediakan metode yang memperkenankan kita untuk menambah, menghilangkan dan mengganti fragment-fragment ke sebuah activity pada saat runtime dalam rangka membuat experience dinamis.

Menambahkan sebuah Fragment ke suatu Activity saat Runtime

Dibanding menentukan fragment pada sebuah activity di file layout – sebagaimana disampaikan pada materi sebelumnya dengan element <fragment> – kita dapat menambahkan fragment ke activity saat runtime aktivitas. Ini diperlukan jika kita berencana untuk mengganti fragment sepanjang keberadaan activity.

Untuk melakukan suatu transaksi seperti menambahkan atau menghilangkan suatu fragment, kita mesti menggunakan FragmentManager untuk membuat suatu FragmentTransaction, yang menyediakan API untuk menambah, menghilangkan, mengganti dan melakukan transaksi fragment yang lain

Jika activity kita memperkenankan fragment untuk dibuang atau diganti, kita mesti menambahkan fragment(-fragment) awal ke activity sepanjang metode onCreate() activity.

Satu aturan yang penting saat berurusan dengan fragment – terutama yang kita tambahkan saat runtime – adalah bahwa fragment mestilah memiliki sebuah kontainer View di layout dimana layout fragment akan berada.

Layout berikut ini adalah sebuah alternatif dari layout yang ditunjukkan pada pelajaran sebelumnya, yang menunjukkan hanya satu fragment yang ditampilkan dalam satu waktu. Guna mengganti satu fragment dengan yang lain, layout activity menyertakan FrameLayout yang kosong yang bertindak sebagai kontainer fragment.

Perhatikan bahwa filename sama dengan file layout pada pelajaran sebelumnya, tetapi direktori layout tidak memiliki kualifier large, sehingga layout ini digunakan saat layar perangkat lebih kecil dari large dikarenakan layar tidak muat untuk memuat kedua fragment dalam satu waktu.

res/layout/news_articles.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Didalam activity kita, panggil getSupportFragmentManager() untuk mendapatkan suatu FragmentManager menggunakan API Support Library. Kemudian panggil beginTransaction() untuk membuat suatu FragmentTransaction dan panggil add() untuk menambahkan suatu fragment.

Kita dapat menampilkan banyak transaksi fragment untuk activity menggunakan FragmentTransaction yang sama. Saat kita sudah siap membuat perubahan, kita mesti memanggil commit().

Sebagai contoh, berikut bagaimana menambahkan sebuah fragment pada layout sebelumnya

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainActivity extends FragmentActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.news_articles);

        // Memeriksa apakah activity sedang menggunakan versi layout dengan kontainer
        // FrameLayout fragment_container
        if (findViewById(R.id.fragment_container) != null) {

            // Tapi bagaimanapun, jika kita sedang direstore dari keadaan sebelumnya
            // kita tidak perlu melakukan apapun dan sebaiknya kembali atau jika tidak
            // kita dapat mendapatkan fragment yang tumpang tindih
            if (savedInstanceState != null) {
                return;
            }

            // Membuat sebuah fragment baru untuk ditempatkan di layout activity
            HeadlinesFragment firstFragment = new HeadlinesFragment();

            // Dalam kasus activity ini dimulai dengan instruksi spesial dari sebuah
            // Intent, lewatkan extra milik Intent ke fragment sebagai argumen
            firstFragment.setArguments(getIntent().getExtras());

            // Tambahkan fragment ke FrameLayout 'fragment_container'
            getSupportFragmentManager().beginTransaction()
                    .add(R.id.fragment_container, firstFragment).commit();
        }
    }
}

Karena fragment telah ditambahkan ke kontainer FrameLayout pada saat runtime – bukan dengan menentukannya pada layout activity dengan suatu element – activity dapat membuang fragment dan menggantikannya dengan yang lain.

Menggantikan Satu Fragment dengan yang Lain

Prosedur untuk menggantikan suatu fragment sama dengan menambahkannya, tetapi membutuhkan metode replace() bukan add()

Ingat selalu bahwa saat kita melakukan transaksi fragment, seperti menggantikan atau membuang satu, adalah seringkali lebih tepat untuk memperkenankan pengguna kembali dan melakukan “undo” terhadap perubahan yang ada. Untuk memperkenankan pengguna kembali di transaksi fragment, kita mesti memanggil addToBackStack() sebelum kita melakukan commit FragmentTransaction.

Catatan : Saat kita membuang atau mengganti suatu fragment dan menambahkan transaksi ke back stack, fragment yang dibuat dihentikan (bukan dihancurkan). Jika pengguna kembali untuk memulihkan fragment, maka fragment tersebut akan direstart. Jika kita tidak menambahkan transaksi ke back stack, maka fragment akan dihancurkan saat dibuang atau digantikan.

Berikut contoh penggantian satu fragment dengan fragment lain :

// Membuat fragment dan memberikannya suatu argumen yang menunjukkan artikel yang seharusnya dimunculkan
ArticleFragment newFragment = new ArticleFragment();
Bundle args = new Bundle();
args.putInt(ArticleFragment.ARG_POSITION, position);
newFragment.setArguments(args);

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

// Menggantikan apapun yang ada di view fragment_container dengan fragment ini
// dan menambahkan transaksi ke back stack sehingga pengguna dapat kembali 
transaction.replace(R.id.fragment_container, newFragment);
transaction.addToBackStack(null);

// Melakukan commit transaksi
transaction.commit();

Metode addToBackStack() mengambil suatu parameter string opsional yang menunjukkan nama unik untuk transaksi. Nama ini tidak dibutuhkan sehingga kita merencanakan melakukan operasi fragment lanjut menggunakan API FragmentManagerBackStackEntry.