AndroidのListViewでSwipeRefreshLayoutを使ってみた

こんにちは。岡田です。

今回は前回に続いて、ListViewについての記事を書く。
ListViewのRefreshするUIついて、色々な方法があると思うが、
今回はListViewを下にSwipeすることでRefreshができるSwipeRefreshLayoutを使ってみた。
SwipeRefreshLayoutは、Support Library revision 19.1.0から追加された。



Android Studioで開発を行い、SourceはGitHubで公開している。

前回のListViewの記事のSourceにMergeしている。

簡単に流れを下記に示す。

1. Layoutの設定
SwipeさせたいViewを囲む形のLayoutとなる。
ポイントはEmptyViewで、ListViewの隣にTextViewを並べたものでは表示がされなかった。
空の時にもSwipeでRefreshはさせたいので、もう一つSwipeRefreshLayoutを用意して
EmptyViewを含める必要があった。

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal">

    <android.support.v4.widget.SwipeRefreshLayout

        android:id="@+id/refresh"

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <ListView android:id="@+id/listView"

            android:layout_width="match_parent"

            android:layout_height="match_parent" />

    </android.support.v4.widget.SwipeRefreshLayout>

    <android.support.v4.widget.SwipeRefreshLayout

        android:id="@+id/refreshEmptyView"

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <ScrollView

            android:layout_width="match_parent"

            android:layout_height="match_parent">

            <TextView

                android:id="@+id/emptyView"

                android:text="@string/empty"

                android:layout_width="match_parent"

                android:layout_height="0dp"

                android:layout_gravity="center"

                android:gravity="center" />

        </ScrollView>

    </android.support.v4.widget.SwipeRefreshLayout>

</FrameLayout>

2. SwipeRefreshLayoutのListenerとLoading時の色の設定

mSwipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.refresh);

mSwipeRefreshEmptyViewLayout = (SwipeRefreshLayout) view.findViewById(R.id.refreshEmptyView);

setSwipeRefreshLayout(mSwipeRefreshLayout);

setSwipeRefreshLayout(mSwipeRefreshEmptyViewLayout);

private void setSwipeRefreshLayout(SwipeRefreshLayout swipeRefreshLayout){

   swipeRefreshLayout.setOnRefreshListener(mOnRefreshListener);

   swipeRefreshLayout.setColorSchemeResources(R.color.red, R.color.green, R.color.blue, R.color.yellow);

}

3. EmptyViewの設定
EmptyView用のSwipeRefreshLayoutをListViewに設定する。

mListView = (ListView) view.findViewById(R.id.listView);

mListView.setEmptyView(mSwipeRefreshEmptyViewLayout);

mListView.setAdapter(mAdapter);

4.  ListViewのRefresh
今回は、HandlerでWaitをいれた。
setRefreshingでfalseを入れると、SwipeRefreshLayoutの表示が解除される。

private SwipeRefreshLayout.OnRefreshListener mOnRefreshListener = new SwipeRefreshLayout.OnRefreshListener() {

    @Override

    public void onRefresh() {

        new Handler().postDelayed(new Runnable() {

            @Override

            public void run() {

                ImageCache.clearCache();

                refreshListViewData();

                mAdapter.notifyDataSetChanged();

                mSwipeRefreshLayout.setRefreshing(false);

                mSwipeRefreshEmptyViewLayout.setRefreshing(false);

            }

        }, 3000);

    }

};