簡単！Material Design の Swipe to Refreshの実装とカスタマイズ

Material Designのデザインガイドラインの1つにSwipe to Refreshがあります。
GmailやNewsStandなどに実装されているこんな感じのやつです。

実装してみたら結構簡単に導入できました。上の画像を実装したリポジトリはこちら。
以下手順です。

build.gradleにdependenciesを追加

support-v4:21.0のライブラリを利用します。

build.gradle

dependencies {
    compile 'com.android.support:support-v4:21.0.+'
}

レイアウトにSwipeRefreshLayoutを記述

ListViewやRecyclerViewを囲うようにSwipeRefreshLayoutを記述します。

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swipe_refresh"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@color/grey300"
        android:dividerHeight="@dimen/line_small"
        android:listSelector="@drawable/bg_feedback"
        android:scrollingCache="false" />

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

OnRefreshListenerを実装

上記レイアウトをinflateしているクラスで、OnRefreshListenerをセットします。

// onCreate()などで初期化します。
mSwipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        // 引っ張って離した時に呼ばれます。
        loadData();
    }
});

リフレッシュ後にsetRefreshing(false)を呼ぶ

画面の更新が終わったら、setRefreshing(false)を呼ぶ必要があります。
これを呼ばないと、引っ張って更新が終わってもクルクルがずっと表示され続けます。

if (mSwipeRefresh.isRefreshing()) {
    mSwipeRefresh.setRefreshing(false);
}

色のカスタマイズ

ローディングのデフォルトの色は黒です。
Gmailみたいに、1周目は緑、2周目は赤、3周目は青、4周目は黄のようにローディングの色を変えたい場合は、初期化時に設定できます。
ちなみに、色はMaterial Designのカラーパレットから選ぶのがよいです。

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