CodeLab : ListView dengan SwipeRefreshLayout dan LoadMore

Transkripsi

1 CodeLab : ListView dengan SwipeRefreshLayout dan LoadMore Deskripsi Adakalanya ketika kita menginginkan aplikasi dapat melakukan load data secara bertahap (per-10 data misalnya) nah ini sudah menjadi case umum dimana hampir semua aplikasi yang berhubungan dengan data yang banyak dan ada di webservice / API pasti akan menampilkan proses ini. Menarik ListView kebawah untuk meload datadata terbaru (PullToRefresh) atau ketika ListView sudah pada baris paling bawah saat pengguna melakukan scroll secara vertical, aplikasi akan meload data lagi (LoadMore). Setelah mempelajari implementasi pada ListView di CodeLab sebelumnya sekarang kita akan fokus pada bagaimana menambahkan fungsionalitas PullToRefresh dengan SwipeRefreshLayout dan LoadMore dengan membuat Custom ListView.

2 Output :

3 Langkah langkah : 1. Buat project dengan nama SwipeRefreshandLoadMore dengan nama package yang dikehendaki (disini saya menggunakan com.sidiq.codelab.swiperefreshandloadmorelistview) kemudian klik next hingga finish. Tunggu sampai projectnya siap digunakan. 2. Buka build.gradle (Module: app) dan modifikasi code pada bagian dependecies menjadi seperti dibawah ini : dependencies { compile filetree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:22.2.0' compile 'com.android.support:support-v4:22.0.+' setelah selesai silakan Sync Gradle. Kita menggunakan compability lib support v4 karna SwipeRefreshLayout berada di library tersebut. 3. Sekarang kita akan membuat custom Listview dengan langkah-langkah sebagai berikut : a. Buat file xml baru untuk tampilan loadmore dari ListView dengan cara : Klik kanan pada layout New Layout resource file dan beri nama loadmore_view.xml. Silakan lengkapi codenya seperti berikut : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp"> <FrameLayout android:id="@+id/load_more_progress_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:visibility="gone" android:layout_centervertical="true" android:layout_centerhorizontal="true"> <ProgressBar android:layout_width="30dp" android:layout_height="30dp" android:layout_gravity="center" /> </FrameLayout> </RelativeLayout>

4 b. Pada package utama silakan buat class Java baru untuk Custom ListView dengan cara klik kanan pada package utama New Java Class beri nama LoadMoreListView.java dan lengkapi code-nya sebagai berikut : package com.sidiq.codelab.customswiperefreshandloadmorelistview; import android.content.context; import android.util.attributeset; import android.util.log; import android.view.layoutinflater; import android.view.view; import android.widget.abslistview; import android.widget.listadapter; import android.widget.listview; import android.widget.relativelayout; /** * Created by Sidiq on 04/08/2015. */ public class LoadMoreListView extends ListView implements AbsListView.OnScrollListener { private static final String TAG = LoadMoreListView.class.getSimpleName(); private OnScrollListener monscrolllistener; private LayoutInflater minflater; private View mfooterview; private View mloadmorestatusview; private OnLoadMoreListener monloadmorelistener; private boolean misloadingmore = false; private int mcurrentscrollstate; public LoadMoreListView(Context context, AttributeSet attrs) { super(context, attrs); init(context); public LoadMoreListView(Context context, AttributeSet attrs, int defstyle) { super(context, attrs, defstyle); init(context); public void setadapter(listadapter adapter) { mfooterview = (RelativeLayout) minflater.inflate(r.layout.loadmore_view, this, false); mloadmorestatusview = mfooterview.findviewbyid(r.id.load_more_progress_bar); addfooterview(mfooterview);

5 setloading(false); super.setadapter(adapter); private void init(context context) { minflater = (LayoutInflater) context.getsystemservice(context.layout_inflater_service); super.setonscrolllistener(this); public void setloadmorestatusview(view v, int statusviewid) { removefooterview(mfooterview); mfooterview = v; mloadmorestatusview = mfooterview.findviewbyid(statusviewid); addfooterview(mfooterview); public void setloadmorestatusview(view v) { removefooterview(mfooterview); mfooterview = v; mloadmorestatusview = mfooterview.findviewbyid(r.id.load_more_progress_bar); addfooterview(mfooterview); /** * Set the listener that will receive notifications every time the list * scrolls. * l * The scroll listener. */ public void setonscrolllistener(abslistview.onscrolllistener l) { monscrolllistener = l; /** * Register a callback to be invoked when this list reaches the end (last item * be visible) * onloadmorelistener * The callback to run. */ public void setonloadmorelistener(onloadmorelistener onloadmorelistener) { monloadmorelistener = onloadmorelistener;

6 public void onscroll(abslistview view, int firstvisibleitem, int visibleitemcount, int totalitemcount) { if (monscrolllistener!= null) { monscrolllistener.onscroll(view, firstvisibleitem, visibleitemcount, totalitemcount); if (visibleitemcount == totalitemcount) { if (mloadmorestatusview!= null) { mloadmorestatusview.setvisibility(view.gone); return; if (monloadmorelistener!= null) { boolean loadmore = firstvisibleitem + visibleitemcount >= totalitemcount; if (!misloadingmore && loadmore && mcurrentscrollstate!= SCROLL_STATE_IDLE) { setloading(true); onloadmore(); { public void onscrollstatechanged(abslistview view, int scrollstate) mcurrentscrollstate = scrollstate; if (monscrolllistener!= null) { monscrolllistener.onscrollstatechanged(view, scrollstate); public void setloading(boolean loading) { Log.d(TAG, "setloading: " + loading); misloadingmore = loading; mloadmorestatusview.setvisibility(loading? View.VISIBLE : View.GONE); public void onloadmore() { Log.d(TAG, "onloadmore"); if (monloadmorelistener!= null) { monloadmorelistener.onloadmore(); public void onloadmorecomplete() { setloading(false);

7 public interface OnLoadMoreListener { public void onloadmore(); pada code diatas kita memanipulasi beberapa fungsi dasar dari ListView untuk bisa melakukan action ketika posisi scroll sudah menyentuh bagian bawah layar. 4. Pada MainActivity.java silakan lengkapi codenya menjadi seperti berikut : package com.sidiq.codelab.customswiperefreshandloadmorelistview; import android.os.asynctask; import android.support.v4.widget.swiperefreshlayout; import android.support.v7.app.appcompatactivity; import android.os.bundle; import android.view.menu; import android.view.menuitem; import android.widget.arrayadapter; import java.util.linkedlist; public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener{ private LoadMoreListView lvitem; private SwipeRefreshLayout swipemain; private LinkedList<String> list; private ArrayAdapter<String> adapter; private int MaxPage = 5; private int currentpage = 0; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); lvitem = (LoadMoreListView)findViewById(R.id.lv_item); swipemain = (SwipeRefreshLayout)findViewById(R.id.swipe_main); list = new LinkedList<>(); populatedefaultdata(); //listener untuk loadmore lvitem.setonloadmorelistener(new LoadMoreListView.OnLoadMoreListener() { public void onloadmore() { if (currentpage < MaxPage) { new FakeLoadmoreAsync().execute(); else { lvitem.onloadmorecomplete(); );

8 swipemain.setonrefreshlistener(this); private void populatedefaultdata(){ String[] androidversion = new String[]{ "Not Apple", "Not Blackberry", "Cupcake", "Donut", "Eclair", "Froyo", "Gingerbread", "Honeycomb", "Ice cream sandwich", "Jelly Bean", "Kitkat", "Lollipop", "M Preview", "N (Coming soon on 2016)" ; for (int i = 0; i < androidversion.length; i++){ list.add(androidversion[i]); adapter = new ArrayAdapter<String>(MainActivity.this, android.r.layout.simple_list_item_1, android.r.id.text1, list); lvitem.setadapter(adapter); public void onrefresh() { new FakePullRefreshAsync().execute(); //Background proses palsu untuk melakukan proses delay dan append data di bagian bawah list private class FakeLoadmoreAsync extends AsyncTask<Void, Void, Void>{ protected Void doinbackground(void... voids) { try{ Thread.sleep(4000); catch (Exception e){ return null; protected void onpostexecute(void avoid) { super.onpostexecute(avoid); populateloadmoredata(); currentpage +=1; private void populateloadmoredata() { String loadmoretext = "Added on loadmore"; for (int i = 0; i < 10; i++){ list.addlast(loadmoretext); adapter.notifydatasetchanged(); lvitem.onloadmorecomplete();

9 lvitem.setselection(list.size() - 11); //Background proses palsu untuk melakukan proses delay dan append data di bagian atas list private class FakePullRefreshAsync extends AsyncTask<Void, Void, Void>{ protected Void doinbackground(void... voids) { try{ Thread.sleep(4000); catch (Exception e){ return null; protected void onpostexecute(void avoid) { super.onpostexecute(avoid); populatepullrefreshdata(); private void populatepullrefreshdata() { String swipepullrefreshtext = "Added after swipe layout"; for (int i = 0; i < 5; i++){ list.addfirst(swipepullrefreshtext); swipemain.setrefreshing(false); adapter.notifydatasetchanged(); lvitem.setselection(0); public boolean oncreateoptionsmenu(menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.menu_main, menu); return true; public boolean onoptionsitemselected(menuitem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getitemid(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; return super.onoptionsitemselected(item);

10 Cara kerja dari code diatas sebagai berikut : 1. Data default akan ditampilkan terlebih dahulu 2. Jika user scroll ke bawah dan ListView sudah mencapai bagian paling bawah dari batas layar maka fungsi load more akan dijalankan. Dan setelah data ditambahkan dibagian paling bawah dari list maka adapter akan direfresh dengan menggunakan perintah : notifydatasetchanged() 3. Jika user menarik listview ketika ada di posisi paling atas maka fungsi Pull To Refresh akan dijalankan. Sama seperti dengan load more namun bedanya Pull To Refresh akan menambahkan data dibagian atas dari list dan kemudian adapter akan direfresh dengan menggunakan perintah : notifydatasetchanged() 5. Silakan running project diatas pada device android atau emulator rekan-rekan 6. Code dapat didownload di :