Fragment di WarPlos

2 minute read

Studi kasus kali ini adalah tentang Fragment dengan app sederhana warplos yaitu app yang menampilkan profil usaha kecil menengah di daerah Bangkingan RW2 surabaya dimana pokok pembahasannya adalah nantik warplos bisa menyesuaikan tampilan saat di run di phone atau tablet,

Ketika di run di phone dia akan menampilkan terpisah antara Listview dengan FragmentDetail class maksudnya dengan 2screen yang berbeda, sebaliknya untuk tablet karena memiliki screen yang large dia ListView dan DetailFragment akan ditampilkan dalam satu screen (salah satu keunggulan Fragment).

Structur app warplos

jadi di app Warplos nantinya ada 2activity yaitu MainActivity dan WarPlosDetailActivity dimana untuk MainActivity akan berfungsi menampilkan list jika FragmentContainer tidak sama dengan null yang berarti akan menampilkan layour-large untuk tablet maka DetailFragment akan ditampilkan dalam satu screen dan jika sebalikna Fragment container null maka layout akan merujuk pada standart layout yang berart jika list di klik maka akan memanggil class WarPlosDetailActivity, kemudian app Warplos memiliki 2 class Fragment yaitu WarPlosListFragment dan WarPlosDetailFragment dimana untuk class WarPlosListFragment berisi list beberapa nama umkm dan untuk class WarPlosDetailFragment menampilkan data detail dari nama umkm yang clik di layar dan jugak di app Warplos terdapat class WarplosData dimana class tersebut berisi tentang array yang diperlukan oleh class WarPlosDetailFragment dan WarPlosListFragment.

Foo
tampilan warplos di tablet
Foo
tampilan warplos di di phone

langkah langkah pengerjaan WarplosApp

Langkah awal yang saya buat adalah membuat class WarplosData berisi data array nama dan descripsi dari umkm di bangkingan rw2 begini umlnya

Foo
uml class WarplosData

yang nantinya data data dari class ini dipanggil oleh class WarPlosDetailFragment dan WarPlosListFragment.

lalu saya membuat class WarPlosDetailFragment untuk mencoba menampilkan Data detail random yang diambil dari class WarplosData berikut umlnya:

Foo
uml class WarPlosDetailFragment

setelah update layout DetailFragment dan memanggilnya di MainActivity percobaan pertama hasinya seperti gambar dibawah ini

Foo
test data deskripsi

selanjutnya adalah mencoba menampilkan satu layar dengan dua Fragment untuk tampilan yang akan peruntukkan table untuk itu saya membuat class WarPlosListFragment seperti ini umlnya:

Foo
uml class WarPlosListFragment

lalu update layoutnya dan memanggilnya di dalam method onCreate class MainActivity tampilannya sebagai berikut

Foo
tampilan 2fragment satu screen

alhamdulillah semua data bisa ditampilkan di screen baik untuk list nama dan deskripsi selanjutnya adalah membuat bagaimana tampilan saat WarPlos berjalan di phone dan tablet menjadi berbeda maka saya buat folder layout lagi di directory res dengan nama layout-large dimana ini akan berisi layout activity_main.xml yang berbeda isi dengan yang terdapat di directory layout kali ini saya jugak akan membuat class WarPlosDetailActivity untuk mengontrol class WarPlosDetailFragment dan sebagai tujuan intent dari class MainActivity saat WarPlos berjalan di phone berikut umlnya

Foo
uml clas WarPlosDetailActivity

dan langkah terkahir adalah update class MainActivity seperti ini umlnya

Foo
uml clas MainActivity

ada beberapa catatan misal backstack transaction di fragment gimana fungsinya adalah ketika user klik tombol kembali waprlos akan menuju list yang sebelumnya di klik , dan untuk issues ketika app berjalan tiba tiba kita ganti rotasi device itu jugak menjadi tambahan tambahan untuk pembedahan Fragment kali ini dan saya sempet jugak mengamali deadlock saat menuliskan di blog ini ….. done!

Tags:

Updated: