android SwipeRefreshLayout 구현하기(아래로 당겨서 새로고침)

이번 포스팅에서는 간단하게 ListView나 RecyclerView를 사용할 때 아래로 당겨서 새로고침을 표시해주는 SwipeRefreshLayout을 알아보고자 합니다.

SwipeRefreshLayout은 페이스북의 뉴스피드를 아래로 당겨서 새로고침을 해보면 아래 이미지처럼 동작하는 것을 볼 수 있습니다.

facebook의 SwipeRefreshLayout

사용 이유

많은 양의 데이터를 서버로부터 받아와 화면에 표시하려면 어느 정도의 시간이 걸립니다. 그 동안 화면이 멈춰있다면 사용자는 앱이 멈춘 것인가? 라는 생각이 들 수도 있기 때문에 이를 표시하기 위한 용도로 사용됩니다.

사용 방법

그럼, 함께 android에서 SwipeRefreshLayout을 사용하는 방법을 알아보도록 하겠습니다.

1. gradle 설정

먼저, 모듈 단위의 gradle의 dependencies 설정을 다음 내용을 추가합니다.

dependencies {
    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"  
}

2. 적용할 뷰 SwipeRefreshLayout으로 감싸주기

ListView나 RecyclerView를 SwipeRefreshLayout으로 감싸줍니다.

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/srl_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

3. 해당하는 화면에서 OnRefreshListener 등록

    srl_main.setOnRefreshListener { 
        // 사용자가 아래로 드래그 했다가 놓았을 때 호출 됩니다.
        // 이때 새로고침 화살표가 계속 돌아갑니다.
        // 서버통신~~
        srl_main.isRefreshing = false //서버 통신 완료 후 호출해줍니다.
    }

SwipeRefreshLayout에 OnRefreshListener를 등록하면, 계속 화살표가 돌아가는 화면이 나오게 됩니다.
이 안에서 데이터를 받아오도록 서버와 통신을 요청하고, 응답을 받게 되면 callback 이벤트 안에서 SwipeRefreshLayout의 isRefreshing 속성을 false로 지정해주면 되겠습니다.

정말 간단하죠?

[참고 문서]

앱에 스와이프하여 새로고침 추가  |  Android 개발자  |  Android Developers

 

Swiperefreshlayout  |  Android 개발자  |  Android Developers