Pertemuan 5 Fragment

LAPORAN TUGAS PERTEMUAN 5

FRAGMENT

PEMROGRAMAN MOBILE 2

Disusun Oleh :

Dafid Abdullah 11.0269 TI 15 F

Riyo Sunarko 11.0270 TI 15 F

Eni Anggraeni 11.0271 TI 15 F

Zilmu Mustaqiem 11.0272 TI 15 F

Iman Setiawan 11.0275 TI 15 F

Rilas Agung P 11.0284 TI 15 F

PROGRAM STUDI TEKNIK INFORMATIKA

STMIK AMIKOM PURWOKERTO

2017/2018

I. FRAGMENT

Fragment mewakili perilaku atau bagian dari antarmuka pengguna dalam Activity. Dalam suatu activity dapat dikombinasikan beberapa fragmen untuk membangun UI multipanel dan menggunakan kembali sebuah fragmen dalam beberapa aktivitas. Fragmen sebagai bagian modular dari aktivitas, yang memiliki daur hidup sendiri, menerima kejadian masukan sendiri dan dapat ditambahkan atau hapus saat aktivitas berjalan (semacam “sub aktivitas” yang bisa digunakan kembali dalam aktivitas berbeda).

Fragmen 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 hidup dilanjutkan, setiap fragmen dapat dimanipulasi secara terpisah, seperti menambah atau membuangnya).

Bila fragmen ditambahkan sebagai bagian dari layout aktivitas, fragmen itu akan berada dalam ViewGroup di hierarki tampilan aktivitas tersebut dan fragmen mendefinisikan layout tampilannya sendiri. Fragmen dapat disisipkan 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.

MEMBUAT FRAGMEN

Untuk membuat fragmen, buatlah 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.

Implementasi metode daur hidup fragmen:

onCreate()

Sistem akan memanggilnya saat membuat fragmen.

Dalam implementasi harus dilakukan 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, 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 (walau itu tidak selalu berarti fragmen sedang dimusnahkan). Inilah biasanya tempat yang harus mengikat setiap perubahan yang 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 digunakan 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 dapat membuat dialog alternatif yang baik dari penggunaan metode helper dialog di kelas Activity, karena 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 dengan PreferenceActivity. Hal ini berguna saat membuat aktivitas “setelan” untuk suatu aplikasi.

Sumber : http://developer.android.com/guide/components/fragments.html?hl=id

II. Menambah Fragment Pada Activity

Tutorial Membuat Fragment dalam Activity. Tutorial ini akan menjelaskan bagaimana cara membuat fragment di android dengan XML dan Java code.

Berikut beberapa langkah cara membuat fragment.

Buat Class baru kemudian extend fragment.
Buat Layout untuk fragment.
Gunakan method onCreateView untuk mengkaitkan dengan tampilan(UI).
Menambahkan fragment ke dalam activity dengan XML (menggunakan <fragment>) atau dengan Java code.

Beberapa fragment dapat di tambahkan ke dalam activity.

Tutorial Membuat Fragment dalam Activity

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;

/**

* Created by Teknorial on 20-Sep-15.

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

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.

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 kita coba jalan aplikasi yang kita buat, 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.

Sumber : https://blog.teknoria l.com/tutorial-membuat-fragment-dalam-activity

Membuat UI yang Fleksibel

Ketika mendesain aplikasi kita untuk mendukung ukuran layar yang berbeda-beda, kita bisa menggunakan kembali ‘fragment-fragment’ kita dalam berbagai konfigurasi layout yang berbeda-beda untuk mengoptimalkan ‘user experience’ berdasarkan ruang layar yang tersedia.

Contohnya, pada perangkat handset mungkin akan pas untuk menampilkan hanya satu ‘fragment’ dalam satu saat untuk UI ‘single-pane’. Sebaliknya, kita mungkin ingin men-set ‘fragment-fragment’ saling ber-sisi-an (bersebelahan) pada perangkat tablet yang memiliki ukuran layar yang lebih lebar untuk menampilkan informasi yang lebih banyak ke user.

Gambar 1. Dua ‘fragment’, yang ditampilkan dalam konfigurasi yang berbeda untuk ‘activity’ yang sama. Di layar besar, kedua ‘fragment’ bisa tepat ber-sisi-an (bersebelahan), tetapi pada perangkat handset, hanya satu ‘fragment’ bisa tepat tampil sehingga ‘fragment-fragment’ harus saling bergantian satu sama lain sesuai navigasi user.

Class ‘FragmentManager‘ menyediakan method-method yang membebaskan kita untuk menambahkan, memindahkan/menghilangkan, mengganti ‘fragment-fragment’ ke ‘activity’ saat runtime supaya bisa membuat tampilan yang dinamis.

Menambahkan ‘Fragment’ ke ‘Activity’ saat Runtime

Daripada membuat ‘fragment-fragment’ untuk suatu ‘activity’ di dalam file layout — seperti yang ditunjukkan dalam latihan sebelumnya dengan elemen <fragment> — kita bisa menambahkan suatu fragment ke ‘activity’ saat runtime. Ini diperlukan bila kita berencana mengubah ‘fragment-fragment’ selama hidup ‘activity’.

Untuk melakukan suatu transaksi seperti menambahkan atau menghilangkan suatu ‘fragment’, kita harus menggunakan ‘FragmentManager‘ untuk membuat suatu ‘FragmentTransaction‘, yang menyediakan API-API untuk menambahkan, menghilangkan, mengganti, dan melakukan transaksi-transaski ‘fragment’ lainnya.

Bila ‘activity’ kita memperbolehkan ‘fragment-fragment’ tersebut untuk dihilangkan dan diganti, kita seharusnya menambahkan ‘fragment’ di saat awal ke ‘activity’ pada method ‘onCreate()’ di ‘activity’ tersebut.

Aturan penting ketika menerapkan ‘fragment’ — terutama ketika menambahkan ‘fragment-fragment’ saat runtime — adalah bahwa layout ‘activity’ kita harus memasukkan suatu kontainer ‘View‘ dimana kita bisa memasukkan/menempatkan ‘fragment’ tersebut.

Layout berikut adalah suatu alternatif dari layout yang ditunjukkan pada latihan sebelumnya yang menampilkan hanya satu fragment saja dalam satu saat. Supaya bisa mengganti satu ‘fragment’ dengan ‘fragment’ yang lain, layout ‘activity’ akan memasukkan ‘FrameLayout‘ kosong yang akan bertindak sebagai kontainer ‘fragment’.

Perhatikan bahwa nama file-nya adalah sama dengan file layout dalam latihan sebelumnya, tetapi direktori layout tidak memiliki qualifier ‘large’, sehingga layout ini digunakan ketika layar perangkat lebih kecil dibanding ‘large’ karena layar tersebut tidak akan cocok dengan kedua ‘fragment’ pada saat yang sama.

“res/layout/news_articles.xml“:

Di dalam ‘activity’ kita, panggillah ‘getSupportFragmentManager()‘ untuk mendapat ‘FragmentManager‘ yang menggunakan API-API library pendukung. Kemudian panggillah ‘beginTransaction()‘ untuk membuat suatu ‘FragmentTransaction‘ dan panggillah ‘add()‘ untuk menambahkan satu ‘fragment’.

Kita bisa melakukan banyak transaksi ‘fragment’ untuk ‘activity’ yang menggunakan ‘FragmentTransaction‘ yang sama. Ketika kita siap untuk membuat perubahan, kita harus memanggil ‘commit()‘.

Contohnya, dibawah ini adalah bagaimana kita menambahkan suatu ‘fragment’ ke layout sebelumnya:

Karena ‘fragment’ tersebut sudah ditambahkan ke kontainer ‘FrameLayout‘ saat runtime — sebagai ganti dari mendefinisikannya di dalam layout ‘activity’ dengan menggunakan elemen <fragment> — ‘activity’ tersebut bisa menghilangkan ‘fragment’ tersebut dan menggantinya dengan ‘fragment’ yang lain.

Mengganti satu ‘Fragment’ dengan ‘Fragment’ lainnya

Prosedur untuk mengganti suatu ‘fragment’ mirip dengan menambahkan ‘fragment’, tetapi memerlukan method ‘replace()‘ sebagai ganti ‘add()‘.

Jangan lupa bahwa ketika kita melakukan transaksi-transaksi ‘fragment’, misalnya mengganti atau menghilangkan satu fragment, seringkali pas untuk membebaskan user menavigasi dengan tombol ‘backward’ dan ‘membatalkan/undo’ perubahannya. Untuk membebaskan user menavigasi tombol ‘backward’ melalui transaksi ‘fragment’, kita harus memanggil ‘addToBackStack()‘ sebelum kita melakukan ‘commit’ pada ‘FragmentTransaction‘

Catatan:

Ketika kita memindahkan/menghilangkan atau mengganti suatu ‘fragment dan menambahkan transaksi ke tumpukan belakang, ‘fragment’ yang dipindahkan di-stop (bukan di-destroy). Bila user menavigasi kembali untuk mengembalikan ‘fragment’ tersebut, dia akan ‘restart’. Bila kita tidak menambahkan transaksi ke tumpukan belakang, maka ‘fragment’ tersebut di-destroy ketika dipindahkan atau diganti.

Contoh mengganti satu ‘fragment’ dengan ‘fragment’ lainnya:

Method ‘addToBackStack()‘ akan mengambil parameter string opsional yang menentukan nama yang unique untuk transaksi tersebut. Nama tersebut tidaklah diperlukan kecuali jika kita merencanakan untuk melakukan pekerjaan-pekerjaan menggunakan ‘fagment’ tingkat lanjut dengan menggunakan API-API ‘FragmentManager.BackStackEntry‘.

Sumber https://phpisus.blogspot.co.id/2016/10/membuat-ui-yang-fleksibel.html?m=1

III. Komunikasi Antar Fragment

Berikut beberapa hal yang perlu kamu ketahui untuk membuat fragment saling berkomunikasi:

Jangan langsung referensi dari fragment ke fragment lainnya.
Buatlah Interface yang berisikan method yang akan bertindak sebagai pembawa suatu event.
Implements interface pada activity
Fragment 1 menggunakan interface untuk mengirim pesan.
Pada activity, method interface yang telah diimplementasikan dapat direferensikan ke fragment 2 dan melakukan perubahan pada sesuai method yang diberikan.

Buat dua class java baru dengan nama FragmentA dan FragmentB kemudian extend fragment :

Kemudian buat file layout untuk fragment dengan nama fragment_a.xml dan fragment_b.xml. Buka direktori res/layout, klik kanan -> new -> Layout resource file -> masukan nama layout fragment dan ubah Root element dengan RelativeLayout, jika sudah selesai klik OK.

Buat interface dengan nama communicator, ini berguna untuk menghubungkan kedua fragment yang telah kita buat. Untuk membuat interface sama saja dengan membuat java class, yang membedakan pada kind pilih interface.