[Android Kotlin] Paging 3.0 리스트에 Empty View와 Item Listener 구현하기

리스트를 구현하게 되면, 아래 그림과 같이 데이터가 없는 화면을 표시해야 하는 경우가 많습니다.

 

 

이번 시간에는 Paging 3.0 리스트에서 Empty View를 표시하는 방법에 대해서 알아보겠습니다.

 

개발 코드는 이전에 구현했던 프로젝트에 이어서 개발하겠습니다.

이전 개발이 궁금하신 분은 아래 링크를 확인해 주세요.

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

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

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

 

---

 

1. RecyclerView 가 있는 xml파일(activity_lorempicsum_list.xml)에 Empty View를 추가합니다.

 

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

    <androidx.constraintlayout.widget.ConstraintLayout
        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.appcompat.widget.AppCompatTextView
            android:id="@+id/empty_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="80sp"
            android:textColor="#333333"
            android:textStyle="bold"
            android:text="@string/empty_msg"
            android:background="#e0e0e0"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

 

위의 코드와 같이 SwipeRefreshLayout 안에 Layout을 추가하고, RecyclerView 위에 Empty View(저는 TextView로 했습니다.)를 추가해줍니다.

그리고, Activity에서 Empty View 의 visible을 이용하여 보이고 / 안보이고를  설정할 예정입니다.

 

---

 

2. 리스트가 있는 Activity(LoremPicsumListActivity.kt)에서 PagingDataAdapter에 상태를 체크하는 listener를 연결하여 상태에 따른 Empty View 표시 여부를 설정합니다.

 

override fun initView() {
    ...
    
    imageListAdapter.addLoadStateListener {
        if(it.append.endOfPaginationReached) {
            binding.emptyView.isVisible = imageListAdapter.itemCount == 0
        } else {
            binding.emptyView.isVisible = false
        }
    }
}

 

endOfPaginationReached 값으로 로딩이 끝났음을 확인하여, adapter의 item 개수를 확인하여 Empty View를 표시합니다.

 

이렇게해서 Empty View 표시 방법은 완료하였습니다.

다음으로 item click listener 연동 방법에 대해 설명 드립니다.

 

---

 

item click listener 는 사실 고민을 좀 했습니다.

너무나 쉬운 부분이고, 특별한 내용도 없다보니.... 그래도 혹시나 궁금해하시는 분이 계실까봐서...

여기에 낑겨넣었습니다. 양해 부탁드려요.

 

1. item click 인터페이스를 만듧니다.

저는 adapter 파일(LoremPicsumListAdapter.kt)에 만들었습니다.

 

interface OnImageItemClickListener {
    fun onImageItemClicked(item: ImageInfo?)
}

 

2. adapter 클래스에 파라메터라 listener를 전달 받습니다.

 

class LoremPicsumListAdapter(private val listener: OnImageItemClickListener?):
    PagingDataAdapter<ImageInfo, LoremPicsumListAdapter.ImageViewHolder>(
    ....

 

3. ViewHolder 클래스의 init에서 view의 click 이벤트와 연동을 시킵니다.

 

inner class ImageViewHolder(private val binding: ListItemImageBinding):
    RecyclerView.ViewHolder(binding.root) {

        init {
            binding.root.setOnClickListener {
                listener?.onImageItemClicked(binding.item)
            }
        }

        ...
}

 

4. adapter를 선언하는 파일(LoremPicsumListActivity.kt) listener를 구현합니다.

 

class LoremPicsumListActivity:
    BaseActivity<ActivityLorempicsumListBinding>(R.layout.activity_lorempicsum_list), 
    OnImageItemClickListener {

    ...
    private val imageListAdapter: LoremPicsumListAdapter = LoremPicsumListAdapter(this)

    ...
    
    override fun onImageItemClicked(item: ImageInfo?) {
        item?.id?.let { imageId ->
            LoremPicsumDetailActivity.createIntent(this, imageId).also {
                startActivity(it)
            }
        }
    }
}

 

위와 같이 구현하여 아이템이 click되었을때 상세화면을 표시하도록 구현하였습니다.

 

---

 

전체 소스 코드는 아래 Github 링크를 확인해주세요.

GitHub - rcbuilders/RemindSampleApp: https://heeeju4lov.tistory.com/ 블로그에서 Android + Kotlin 강좌에서 사용함.