안드로이드 무한스크롤 기초 - Infinite Scroll, Endless Scroll

기본적으로 RecyclerView에서 적용하며 세 단계로 이해하면 된다.

 

• 스크롤이 끝에 닿았을 경우 null을 추가하고 어댑터에 알린다.(onScrollListener)
• 새로운 데이터를 가져온 후
• null item 제거 한 후 가져온 데이터를 추가하고 어댑터에 알린다.

검색을 해보니 대다수가 서버에서 API를 통해 데이터를 받아오는 게 대다수의 내용이었다. 물론 내가 검색을 잘 하지 못했을 가능성이 더 높지만 일단 나는 서버와의 통신없이 로컬에서만 만들어봤다. 참고자료는 인도형님의 유튜브 영상이다. 아래 글도 매우 도움됐다

https://medium.com/@ydh0256/android-recyclerview-%EC%9D%98-%EC%B5%9C%EC%83%81%EB%8B%A8%EA%B3%BC-%EC%B5%9C%ED%95%98%EB%8B%A8-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EA%B0%90%EC%A7%80%ED%95%98%EA%B8%B0-f0e5fda34301

[Android] RecyclerView 의 최상단과 최하단 스크롤 이벤트 감지하기

Adapter에서 getItemViewType 메서드와 recyclerview에서의 scrollListener 메서드를 사용한다.

const val ITEM = 1
const val LOADING = 0
        
class RvAdapter(val items: MutableList<String?>) : RecyclerView.Adapter<ViewHolder>() {
	
    // 빠른 구현을 위해 ViewHolder들을 inner로 선언했다 
    inner class ItemViewHolder(itemView: View) : ViewHolder(itemView) {
        fun bindItems(item: String) {
            val message = itemView.findViewById<TextView>(R.id.rv_item_tv)
            message.text = item
        }
    }
    inner class LoadingViewHolder(itemView: View) : ViewHolder(itemView) {
        val progressBar = itemView.findViewById<ProgressBar>(R.id.rv_loading_pb)!!
    }

    override fun getItemViewType(position: Int): Int {
        return if (items[position] != null) {
            ITEM
        } else {
            LOADING
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return if (viewType == ITEM) {
            val view = LayoutInflater.from(parent.context).inflate(R.layout.rv_item, parent, false)
            ItemViewHolder(view)
        } else {
            val view =
                LayoutInflater.from(parent.context).inflate(R.layout.rv_loading, parent, false)
            LoadingViewHolder(view)
        }
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        if (holder is ItemViewHolder) {
            holder.bindItems(items[position]!!)
        }
    }

    override fun getItemCount(): Int {
        return items.size
    }
}

ViewHolder를 2개를 만든다.

Item을 띄울 뷰홀더, progressbar를 띄울 뷰홀더. 만들어둔 뷰홀더를 onBindViewHolder에서 스마트 캐스트를 위해 is로 처리한다. 

 

onCreateViewHolder에서 viewType을 받을수있는데, 이 viewType을 만들어주기위해 getItemViewType 메서드를 사용해야한다. 아이템이 null이면 loading으로, null이 아니면 item으로 타입을 반환시켜 각각에 맞는 뷰홀더에 연결시켜준다.

class MainActivity : AppCompatActivity() {

    private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }
    var isLoading = false
    private val testItems = mutableListOf<String?>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)


        for(i in 1 until 10){
            testItems.add("dummy item $i")
        }

        binding.rv.layoutManager = LinearLayoutManager(baseContext)
        binding.rv.adapter = RvAdapter(testItems)
        binding.rv.addOnScrollListener(object : RecyclerView.OnScrollListener(){
            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                super.onScrolled(recyclerView, dx, dy)
                val layoutManager = binding.rv.layoutManager as LinearLayoutManager
                if(!isLoading){
                    if(!binding.rv.canScrollVertically(1)){
                        isLoading = true
                        getMoreData()
                    }
                }
            }
        })

    }

    private fun getMoreData() {
        testItems.add(null)
        binding.rv.adapter?.notifyItemInserted(testItems.size - 1)
        testItems.removeAt(testItems.size - 1)
        val currentSize = testItems.size
        for(i in currentSize+1 until currentSize+10){
            testItems.add("dummy item $i")
        }
        binding.rv.adapter?.notifyDataSetChanged()
        isLoading = false
    }
}

getMoreData 무한스크롤의 작동과정이다. canScrollVertically의 인자로 방향이 들어가는데, 최상단은 -1, 최하단은 1이 들어간다. 

1. 데이터셋으로 사용되는 testItems에 null을 추가해서 progressbar를 띄운다.
2. notifyItemInserted로 현재 progressbar위치에 아이템이 들어올 것이라고 어댑터에 알려준다.
3. null 추가한 것을 삭제하고
4. 현재 index를 새 시작지점으로 만든다.
5. dataset에 변화가 생겼으니 notifyDatasetChanged로 어댑터에 또 알려주고
6. 데이터가 다 들어왔으니 isLoading을 false로 바꿔주면 된다.

이때 스크롤에서 실수할 수 있는 부분이 isLoading을 getMoreData 이후에 놓는 것이다.

isLoading = true를 함수 호출이후에 놔버리면 최초 1회만 작동하고 isLoading값이 항상 true이기 때문에 무한스크롤이 안된다.  diffutil을 사용하게되면 notify과정을 그냥 submitList로 바꿔주면 된다. 

 

"댓글, 공감 버튼 한 번씩 누르고 가주시면 큰 힘이 됩니다"