94
90

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-15

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

ezgif.com-optimize.gif

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

#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);
94
90
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
94
90

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?