PERTEMUAN 5 KELOMPOK 2.

Presentasi berjudul: "PERTEMUAN 5 KELOMPOK 2."— Transcript presentasi:

1 PERTEMUAN 5 KELOMPOK 2

2 ANGGOTA : Ikmam Nur Fauzi (15.11.0016) Bagas Pratikto (15.11.0019)
Suprayitno ( ) Yusuf Budiaji ( ) Upit Liana Sari ( ) Edi Susanto ( ) Adimas Dwi Nur H. ( )

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

4 FREGMENT Fragment adalah salah 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 dan dihapus,sesuai kebutuhan. Fragment dipengaruhi dari lifecycle (siklus hidup ) Activity , karna Fragment termasuk bagian dari Activity.

5 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.

6

7 MEMBUAT FRAGMENT kali ini kita akan coba membuat contoh penerapan dari Fragment Android. Sebelum memulai kalian harus tahu 12 method dari fragment berikut : onAttach(Activity)  :  digunakan untuk memanggil 1 kali ketika menempel di Activity. onCreate(Bundle)   : digunakan untuk mempersiapkan fragment. onCreateView(LayoutInflater, ViewGroup, Bundle)  : menciptakan dan menampilkan kembali secara hirarki. onActivityCreated(Bundle) : method ini dipanggil setelah method onCreate(). onViewStateRestored(Bundle) : digunakan untuk menyatakan informasi  kepada fragment bahwa semua akan disimpak ke dalam state (layar) dari tampilan fragment secara hirarki yang telah dipulihkan. onStart() : digunakan untuk membuat fragment terlihat.

8 onResume() : digunakan untuk membuat fragment interaktif.
onPause()  : digunakan jika fragment tidak lagi interaktif. onStop()  :digunakan jika fragment tidak lagi  terlihat. onDestroyView() : digunakan untuk membersihkan resources (sumber daya. onDestroy()  : digunakan untuk membersihkan akhir resources (sumber daya )dari layar fragment. onDetach() : digunakan ketika fragment ,tidak lagi ada di Activity.

9 TUTORIAL MEMBUAT FRAGMENT
BUKA ANDROID STUDIO SEPERTI BIASA

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

11 LAYOUT activity_main.xml
<LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" > <fragment android:name="com.okedroid.aplikasisaya.Fragment2" android:layout_width="0px" android:layout_height="match_parent" android:layout_weight="1" /> <fragment android:name="com.okedroid.aplikasisaya.Fragment1" android:layout_width="0px" android:layout_height="match_parent" android:layout_weight="1" /> </LinearLayout>

12 fragment_satu.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" s/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#3498db"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Fragment Pertama" android:textAppearance="?android:attr/textAppearanceLarge" /> </LinearLayout>

13 fragment_dua.xml <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#2980b9" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Fragment Kedua" android:textAppearance="?android:attr/textAppearanceLarge" /> </LinearLayout>

14 Java MainActivity.java package com.okedroid.aplikasisaya;
import android.os.Bundle; import android.support.v7.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { // Button variables @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }

15 Fragment1.java package com.okedroid.aplikasisaya; import android.os.Bundle; import android.app.Fragment; 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) { // TODO Auto-generated method stub return inflater.inflate(R.layout.fragment_satu,container, false); }

16 Fragment2.java package com.okedroid.aplikasisaya;
import android.os.Bundle; import android.app.Fragment; 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) { // TODO Auto-generated method stub return inflater.inflate(R.layout.fragment_dua,container, false); }

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

18 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:

19 <. xml version="1. 0" encoding="utf-8"
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent"> <fragment android:name="com.example.news.ArticleListFragment" android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" /> <fragment android:name="com.example.news.ArticleReaderFragment" android:layout_weight="2" android:layout_width="0dp" android:layout_height="match_parent" /> </LinearLayout>

20 Secara pemrograman tambahkan fragmen yang ada ViewGroup.
Setiap saat aktivitas Anda berjalan, Anda dapat menambahkan fragmen ke tata letak aktivitas Anda. Anda hanya perlu menentukan ViewGroup untuk menempatkan fragmen tersebut. Untuk membuat transaksi fragmen dalam aktivitas Anda (seperti menambah, menghapus, atau mengganti fragmen), Anda harus menggunakan API dari FragmentTransaction. Anda bisa mendapatkan instance dari FragmentTransaction dari Aktivitas Anda seperti ini: FragmentManager fragmentManager = getFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

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

22 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.

23 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 addToBackStack() sebelum Anda mengikat FragmentTransaction. 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.

24 CONTOH UI FLEXIBLE DENGAN FRAGMENT
Metode addToBackStack() mengambil parameter string opsional yang menentukan nama unik untuk transaksi. Nama tidak diperlukan kecuali Anda melakukan operasi fragmen lanjutan menggunakan FragmentManager.BackStackEntry API.

25 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.

26 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) 'onAttach()' dan kemudian bisa memanggil method-method 'Interface' untuk berkomunikasi dengan 'Activity' tersebut.

27 Berikut dibawah ini adalah contoh komunikasi 'Fragment' ke 'Activity':
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");

28 Sekarang 'fragment' tersebut bisa mengirim pesan ke 'activity' dengan memanggil method 'onArticleSelected()' (atau method-method lainnya di dalam 'interface') dengan menggunakan instan 'mCallback' dari interface 'onHeadlineSelectedListener'. 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' public void onListItemClick(ListView l, View v, int position, long id) { // Send the event to the host activity mCallback.onArticleSelected(position); }

29 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 MainActivity extends Activity implements HeadlinesFragment.OnHeadlineSelectedListener{ ... public void onArticleSelected(int position) { // The user selected the headline of an article from the HeadlinesFragment // Do something here to display that article }

30 Mengirim Pesan ke 'Fragment‘
'Activity' yang menjadi tempat penampung bisa mengirim pesan ke suatu 'fragment' dengan menangkap instan 'Fragment' dengan cara 'findFragmentById()', 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:

31 public static class MainActivity extends Activity implements HeadlinesFragment.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 {

32 // Otherwise, we're in the one-pane layout and must swap frags
// 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 = new ArticleFragment(); Bundle args = new Bundle(); 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(); }