[Android Kotlin] 페이징 리스트에 리플래시(SwipeRefreshLayout) 구현하기

앱개발에서 빠지지 않는 리스트(RecyclerView)를 구현하면, 당연히 리플래시(리스트 갱신) 기능이 필수적으로 들어갑니다.

안드로이드에서는 리스트 리플래시를 아주 쉽게 할수 있도록 라이브러리를 제공하고 있습니다.

이를 이용하여 구현해보도록 하겠습니다.

 

예제는 이전에 구현했던 프로젝트에 하겠습니다.

이전 개발 내용은 아래 게시물을 확인해 주세요.

Paging 3.0 + MVVM + Flow를 이용하여 리스트 구현하기

Koin + MVVM + Coroutine + Flow 를 이용한 상세화면 만들기

 

---

 

1. build.gradle(모듈 수준)에 리플래시 라이브러리를 추가합니다.

 

dependencies {

    ...
    
    // swipe refresh
    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"
}

 

---

 

2. RecyclerView가 있는 layout(xml) 파일(activity_lorempicsum_list.xml)에 RecyclerView를 감싸는 SwipeRefreshLayout을 추가합니다.

 

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

 

위와 같이 RecyclerView를 감싸주는 것만으로도 리플래시 UI는 준비가 완료되었습니다.

이제 코드상으로 SwifeRefreshLayout과 RecyclerVIew, Adapter와 연동을 시켜주기만 하면 됩니다.

 

---

 

3. Activity(LoremPicsumListActivity.kt)에 리플래시 관련 코드를 추가할 차례입니다.

 

override fun initListener() {
    super.initListener()
    binding.apply {
        swipeLayout.setOnRefreshListener { imageListAdapter.refresh() }
    }

    lifecycleScope.launchWhenCreated {
        imageListAdapter.loadStateFlow.distinctUntilChangedBy { it.refresh }
            .filter { it.refresh is LoadState.NotLoading }
            .collect {
                binding.swipeLayout.isRefreshing = false
            }
    }
}

 

 

위의 코드에서 initListener() 함수는 BaseActivity를 상속받았기 때문으로, 아래 게시물 링크를 참고해주세요.

 

DataBinding을 결합한 BaseActivity 만들기

 

위의 코드의 구현은 2가지로 사용자가 리스트의 맨위에서 아래로 제스춰를 했을때 swipeLayout의 Listener로 동작에 대한 이벤트가 전달되어 list adapter에서 refresh를 요청하게 됩니다.

그리고, list adapter의 refresh의 상태를 감지하여 refresh 프로그래스 UI를 닫는 코드를 추가하였습니다.

 

이제 리플래시 관련 구현은 완료되었습니다.

코드는 몇줄 없죠?!!

 

이제 실행해서 리스트에서 아래로 제스춰를 하시면 아래와 같은 화면을 보시고, 리플래시가 종료되면 프로그래스가 사라지는 것을 확인하실수 있습니다.