Dalam latihan-latihan sebelumnya kita sudah mempelajari apa itu activity dan bagaimana menggunakannya. Dalam perangkat yang layarnya kecil (misalnya smartphone), activity biasanya akan memenuhi seluruh layar, dengan menampilkan berbagai macam 'view' yang membentuk UI dari app yang kita buat. Activity tersebut pada dasarnya adalah suatu 'container' bagi berbagai macam 'view'.
Tetapi, ketika suatu activity ditampilkan pada perangkat yang berlayar besar, misalnya tablet, maka dia agak kurang pas dari tempatnya. Karena layarnya jauh lebih besar, maka semua view di dalam suatu activity harus diatur supaya penggunaannya benar-benar maksimal terhadap ruang yang bertambah, yang pada akhirnya membuat perubahan yang kompleks pada hirarki 'view'. Suatu teknik yang lebih bagus untuk melakukan ini adalah dengan memiliki 'mini-activity' (activity kecil), dimana masing-masing 'mini-activity' tersebut memiliki sekumpulan view-nya sendiri. Saat runtime, satu activity bisa berisi satu atau lebih mini-activity seperti ini, tergantung pada orientasi layar ketika layar dipegang. Pada Android 3.0 dan setelahnya, 'mini-activity' seperti ini disebut dengan 'fragment'.
Anggap saja fragment sebagai bentuk lain activity. Kita membuat fragment untuk menampung berbagai 'view', sama seperti activity. Fragment selalu ditempelkan ke activity. Misalnya suatu activity memiliki dua fragment. Fragment 1 mungkin berisi 'ListView' yang menampilkan daftar judul buku. Fragment 2 mungkin berisi beberapa 'TextView' dan 'ImageView' yang menampilkan beberapa teks dan gambar.
Sekarang bayangkan bahwa app akan berjalan pada tablet Android dengan mode portrait (atau pada smartphone Android). Dalam kasus seperti ini, Fragment 1 mungkin akan menempel pada satu activity, sementara Fragment 2 mungkin akan menempel ke activity yang lain. Bila user memilih suatu item dalam daftar di Fragment 1, maka activity 2 akan aktif.
Bila app kemudian ditampilkan dala tablet dengan mode landscape, maka kedua fragment akan menempel dalam satu activity saja.
Jadi dari sini menjadi jelas bahwa fragment menyajikan cara yang serba guna ketika kita membuat UI untuk app Android. Fragment membentuk suatu unit atomik dari UI kita, dan fragment-fragment bisa ditambahkan atau dihilangkan secara dinamis ke activity sehingga kita bisa membuat UX yang baik bagi perangkat mereka.
Berikut adalah latihan dasar untuk memahami cara kerja fragment:
1. Kita buat project baru dan kita beri nama "Fragments".
2. Di dalam folder "res/layout" kita tambahkan file layout xml dan kita beri nama "fragment1.xml" dan tambahkan kode seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#00FF00">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ini adalah fragment #1"
android:textColor="#000000"
android:textSize="25sp"/>
</LinearLayout>
3. Kemudian di foleder yang sama "res/layout" kita tambahkan lagi file layout xml yang lain dan kita beri nama "fragment2.xml" dan tambahkan kode seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFE00">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ini adalah fragment #2"
android:textColor="#000000"
android:textSize="25sp"/>
</LinearLayout>
4. Dalam file layout utama "activity_main.xml" kita tambahkan kode seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="horizontal"
tools:context="com.example.fragments.MainActivity">
<fragment
android:name="com.example.fragments.Fragment1"
android:id="@+id/fragment1"
android:layout_weight="1"
android:layout_width="0px"
android:layout_height="match_parent" />
<fragment
android:name="com.example.fragments.Fragment2"
android:id="@+id/fragment2"
android:layout_weight="1"
android:layout_width="0px"
android:layout_height="match_parent" />
</LinearLayout>
5. Kemudian di bawah nama package "com.example.fragments" kita tambahkan dua file java yang kita beri nama "Fragment1.java" dan "Fragment2.java".
6. Kita tambahkan kode berikut ke file "Fragment1.java":
package com.example.fragments;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
/*tampilkan layout untuk fragment ini*/
return inflater.inflate(R.layout.fragment1, container, false);
}
}
7. Kita tambahkan kode berikut ke file "Fragment2.java":
package com.example.fragments;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
/* tampilkan layout utk fragment ini*/
return inflater.inflate(R.layout.fragment2, container, false);
}
}
8. Kita jalankan di emulator Android Studio dan hasilnya kurang lebih adalah seperti berikut:
Penjelasan:
Fragment berlaku sangat mirip dengan activity, dia memiliki class java dan me-load UI-nya sendiri dari file XML. File XML tersebut berisi semua elemen-elemen UI biasa yang biasanya juga kita ingin tampilkan dari activity seperti: 'TextView', 'EditText', 'Button', dan lain-lain. Class java dari suatu 'Fragment' perlu menerapkan 'extends' class 'Fragment':
public class Fragment1 extends Fragment {
}
Catatan:Selain dari class dasar 'Fragment', suatu fragment juga bisa menerapkan beberapa subclass lain dari class 'Fragment', misalnya 'DialogFragment', 'ListFragment', dan 'PreferenceFragment'. Nanti dalam latihan-latihan yang lain tentang fragment akan dibahas lebih detil.
Untuk membuat UI untuk suatu fragment, kita me-override method 'onCretaeView()'. Method ini akan mengembalikan nilai object 'View', seperti berikut:
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
/*tampilkan layout untuk fragment ini*/
return inflater.inflate(R.layout.fragment1, container, false);
}
Disini, kita menggunakan object 'LayoutInflater' untuk menampilkan UI dari file XML tertentu (R.layout.fragment1). Argument 'container' mengacu pada 'ViewGroup' induk, yaitu activity dimana kita tempelkan fragment ini. Argument 'savedInstanceState' memungkinkan kita untuk menampilkan kembali fragment ke status sebelumnya yang sudah tersimpan.
Untuk menambahkan fragment ke activity, kita menggunakan elemen <fragment> seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="horizontal"
tools:context="com.example.fragments.MainActivity">
<fragment
android:name="com.example.fragments.Fragment1"
android:id="@+id/fragment1"
android:layout_weight="1"
android:layout_width="0px"
android:layout_height="match_parent" />
<fragment
android:name="com.example.fragments.Fragment2"
android:id="@+id/fragment2"
android:layout_weight="1"
android:layout_width="0px"
android:layout_height="match_parent" />
</LinearLayout>
Catatan: masing-masing fragment memerlukan suatu unique identifier. Kita bisa membuatnya melalui atribut 'android:id' atau 'android:tag'
No comments:
Post a Comment