PERTEMUAN 5 KELOMPOK 2 ANGGOTA Ikmam Nur Fauzi

PERTEMUAN 5 KELOMPOK 2

ANGGOTA : ■ Ikmam Nur Fauzi (15. 11. 0016) ■ Bagas Pratikto (15. 11. 0019) ■ Suprayitno (15. 11. 0032) ■ Yusuf Budiaji (15. 11. 0037) ■ Upit Liana Sari (15. 11. 0042) ■ Edi Susanto (15. 11. 0046) ■ Adimas Dwi Nur H. (15. 11. 0062)

PEMBAHASAN ■ FRAGMENT ■ MEMBUAT FRAGMENT ■ MENAMBAHKAN FRAGMENT PADA ACTIVITY ■ MEMBUAT UI FLEXIBLE DENGAN FRAGMENT ■ KOMUNIKASI ANTAR FRAGMENT

FREGMENT ■ Fragment adalah satu komponen antar muka (user interface ) yang merupakan sebuah bagian dari Activity, dapat disebut juga dengan nama Sub. Activity. Satu Activity bisa mengelola beberapa fragment. untuk menampilkan hasil di layar user (pengguna). Dalam Satu Activity juga , sebuah fragment dapat diganti, ditambahkan dihapus, sesuai kebutuhan. Fragment dipengaruhi dari lifecycle (siklus hidup ) Activity , karna Fragment termasuk bagian dari Activity.

CONTOH PENGGUNAAN FRAGMENT ■ Pada aplikasi berita dapat menggunakan satu fragmen untuk menampilkan daftar artikel di sebelah kiri dan fragmen lainnya untuk menampilkan artikel di sebelah kanan—kedua fragmen ini muncul di satu aktivitas, berdampingan, dan masing-masing fragmen memiliki serangkaian metode callback daur hidup dan menangani kejadian masukan penggunanya sendiri. Sehingga, sebagai ganti menggunakan satu aktivitas untuk memilih artikel dan aktivitas lainnya untuk membaca artikel, pengguna bisa memilih artikel dan membaca semuanya dalam aktivitas yang sama, sebagaimana diilustrasikan dalam layout tablet pada gambar di bawah ini.

MEMBUAT FRAGMENT kali ini kita akan coba membuat contoh penerapan dari Fragment Android. Sebelum memulai kalian harus tahu 12 method dari fragment berikut : ■ on. Attach(Activity) : digunakan untuk memanggil 1 kali ketika menempel di Activity. ■ on. Create(Bundle) : digunakan untuk mempersiapkan fragment. ■ on. Create. View(Layout. Inflater, View. Group, Bundle) : menciptakan dan menampilkan kembali secara hirarki. ■ on. Activity. Created(Bundle) : method ini dipanggil setelah method on. Create(). ■ on. View. State. Restored(Bundle) : digunakan untuk menyatakan informasi kepada fragment bahwa semua akan disimpak ke dalam state (layar) dari tampilan fragment secara hirarki yang telah dipulihkan. ■ on. Start() : digunakan untuk membuat fragment terlihat.

■ on. Resume() : digunakan untuk membuat fragment interaktif. ■ on. Pause() : digunakan jika fragment tidak lagi interaktif. ■ on. Stop() : digunakan jika fragment tidak lagi terlihat. ■ on. Destroy. View() : digunakan untuk membersihkan resources (sumber daya. ■ on. Destroy() : digunakan untuk membersihkan akhir resources (sumber daya )dari layar fragment. ■ on. Detach() : digunakan ketika fragment , tidak lagi ada di Activity.

TUTORIAL MEMBUAT FRAGMENT ■ BUKA ANDROID STUDIO SEPERTI BIASA

MENERAPKAN CODING ACTICITY Setelah berhasil dibuat kita akan mencoba menerapkan baris intruksi (codingan ) dibawah ke dalam file layout dan file java.

LAYOUT ■ activity_main. xml <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="fill_parent" android: layout_height="fill_parent" > <fragment android: id="@+id/fragment 2" android: name="com. okedroid. aplikasisaya. Fragment 2" android: layout_width="0 px" android: layout_height="match_parent" android: layout_weight="1" /> <fragment android: id="@+id/fragment 1" android: name="com. okedroid. aplikasisaya. Fragm ent 1" android: layout_width="0 px" android: layout_height="match_parent" android: layout_weight="1" /> </Linear. Layout>

■ fragment_satu. xml android: layout_height="match_parent" <Text. View android: id="@+id/text. View 1" android: layout_width="wrap_content" android: layout_height="wrap_conten t" android: text="Fragment Pertama" android: text. Appearance="? android: a ttr/text. Appearance. Large" /> android: orientation="vertical" </Linear. Layout> <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/re s/android" android: layout_width="match_parent" android: background="#3498 db">

■ fragment_dua. xml <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="match_parent" android: layout_height="match_parent" android: orientation="vertical" android: background="#2980 b 9" > <Text. View android: id="@+id/text. View 1" android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="Fragment Kedua" android: text. Appearance="? android: attr/text. Appearance. Large" /> </Linear. Layout>

Java ■ Main. Activity. java package com. okedroid. aplikasisaya; import android. os. Bundle; import android. support. v 7. app. App. Compat. Activity; public class Main. Activity extends App. Compat. Activity { // Button variables @Override protected void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); set. Content. View(R. layout. activity_main); } }

■ Fragment 1. java package com. okedroid. aplikasisaya; import android. os. Bundle; import android. app. Fragment; import android. view. Layout. Inflater; import android. view. View. Group; public class Fragment 1 extends Fragment { @Override public View on. Create. View(Layout. Inflater inflater, View. Group container, Bundle saved. Instance. State) { // TODO Auto-generated method stub return inflater. inflate(R. layout. fragment_satu, container, false); }

■ Fragment 2. java package com. okedroid. aplikasisaya; import android. os. Bundle; import android. app. Fragment; import android. view. Layout. Inflater; import android. view. View. Group; public class Fragment 2 extends Fragment { @Override public View on. Create. View(Layout. Inflater inflater, View. Group container, Bundle saved. Instance. State) { // TODO Auto-generated method stub return inflater. inflate(R. layout. fragment_dua, container, false); } }

Setelah berhasil diterapkan kita coba jalankan Aplikasinya lewat Android Studio. Hasilnya kurang lebih akan seperti ini :

MENAMBAHKAN FRAGMENT KE AKTIVITI Biasanya, fragmen menyumbang sebagian UI ke aktivitas host, yang disisipkan sebagai bagian dari hierarki tampilan keseluruhan aktivitas. Ada dua cara untuk menambahkan fragmen pada tata letak aktivitas: ■ Deklarasikan fragmen di dalam file tata letak aktivitas Dalam kasus ini, Anda dapat menentukan properti tata letak untuk fragmen tersebut seolah-olah itu adalah tampilan. Sebagai contoh, inilah file tata letak untuk aktivitas dengan dua fragmen:

<? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: orientation="horizontal" android: layout_width="match_parent" android: layout_height="match_parent"> <fragment android: name="com. example. news. Article. List. Fragment" android: id="@+id/list" android: layout_weight="1" android: layout_width="0 dp" android: layout_height="match_parent" /> <fragment android: name="com. example. news. Article. Reader. Fragment" android: id="@+id/viewer" android: layout_weight="2" android: layout_width="0 dp" android: layout_height="match_parent" /> </Linear. Layout>

■ Secara pemrograman tambahkan fragmen yang ada View. Group. Setiap saat aktivitas Anda berjalan, Anda dapat menambahkan fragmen ke tata letak aktivitas Anda hanya perlu menentukan View. Group untuk menempatkan fragmen tersebut. Untuk membuat transaksi fragmen dalam aktivitas Anda (seperti menambah, menghapus, atau mengganti fragmen), Anda harus menggunakan API dari Fragment. Transaction. Anda bisa mendapatkan instance dari Fragment. Transaction dari Aktivitas Anda seperti ini: Fragment. Manager fragment. Manager = get. Fragment. Manager(); Fragment. Transaction fragment. Transaction = fragment. Manager. begin. Transaction();

Anda kemudian dapat menambahkan fragmen menggunakan metode add (), menentukan fragmen untuk ditambahkan dan tampilan untuk memasukkannya. Sebagai contoh: Example. Fragment fragment = new Example. Fragment(); fragment. Transaction. add(R. id. fragment_container, fragment); fragment. Transaction. commit(); Argumen pertama yang dilewatkan untuk menambahkan () adalah View. Group dimana fragmen harus ditempatkan, ditentukan oleh ID sumber daya, dan parameter kedua adalah fragmen yang akan ditambahkan. Setelah membuat perubahan dengan Fragment. Transaction, Anda harus memanggil commit () agar perubahan diterapkan.

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.

■ Prosedur untuk mengganti fragmen serupa dengan menambah fragmen, namun memerlukan metode replace() bukan add(). ■ Perhatikan bahwa saat melakukan transaksi fragmen, misalnya menggantikan atau membuang fragmen, sering kali diperlukan untuk mengizinkan pengguna bernavigasi mundur dan "mengurungkan" perubahan. Untuk mengizinkan pengguna bernavigasi mundur melalui transaksi fragmen, Anda harus memanggil add. To. Back. Stack() sebelum Anda mengikat Fragment. Transaction. ■ Catatan: Saat Anda membuang atau mengganti fragmen dan menambahkan transaksi ke back-stack, fragmen yang dibuang akan dihentikan (tidak dihancurkan). Jika pengguna bernavigasi mundur untuk memulihkan fragmen, mulai ulang akan terjadi. Jika Anda tidak menambahkan transaksi ke back-stack, fragmen akan dihancurkan saat dihapus atau digantikan.

CONTOH UI FLEXIBLE DENGAN FRAGMENT Metode add. To. Back. Stack() mengambil parameter string opsional yang menentukan nama unik untuk transaksi. Nama tidak diperlukan kecuali Anda melakukan operasi fragmen lanjutan menggunakan Fragment. Manager. Back. Stack. Entry API.

KOMUNIKASI ANTAR FREGMENT Untuk memanfaatkan komponen-komponen UI Fragment, kita sebaiknya membuat masing-masing komponen sebagai komponen modular secara utuh yang mendefinisikan layout dan perilakunya sendiri. Setelah kita mendefiniskan 'Fragment-fragment', kita bisa mengaitkan/mengasosiasikannya dengan suatu 'Activity' dan menghubungkannya dengan lojik aplikasi untuk merealisasikan keseluruhan UI gabungan tersebut.

■ Membuat 'Interface‘ Untuk membuat suatu 'Fragment' berkomunikasi hingga 'Activity' nya, kita bisa membuat interface di dalam class 'Fragment' dan mengimplementasikannya di dalam 'Activity'. 'Fragment' akan menangkap implementasi interface pada method (siklus hidup) 'on. Attach()' dan kemudian bisa memanggil method-method 'Interface' untuk berkomunikasi dengan 'Activity' tersebut.

Berikut dibawah ini adalah contoh komunikasi 'Fragment' ke 'Activity': public class Headlines. Fragment extends List. Fragment { On. Headline. Selected. Listener m. Callback; // Container Activity must implement this interface public interface On. Headline. Selected. Listener { public void on. Article. Selected(int position); } @Override public void on. Attach(Activity activity) { super. on. Attach(activity); // This makes sure that the container activity has implemented // the callback interface. If not, it throws an exception try { m. Callback = (On. Headline. Selected. Listener) activity; } catch (Class. Cast. Exception e) { throw new Class. Cast. Exception(activity. to. String() + " must implement On. Headline. Selected. Listener"); } }

Sekarang 'fragment' tersebut bisa mengirim pesan ke 'activity' dengan memanggil method 'on. Article. Selected()' (atau method-method lainnya di dalam 'interface') dengan menggunakan instan 'm. Callback' dari interface 'on. Headline. Selected. Listener'. Contohnya, method berikut ini di dalam 'fragment' dipanggil ketika user men-klik pada daftar item. 'Fragment' tersebut akan menggunakan 'interface' untuk mengirim 'event' ke 'activity' induknya. @Override public void on. List. Item. Click(List. View l, View v, int position, long id) { // Send the event to the host activity m. Callback. on. Article. Selected(position); }

■ Mengimplementasikan 'Interface‘ Untuk menerima 'event' dari 'fragment', 'activity' yang menjadi tempat penampungnya harus mengimplementasikan 'interface' yang didefinisikan di dalam class 'fragment'. Contohnya, 'activity' berikut ini akan mengimplementasikan 'interface' dari contoh di atas tadi. public static class Main. Activity extends Activity implements Headlines. Fragment. On. Headline. Selected. Listener{. . . public void on. Article. Selected(int position) { // The user selected the headline of an article from the Headlines. Fragment // Do something here to display that article } }

■ Mengirim Pesan ke 'Fragment‘ 'Activity' yang menjadi tempat penampung bisa mengirim pesan ke suatu 'fragment' dengan menangkap instan 'Fragment' dengan cara 'find. Fragment. By. Id()', kemudian memanggil langsung method-method public dari 'fragment' tersebut. Contohnya, bayangkan bahwa 'activity' yang ditunjukkan di atas mungkin berisi 'fragment' lain yang digunakan untuk menampilkan item yang ditentukan oleh data yang dihasilkan (dikembalikan) di dalam method di atas. Dalam kasus ini, 'activity' bisa melewatkan informasi yang diterima di dalam method tersebut ke 'fragment' lainnya yang akan menampilkan item:

public static class Main. Activity extends Activity implements Headlines. Fragment. On. Headline. Selected. Listener{. . . public void on. Article. Selected(int position) { // The user selected the headline of an article from the Headlines. Fragment // Do something here to display that article Article. Fragment article. Frag = (Article. Fragment) get. Support. Fragment. Manager(). find. Fragment. By. Id(R. id. article_fragment); if (article. Frag != null) { // If article frag is available, we're in two-pane layout. . . // Call a method in the Article. Fragment to update its content article. Frag. update. Article. View(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 Article. Fragment new. Fragment = new Article. Fragment(); Bundle args = new Bundle(); args. put. Int(Article. Fragment. ARG_POSITION, position); new. Fragment. set. Arguments(args); Fragment. Transaction transaction = get. Support. Fragment. Manager(). begin. Transaction(); // 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, new. Fragment); transaction. add. To. Back. Stack(null); // Commit the transaction. commit(); } } }