AndroidアプリにPull-to-Refresh（スワイプ更新）を実装する方法をわかりやすく解説

AndroidのPull-to-Refreshとは？

Androidにおける「Pull-to-Refresh」（プルトゥリフレッシュ）は、「Swipe-to-Refresh（スワイプで更新）」とも呼ばれるUIパターンです。画面を上から下へスワイプすると、setOnRefreshListenerに登録した処理が実行され、リストやコンテンツの再読み込みなどを行うことができます。GmailやTwitterなど、多くの定番アプリでも採用されている直感的な操作です。

本記事では、AndroidのSwipeRefreshLayoutを使って、Pull-to-Refresh機能を実装する手順を具体的なコード例とともに解説します。

ステップ1：新規プロジェクトを作成する

まず、Android Studioで新しいプロジェクトを作成します。メニューから「File → New Project」を選択し、必要な情報を入力してプロジェクトを作成しましょう。

ステップ2：activity_main.xmlにレイアウトを記述する

次に、res/layout/activity_main.xmlに以下のコードを追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:app = "https://schemas.android.com/apk/res-auto"
    xmlns:tools = "https://schemas.android.com/tools"
    android:id = "@+id/swipeRefresh"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity">
<LinearLayout
    android:layout_width = "wrap_content"
    android:gravity = "center"
    android:layout_height = "wrap_content">
    <TextView
        android:id = "@+id/text"
        android:textSize = "30sp"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "Hello World!"/>
</LinearLayout>
</android.support.v4.widget.SwipeRefreshLayout>

このコードでは、親レイアウトとしてSwipeRefreshLayoutを配置しています。ユーザーがこのレイアウト上でスワイプ操作を行うと、子ビューが更新される仕組みです。

ステップ3：MainActivity.javaにリスナーを実装する

続いて、src/MainActivity.javaに以下のコードを記述します。

package com.example.andy.myapplication;

import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    SwipeRefreshLayout swipeRefresh;
    static int i = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final TextView textView = findViewById(R.id.text);
        swipeRefresh = findViewById(R.id.swipeRefresh);
        swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                i++;
                textView.setText("Tutorialspoint.com "+i);
                swipeRefresh.setRefreshing(false);
            }
        });
    }
}

このコードのポイントは、setOnRefreshListenerでリスナーを登録している点です。ユーザーが親レイアウトをスワイプすると、onRefresh()メソッドが呼び出されます。ここでは、スワイプされた回数をカウントし、その値をTextViewに表示するようにしています。

swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        i++;
        textView.setText("Tutorialspoint.com "+i);
        swipeRefresh.setRefreshing(false);
    }
});

なお、swipeRefresh.setRefreshing(false)を呼び出すことで、更新完了後にインジケーター（くるくる回るローディング表示）を非表示にできます。実際のアプリ開発では、ここでネットワーク通信などによるデータ取得を行い、完了後にこのメソッドを呼ぶのが一般的な実装パターンです。

アプリを実行して動作を確認する

それでは、アプリを実際に実行してみましょう。実機のAndroidスマートフォンをパソコンに接続している前提で進めます。Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。デバイスを選択して実行すると、最初は以下のような初期画面が表示されます。

この状態で画面を上から下へスワイプすると、TextViewのテキストが更新され、以下のように表示内容が変化します。

まとめ

SwipeRefreshLayoutを使えば、数行のコードを追加するだけで簡単にPull-to-Refresh機能を実装できます。ポイントは以下の3つです。

• レイアウトXMLでSwipeRefreshLayoutを親要素として配置する
• setOnRefreshListener()で更新時の処理を登録する
• データ更新が完了したらsetRefreshing(false)でインジケーターを止める

RecyclerViewやListViewと組み合わせれば、ニュースアプリやSNSアプリのような自然なコンテンツ更新体験を提供できるので、ぜひ活用してみてください。