Computer >> 컴퓨터 >  >> 프로그래밍 >> Android

코틀린(Kotlin)으로 안드로이드 RecyclerView 무한 스크롤 목록 구현하는 방법


이 글에서는 코틀린(Kotlin)을 사용해 안드로이드 앱에서 RecyclerView로 끝없는 목록(무한 스크롤)을 구현하는 방법을 예제와 함께 소개합니다. 사용자가 목록 맨 아래까지 스크롤하면 로딩 인디케이터가 잠시 표시된 뒤, 새로운 항목 10개가 자동으로 추가되는 방식입니다.

1단계 — 새 프로젝트 만들기

Android Studio에서 File → New Project를 선택하고, 필요한 정보를 모두 입력해 새 프로젝트를 생성합니다.

2단계 — activity_main.xml 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가해 RecyclerView를 배치합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

3단계 — MainActivity.kt 작성

src/MainActivity.kt에 다음 코드를 추가합니다. 스크롤 리스너가 목록의 마지막 항목까지 스크롤되었는지 감지하고, loadMore() 함수를 호출해 다음 데이터를 불러오는 것이 이 예제의 핵심 로직입니다.

import android.os.Bundle
import android.os.Handler
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
    lateinit var recyclerView: RecyclerView
    lateinit var recyclerViewAdapter: RecyclerViewAdapter
    var rowsArrayList: ArrayList<String> = ArrayList()
    var isLoading = false
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        recyclerView = findViewById(R.id.recyclerView)
        populateData()
        initAdapter()
        initScrollListener()
    }
    private fun initScrollListener() {
        recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                super.onScrolled(recyclerView, dx, dy)
                val linearLayoutManager = recyclerView.layoutManager as LinearLayoutManager?
                if (!isLoading) {
                    if (linearLayoutManager != null && linearLayoutManager.findLastCompletelyVisibleItemPosition() == rowsArrayList.size - 1) {
                        // 목록의 맨 아래에 도달했습니다!
                        loadMore()
                        isLoading = true
                    }
                }
            }
        })
    }
    private fun initAdapter() {
        recyclerViewAdapter = RecyclerViewAdapter(rowsArrayList)
        recyclerView.layoutManager = LinearLayoutManager(applicationContext)
        recyclerView.adapter = recyclerViewAdapter
    }
    private fun populateData() {
        for (i in 0..9) {
            rowsArrayList.add("Number $i")
        }
    }
    private fun loadMore() {
        rowsArrayList.add(null.toString())
        recyclerViewAdapter.notifyItemInserted(rowsArrayList.size - 1)
        val handler = Handler()
        handler.postDelayed(Runnable {
            rowsArrayList.removeAt(rowsArrayList.size - 1)
            val scrollPosition = rowsArrayList.size
            recyclerViewAdapter.notifyItemRemoved(scrollPosition)
            var currentSize = scrollPosition
            val nextLimit = currentSize + 10
            while (currentSize - 1 < nextLimit) {
                rowsArrayList.add("Number $currentSize")
                currentSize++
            }
            recyclerViewAdapter.notifyDataSetChanged()
            isLoading = false
        }, 2000)
    }
}

4단계 — RecyclerViewAdapter.kt 작성

새 클래스 파일 RecyclerViewAdapter.kt를 만들고 다음 코드를 추가합니다. 어댑터는 일반 항목을 표시하는 ItemViewHolder와, 데이터를 불러오는 동안 표시되는 LoadingViewHolder 두 가지 뷰 홀더를 사용합니다.

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ProgressBar
import android.widget.TextView
import androidx.annotation.NonNull
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.RecyclerView.ViewHolder
class RecyclerViewAdapter internal constructor(private val itemList: List<String>) :
RecyclerView.Adapter<ViewHolder>() {
    private val viewItemType = 0
    @NonNull
    override fun onCreateViewHolder(
    @NonNull parent: ViewGroup,
    viewType: Int
    ): ViewHolder {
        return if (viewType == viewItemType) {
            val view = LayoutInflater.from(parent.context).inflate(R.layout.item_row, parent, false)
            ItemViewHolder(view)
        } else {
            val view = LayoutInflater.from(parent.context).inflate(R.layout.item_loading, parent, false)
            LoadingViewHolder(view)
        }
    }
    override fun onBindViewHolder(@NonNull viewHolder: ViewHolder, position: Int) {
        if (viewHolder is ItemViewHolder) {
            populateItemRows(viewHolder, position)
        } else if (viewHolder is LoadingViewHolder) {
            showLoadingView(viewHolder, position)
        }
    }
    override fun getItemViewType(position: Int): Int {
        return viewItemType
    }
    private inner class ItemViewHolder internal constructor(@NonNull itemView: View) :
    ViewHolder(itemView) {
        internal var tvItem: TextView = itemView.findViewById(R.id.textViewItem)
    }
    private class LoadingViewHolder internal constructor(itemView: View) :
    ViewHolder(itemView) {
        var progressBar: ProgressBar = itemView.findViewById(R.id.progressBar)
    }
    override fun getItemCount(): Int {
        return itemList.size
    }
    private fun showLoadingView(viewHolder: LoadingViewHolder, position: Int) {}
    private fun populateItemRows(viewHolder: ItemViewHolder, position: Int) {
        val item = itemList[position]
        viewHolder.tvItem.text = item
    }
}

5단계 — item_row.xml 작성

레이아웃 리소스 파일 item_row.xml을 만들고 다음 코드를 추가합니다. 각 목록 항목은 카드뷰(CardView)로 감싼 TextView로 구성됩니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="2dp"
    app:cardUseCompatPadding="true">
    <TextView
        android:id="@+id/textViewItem"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:textColor="@android:color/holo_blue_bright"
        android:textStyle="bold" />
</androidx.cardview.widget.CardView>

6단계 — item_loading.xml 작성

레이아웃 리소스 파일 item_loading.xml을 만들고 다음 코드를 추가합니다. 추가 데이터를 불러오는 동안 화면 하단에 표시될 ProgressBar를 포함합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:indeterminate="true"
        android:paddingLeft="8dp"
        android:paddingRight="8dp" />
</LinearLayout>

7단계 — AndroidManifest.xml 설정

androidManifest.xml에 아래 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.example.q11">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

앱 실행하고 결과 확인하기

이제 앱을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 실행(Run) 아이콘 코틀린(Kotlin)으로 안드로이드 RecyclerView 무한 스크롤 목록 구현하는 방법 을 클릭합니다. 옵션에서 모바일 기기를 선택하면, 기기 화면에 아래와 같이 무한 스크롤 목록이 표시됩니다.

코틀린(Kotlin)으로 안드로이드 RecyclerView 무한 스크롤 목록 구현하는 방법

코틀린(Kotlin)으로 안드로이드 RecyclerView 무한 스크롤 목록 구현하는 방법

마무리 팁

위 예제에서는 Handler의 postDelayed()를 사용해 네트워크 지연 상황을 흉내 냈습니다. 실제 프로젝트에서는 코루틴(lifecycleScope)과 함께 처리하는 것이 좋으며, 대량의 데이터를 다룬다면 Jetpack의 Paging 3 라이브러리를 활용하면 더욱 안정적이고 효율적인 무한 스크롤을 구현할 수 있습니다.