ListViewをひっぱって更新できるSwipeRefreshLayout

今回のエンジニアブログを担当させていただきます、佐藤です。

前回に引き続き、最近よく見かけるシリーズで「SwipeRefreshLayout」について紹介させていただきます。

SwipeRefreshLayout
リストビューを下方向に引っ張ったりして更新をするときなんかに使えるSupport Libraryです。
Support Library revision 19.1.0 で追加されました。
Support Library revision 19.1.0 が使えるようにアップデートしただけで非常に簡単に実装ができました！

ビューを定義します。

<android.support.v4.widget.SwipeRefreshLayout  
     xmlns:android="http://schemas.android.com/apk/res/android"  
     android:id="@+id/swipe_refresh_layout"  
     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>

ListViewをSwipeRefreshLayoutで囲むと、ListViewを下方向へ引っ張ることができるようになります。

public class MainActivity extends Activity implements OnRefreshListener {
    private SwipeRefreshLayout mSwipeRefreshLayout;

    private ListView listView;

    private String[] items = {"aaa","bbbb","cccc","ddddd"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        // SwipeRefreshLayoutを作成  
        createSwipeRefreshLayout();

        // リストビュー作成  
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_expandable_list_item_1,items);
        listView = (ListView) findViewById(R.id.list);
        listView.setAdapter(adapter);
    }

    /**  
     * 引っ張って更新するSwipeRefreshLayoutを作成  
     */
    public void createSwipeRefreshLayout(){

        mSwipeRefreshLayout = (SwipeRefreshLayout)findViewById(R.id.swipe_refresh_layout);
        // 色指定  
        mSwipeRefreshLayout.setColorScheme(R.color.red,R.color.blue,R.color.green,R.color.yellow);
        mSwipeRefreshLayout.setOnRefreshListener(this);
    }

    /**  
     * 引っ張った時の処理  
     */
    @Override
    public void onRefresh() {
        // 引っ張ったタイミングでここに入る  

    }
}

ひとまずこれで、
　ListViewを下方向へ引っ張る→onRefresh()→ SwipeRefreshLayoutの更新アニメーション
という動きができます。

SwipeRefreshLayoutの更新アニメーションをsetColorScheme()で指定することが可能ですが、リソースのidで指定しなくてはいけないみたいです。。。
少し面倒ですが、このようなxmlファイルをvaluesフォルダに追加する必要があります。

<resources >
    <color name="red">#ff0000</color>
    <color name="blue">#0000ff</color>
    <color name="green">#00ff00</color>
    <color name="yellow">#ffff00</color>
</resources>

更新アニメーションでは指定した色を順番に表示するので、2色を交互に指定したり組み合わせでちょっと面白い動きにもできそうです。

また、このサンプルではアニメーションがずっと再生されてしまいますが、SwipeRefreshLayoutのsetRefreshing(false)で止めることができます。
引っ張った時以外にも、setRefreshing(true)で好きなタイミングでアニメーションさせることも可能です。

簡単にListViewの引っ張って更新処理が実装できるので是非試してみてください！

ListViewをひっぱって更新できるSwipeRefreshLayout

採用情報