• 2024/3/27
• 3分

【Kotlin/Android】Pull to Refresh(プルリフ)の実装方法！SwipeRefreshLayout

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Android Studio：Flamingo
• Kotlin：1.8.20

Pull to Refresh(プルリフ)とは？

Pull to Refresh(プルリフレッシュ)とは画面上のコンテンツを上から下に引っ張ってコンテンツを更新する操作のことです。主にScrollViewやRecyclerViewなどのUIコンポーネントで使用されます。

プルリフレッシュを実装する手順

Kotlinでプルリフレッシュを実装するためにはSwipeRefreshLayoutをプルリフレッシュを実装したいViewの親に設置します。SwipeRefreshLayoutを使用するためには

1. SwipeRefreshLayoutの導入
2. SwipeRefreshLayoutをScrollViewなどの親に設置
3. Kotlinでプルリフレッシュ時の処理などを定義

SwipeRefreshLayoutの導入

SwipeRefreshLayoutを使用できるようにするにはAndroidX Legacy Supportライブラリを導入する必要があります。「build.gradle(app)」の中に以下を追加します。

build.gradle(app)
implementation 'androidx.legacy:legacy-support-v4:1.0.0'

SwipeRefreshLayoutをScrollViewなどの親に設置

プルリフレッシュ機能を実装したいViewの親にSwipeRefreshLayoutを設置します。

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/swipe_refresh_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <View
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#23527c" />

            <View
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#bd9907" />

            <View
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#dd6b24" />

        </LinearLayout>

    </ScrollView>

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Kotlinでプルリフレッシュ時の処理などを定義

レイアウトファイルに設置しただけではローディング処理は走りますが、ローディングが終了せず、更新処理も走りません。そのためにはsetOnRefreshListenerメソッドで更新処理を定義して最後にsetRefreshingメソッドにfalseを渡せばローディングが終了します。

val swipeRefresh: SwipeRefreshLayout = findViewById(R.id.swipe_refresh_layout)

// プルリフレッシュされた時に実行したい処理を実装
swipeRefresh.setOnRefreshListener {
    val handler = Handler(Looper.getMainLooper())
    handler.postDelayed({
        // 擬似的に２秒間遅延させているが実際に更新したい処理を定義すればOK
        // ローディング終了 
        swipeRefresh.setRefreshing(false)
    }, 2000)
}

インジケータの色を変更する

表示されるインジケータの色を変更するにはsetColorSchemeColorsメソッドを使用し、背景色を変更するにはsetProgressBackgroundColorSchemeColorメソッドを使用します。

// インジケータの色
swipeRefresh.setColorSchemeColors(Color.RED)

// 背景色
swipeRefresh.setProgressBackgroundColorSchemeColor(Color.BLACK)

iOSの実装はこちら

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。