[Android Tips] SwipeRefreshLayout で Pull to Refresh を実装する

SwipeRefreshLayout

Support Library revision 19.1.0 で SwipeRefreshLayout が追加されました。これを使うと ListView などを下方向にスワイプしてデータを更新する (Pull to Reflesh) を実装できます。いままで OSS を利用するしか方法がありませんでしたが、Support Library だけで実装できるようになりました。

使ったことがなかったので、試しに使ってみました。

SwipeRefreshLayout の使いかた

前提条件として Support Library revision 19.1.0 以上が使える状態にしておく必要があるので、必要なかたはアップデートしてください。

まずレイアウトですが、次のように ListView の親として、包み込むような感じで配置します。

<android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/refresh"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/list" />
</android.support.v4.widget.SwipeRefreshLayout>

次に Activity の実装です。基本的には↑の実装だけで動作しますが、このままではプログレスが止まらないので SwipeRefreshLayout.OnRefreshListener を実装しましょう。次の実装では、3秒後にプログレスが止まるようにしています。またプログレス中は、バーの色が4色順番に切り替わるアニメーションが実行されます。デフォルトでは黒なので、SwipeRefreshLayout#setColorScheme() で任意の色に変更しましょう。

package com.example.sampleproject;

import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.ActionBarActivity;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends ActionBarActivity {
  
  private final MainActivity self = this;
  private SwipeRefreshLayout mSwipeRefreshLayout;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    // SwipeRefreshLayoutの設定
    mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.refresh);
    mSwipeRefreshLayout.setOnRefreshListener(mOnRefreshListener);
    mSwipeRefreshLayout.setColorScheme(R.color.red, R.color.green, R.color.blue, R.color.yellow);
    
    // ListViewにデータをセットする
    ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(self, R.array.list, android.R.layout.simple_list_item_1);
    ListView listView = (ListView) findViewById(R.id.list);
    listView.setAdapter(adapter);
  }
  
  private SwipeRefreshLayout.OnRefreshListener mOnRefreshListener = new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
      // 3秒待機
      new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
          mSwipeRefreshLayout.setRefreshing(false);
        }
      }, 3000);
    }
  };
  
}

実行結果は次のようになります。

SwipeRefreshLayout#setRefreshing(true) を呼び出すことで、任意のタイミング(例えば OptionMenu　からの動作など)でプログレスを開始させることができます。

まとめ

サードパーティ製の OSS などを使わずに、簡単に Pull to Refresh が実装できました。データの更新処理はよくある実装ですので、ぜひ活用していきたいですね。

参考

• SwipeRefreshLayout | Android Developers
• [Android] Support Library に追加された SwipeRefreshLayout | adakoda
• AndroidにSwipeRefreshLayout(Pull To Refresh)が追加されました | EGG 開発ブログ