🙌무한 스크롤 손수 구현해보다.

들어가기 전에

영화를 검색한 후 영화 포스터들을 화면에 띄울 때 "무한 스크롤 " 을 구현해야했다.

무한 스크롤을 손수 구현하면 겪은 내용에 대해 정리해보려한다.

 

무한 스크롤의 내용을 먼저 정리해보자 

무한 스크롤이란?

무한 스크롤이란 모든 데이터를 한번에 로드하는 것이 아니라 사용자가 아래로 스크롤할 때 콘텐츠가 동적으로 로드되는 것을 말한다.

모든 데이터를 한번에 가져오는 것이 아니기 때문에 로딩 시간이 줄어든다는 장점이 있다!

검색어에 따라서 해당하는 영화 목록을 page별로 가져오도록 설계된 서버 api를 이용해서 구현하기 위해 page를 이용한 무한 스크롤을 구현해보았다.

 

바로 결과부터 보장

구현된 무한 스크롤이다 !! 

 

무한 스크롤 판단

아래 로직에 따라 스크롤이 최하단에 도달했음을 판단해서 다음 페이지 데이터를 가져왔다.

로딩이 되고 있는건가?! 

그런데 페이지가 넘어갈 때마다 로딩이 되고 있음을 확인할 수 있으면 좋겠다. 

그렇게 ... 로딩 레이아웃에 추가해주려고 했는데 ... 여기서 문제가 생겼다.!!

문제 발생

 

그리드뷰를 통해 영화 포스터가 뜨다가 다음 페이지 데이터를 가져올 때까지 로딩을 표시하고자 했다.

첫 번째 시도 :  단순히 레이아웃 파일에 Lottie의 로딩 이미지를 추가해주었다.

 

결과는 아래와 같았다...

 

 

로딩이 있는지도 확인하기 어려웠고 제대로 구현되지 않았다.

두 번째 시도는 BaseAdapter를 상속받은 클래스에서 여러 뷰를 보여주는 것이다.

 

로딩 여부 정보를 프래그먼트에서 어댑터로 전달해주고 여부에 따라 뷰를 보여주는 방식으로 시도해보았다.

마지막으로 어댑터에서 로딩 여부 정보를 받는 메서드를 작성해주고 해당 값에 따라서 뷰를 달리해주었다.

 

아래 코드를 보자.

최하단이라면 로딩을 true로 설정해주고, page를 1만큼 증가시키 후 다음 데이터를 호출해주었다.

 binding.movieGridView.setOnScrollListener(
            object : AbsListView.OnScrollListener {
                private var isLoading = false

                override fun onScrollStateChanged(
                    view: AbsListView?,
                    scrollState: Int,
                ) {
                }

                override fun onScroll(
                    view: AbsListView?,
                    firstVisibleItem: Int,
                    visibleItemCount: Int,
                    totalItemCount: Int,
                ) {
                // !리사이클러뷰.canScrollVertically(1) : 그리드뷰가 최하단에 닿은 것 
                // 이를 통해 최하단에 닿았고 로딩이 아니라면 로딩중으로 상태를 변경해주고 
                // 페이지를 1 증가시킨 후 뷰모델을 통해 다음 페이지 데이터를 가져오도록 하였다.
                    if (!binding.movieGridView.canScrollVertically(1) && !isLoading) {
                        isLoading = true
                        currentPage++
                        viewModel.handleEvent(MovieSelectEvent.LoadNextPageMovie(queryText, currentPage))
                    } else {
                        isLoading = false
                    }
                }

 

그리고StateFlow변수 moviePosterUriList가  다음 페이지를 가져와서 새 데이터를 가지게 되고

이 데이터를 어댑터에 넘겨주었다.

               lifecycleScope.launch {
                    repeatOnLifecycle(Lifecycle.State.STARTED) {
                        viewModel.moviePosterUriList.collect {
                            moviePosterAdapter?.initializePosterUriList()
                            moviePosterAdapter?.setPosterUriList(it)

 

그 결과 ... ! 영화 포스터를 무한 스크롤로 가져오는데는 성공하였지만 로딩을 표시하는데에는 실패했다.

로딩 화면 추가 (그리드뷰에서 리사이클러뷰로 교체!?)

지금까지 GridView와 기본 베이스어댑터로 구현한 코드로 영화 포스터를 보여주고 있었는데 아무리 해보아도  데이터 + 로딩 을 함께 표시하기 어려웠다.

😱 로딩지옥에 빠지기도 했다 ..

 

따라서 리사이클러뷰를 통해 상황에 따라 다른 뷰를 보여주도록 하기 위해 변경해주었다. 멀티뷰 방식으로 구현해본 경험이 있어서 이걸로 구현해보면 되겠다는 생각이 들어 바로 변경해보았다!!

 

 

// 기존 
class MoviePosterAdapter(private val context: Context) : BaseAdapter()

// 변경
class MoviePosterAdapter(private val context: Context) : RecyclerView.Adapter<RecyclerView.ViewHolder>()
	
    // 로딩 상태 변수 
    private var isLoading = false
    companion object {
        const val VIEW_TYPE_ITEM = 0
        const val VIEW_TYPE_LOADING = 1
    }
    
    // 로딩 상태 업데이트를 위한 메서드
    fun setLoading(isLoading: Boolean) {
        this.isLoading = isLoading
    }
    
    // 뷰 타입에 따라 다른 레이아웃과 뷰홀더를 반환해주었다.
    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int,
    ): RecyclerView.ViewHolder {
        return when (viewType) {
            VIEW_TYPE_ITEM -> {
                val binding = MoviePosterItemBinding.inflate(LayoutInflater.from(parent.context), parent, false)
                MoviePosterViewHolder(binding)
            }
            VIEW_TYPE_LOADING -> {
                val binding = ItemLoadingBinding.inflate(LayoutInflater.from(parent.context), parent, false)
                MovieLoadingViewHolder(binding)
            }

 

✨안드로이드 개발자 질문방을 통해 얻은 소중한 답변들 

 

안드로이드 개발자 질문방을 통해 질문을 한 결과 아래 2가지를 배울 수 있었다.

1 . 리사이클러뷰에 footer & header라는 개념과

2. span 처리 방식에 대해 알게되었다.

리사이클러뷰의 footer

먼저 리사이클러뷰의 footer에 대해서 알아본 결과, 어댑터를 조정해서 바닥글을 추가해주는 개념이었다. 

내용을 보기 전에는 footer라는 개념이 따로 존재하는 거라고 생각하였는데 멀티뷰를 통해 구현해주는 방식임을 알게되었다.

 

크게 아래의 흐름대로 구현해주면 되는 것 같다. 이미 적용해주고 있던 방식이었다!!

   // footer 식별을 위한 변수 선언
   private val TYPE_FOOTER = 2
   
 
 	// 서로 다른 뷰를 반환해주기 위한 함수이다.
override fun getItemViewType(position: Int): Int {
        return when {
            isFooter(position) -> TYPE_FOOTER
            else -> TYPE_ITEM
        }
    }

    // footer와 item을 위한 뷰홀더를 생성해준다.
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when (viewType) {
            TYPE_FOOTER -> FooterViewHolder(footerView!!)
            else -> ItemViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false))
        }
   
     // 뷰홀더에서 데이터를 바인딩해준다.
    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        when (holder) {
            is ItemViewHolder -> {
                val itemData = data[getRealPosition(position)]  // Adjust position to account for header
                holder.bind(itemData)
            }
        }
    }
    
    // footer를 위한 뷰홀더를 구현해준다.
        class FooterViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)

span 조정 방식

다음은 span을 조정해주는 방식이다.

이 방식은 처음 알게되어서 신기했다ㅎㅎ 

GridLayoutManager.SpanSizeLookup :각 아이템이 차지할 행의 수를 제공해주는 역할 을 통해 차지하고 싶은 열 의 수를 조정해줄 수 있다!

  // spanCount = 3인 경우 3열을 차지하도록 할 수 있다. 
  val spanCount = 3
        val layoutManager = GridLayoutManager(requireContext(), spanCount)
        layoutManager.spanSizeLookup =
            object : GridLayoutManager.SpanSizeLookup() {
                override fun getSpanSize(position: Int): Int {
                    return when (moviePosterAdapter?.getItemViewType(position)) {
                    
                    // 로딩의 경우 3열을 차지하도록 했고 일반 아이템은 1열을 차지하도록 해주었다.
                        MoviePosterAdapter.VIEW_TYPE_LOADING -> spanCount
                        else -> 1
                    }

 

이는 추후 열의 개수가 다른 탭 레이아웃에서 리사이클러뷰를 사용할 때도 유용하게 사용되었다.

 

여기까지의 결과는 짜잔 로딩이 추가되었다.(그런데 아이템이 한 행 통채로 없는 경우가 드물어서 로딩도 없는 칸에서만 나타났다) 

 

끝이 난거야? 데이터가 오고 있는거야?

그런데 한가지 문제가 생겼다. 데이터가 오고 있는 중인지, 끝이 나서 오지 않는지 판단하는 로직을 작성해주지 않아서 

데이터를 다 가져온 경우, 즉 최하단으로 스크롤 한 경우에도 로딩이 나타났다.

 

마지막 페이지인지를 어댑터에게 알려주는 로직이 필요했다.

따라서  어댑터에 아래와 같은 마지막 페이지를 알려주는 메서드를 추가해주었다.

 fun isLastPage() {
        isLastPage = true
    }

 

또한 getItemViewType 메서드에서 isLastPage가 아닌 경우에만 로딩 화면이 뜨도록 해주었다.

 override fun getItemViewType(position: Int): Int {
        return if (position == posterUriList.size - 1 && !isLastPage) VIEW_TYPE_LOADING else VIEW_TYPE_ITEM
    }

 

프래그먼트 상에서도 마지막 페이지일 경우 뷰모델에서 프래그먼트로 NotifyLastPage 라는 effect를 보내도록 하고, 어댑터의 마지막 페이지임을 알려주었다.

is MovieSelectEffect.NotifyLastPage -> {
                moviePosterAdapter?.setLoading(false)
                moviePosterAdapter?.isLastPage()
                Toast.makeText(context, "마지막 페이지 입니다!", Toast.LENGTH_SHORT).show()

 

---

앞으로도 이렇게 구현해야할까??? 

이렇게하여 무한스크롤과 로딩화면 추가까지 완성을 했다. 

그런데 무한스크롤을 구현할 때마다 이 과정을 다 거쳐야할까??! 🤣

프로젝트에서는 감상문 데이터, 댓글, 영화 등을 모두 무한 스크롤로 구현해야한다.

그런데 수동으로 다 구현하다보니 페이징 시 에러가 발생할 수도 있고 코드 반복이 많아진다는 문제가 있었다. 

 

따라서 그동안 많이 들어보았던 Paging3에서 제공하는 기능이 무엇일까를 살펴보다가 내가 수동으로 구현한 기능들을 라이브러리에서 제공한다는 것을 알게되었다....!!!!!!!! 

엄청났다. 따라서 Paging3를 적용해서 얼마나 큰 차이가 있을지 알아보기로 했다.

그 과정은 다음 글부터 기록해보도록 한다 :) 

 

스크롤 수동 구현 끝!! 고생했당