Sebelumnya silakan cobain dulu contoh apk yg sudah jadinya dari project ini.
Setelah pada postingan saya sebelumnya kita telah belajar Cara Membuat Custom Font di Android kali ini kita akan mencoba belajar membuat view pager.
Ok, seperti biasa buat project baru (gradle). Isi nama aplikasi dan nama package sesuai dengan yang kamu inginkan lalu tap 'Create'.
Masuk folder app (pada folder project) dan buka file build.gradle, lalu cari line minSdkversion dan jika nilainya lebih dari 10 maka ganti menjadi 10.
Jika saat tap 'Add to Project' gak ada pilihan library tersebut berarti di dalam folder 'sdcard.aide' belum tersimpan kumpulan library android_m2repository. Solusi, buka file build.gradle dan cari bagian 'dependencies' lalu tambahkan line ini
'com.android.support:support-v4:+' lalu save dan biarkan aide mendownload library android_m2repository. Proses downloadnya termasuk library yang lain seperti support v7 dan v13. Jadi jika koneksi internetnya kurang kenceng harus sedikit sabar, namun setelah library-library tersebut terdownload apabila kita membutuhkan kita tinggal meng-import dan gak perlu download lagi.
Sekarang mulai mainan layout, masuk ke folder src/main/res/layout/ dan edit file main.xml. tambahkan object ViewPager disana.
Lanjut ke pembuatan layout.
Buat layout baru untuk digunakan sebagi tampilan dari setiap page dari viewpager yang akan kita buat.
Buat layout sebanyak jumlah halaman pager yang kita inginkan. Dalam contoh ini kita akan membuat 3 halaman pager jadi kita akan membuat 3 layout.
Kita mulai dengan layout pertama, tap 'Add New Xml File' dan namai filenya dengan yang agan mau, dalam contoh ini saya menaminya halaman_1.
Edit filenya sesuai kebutuhan agan.
ulangi pembuatan file sampai 3 file.
Ok, pembuatan layout untuk masing-masing halaman pager telah selesai, sekarang kita akan membuat tiga file java yang akan berfungsi meng-inflate (menampilkan) masing-masing layout tadi.
Masuk ke folder dimana file 'MainActivity.java' berada.
Tap 'Add New Class...' dan buat class dengan nama terserah agan, di contoh ini ane namai 'Halaman1' (Halaman1.java).
Sekarang edit isinya dan buat menjadi extends Fragment, saat mengimport class Fragmet harus diperhatikan yang diimport adalah class Fragment dari library support v4 (android.support.v4.app.Fragment), bukan class Fragment dari package android.app (android.app.Fragment).
Sebenarnya bisa aja kita menggunakan android.app.Fragment akan tetapi nanti kita akan membutuhkan library support v13. dan library ini diperuntukan untuk sdk 13 ke atas.
Simpan filenya dan buatlah dua class lagi dengan nama Halaman2.java dan Halaman3.java.
Edit isinya seperti class Halaman1.java. yang membedakan adalah, jika class halaman1.java menampilkan (meng-inflate) layout halaman_1.xml maka untuk class Halaman2.java di dalam method onCreateView harus meng-inflate layout halaman_2.xml.
begitu juga class Halaman3.java yaitu meng-inflate layout halaman_3.xml.
Baiklah sekarang kita sudah mempunyai 3 layout dan 3 class yg bertugas menampilkan layout tersebut.
selanjutnya kita akan membuat class adapter yang bertugas menyatukan ketiga halam tersebut.
buatlah class baru dengan nama terserah (dalam contoh saya namai 'Adapter' (Adapter.java).
Edit isi classnya dan ubah menjadi extends FragmentPagerAdapter
Tap pada ikon error dan implements semua methodnya.
Buat constructor dengan parameter FragmentManager dan panggil super();
Pada method getcount() kita isi dengan jumlah halaman pager yg kita inginkan, karena kita akan membuat 3 halaman pager maka kita beri nilai 3 pada nilai kembalian (return value) dari method getcount().
Method getItem() adalah method yg digunakan oleh adpater untuk membuat (memanggil) fragment untuk setiap halaman pager. Dan method ini dipanggil sebanyak jumlah halaman yang kita buat dengan membawa nilai parameter (p1) dimulai dari nilai nol untuk halaman pertama sampai nilai dua untuk halaman ketiga. Karena kita akan menampilkan Frgament1.java untuk halaman satu, Fragment2.java untuk halaman dua dan Fragment3.java untuk halaman 3, maka kita harus membaca nilai parameter p1 dan kita return fragment sesuai dengan nilai p1. jika p1 nol berarti adapter sedang membuat halaman pertama maka kita beri kembalian fragment1.java, begitu seterusnya. (menggunkan if else).
OK, sekarang kita telah mempunyai 3 layout, 3 class fragment untuk meng-inflate 3 layout tersebut dan class adapter untuk menyatukan tiga fragment tersebut.
Sekarang langkah terakhir adalah menggabungkan (mempertemukan) object adapter dengan object view pager yang ada di layout main.xml.
Seperti kita ketahui layout main.xml ditampilkan oleh class mainActivity.java jadi kita akan mengubah isi file mainActivity.java.
Ubah dari extends Activity menjadi 'FragmentActivity'.
Import class FragmentActivity dari support library v4.
buat 3 variable private
private Fragmentmanager fm;
private ViewPager vp;
private Adapter adapter;
Fragmentmanager akan kita gunakan untuk membuat object adapter (pada class adapter yg kita buat tadi constructornya meminta parameter fragmentmanager).
Viewpager adalah pager yang akan kita isi dengan adapter tadi.
Inisialisasi ketiga variable tadidi dalam method oncreate().
dan set adapter ke viewpager.
Ok, selesai sudah,,,,,sekarang waktunya kita compile projectnya. dan liat hasilnya. Jika tidak ada keslahan maka hasilnya seperti ss berikut ini.
Download apk demonya
Download source code
Referensi :
http://developer.android.com/reference/android/support/v4/view/ViewPager.html
