코틀린 안드로이드 앱개발 강좌, 리사이클러 뷰 - 목록 화면 구성

안드로이드 앱 개발에서 사용자 인터페이스(UI)는 매우 중요한 요소입니다. 사용자가 앱을 사용할 때 가장 먼저 마주치는 것이 UI이며, 이에 따라 사용자의 경험과 만족도가 결정됩니다. 이번 강좌에서는 Android의 RecyclerView를 사용해 목록 화면을 구성하는 방법에 대해 자세히 설명하겠습니다. RecyclerView는 다양한 양의 데이터를 효율적으로 표시하기 위해 설계된 강력한 UI 컴포넌트입니다.

1. RecyclerView란?

RecyclerView는 Android Support Library에 포함된 최신 UI 구성 요소로, 수 많은 데이터를 효율적으로 표시할 수 있는 강력한 도구입니다. ListView와 비슷하지만, 성능과 유연성이 뛰어난 점에서 차별화됩니다. RecyclerView는 ViewHolder 패턴을 사용하여 UI 성능을 최적화하고, 다양한 레이아웃 관리자를 통해 비동기식 스크롤링을 지원합니다.

2. RecyclerView의 구성요소

Adapter: RecyclerView에 표시할 데이터의 집합을 관리하고, 뷰 홀더에 데이터를 바인딩하는 역할을 수행합니다.
ViewHolder: RecyclerView의 각 항목을 나타내는 뷰를 보유하며, 메모리 사용을 최적화합니다.
LayoutManager: RecyclerView의 항목 배치 방식을 결정하며, 수직/수평 스크롤을 처리합니다.

3. RecyclerView를 사용해 목록 화면 구성하기

이제 실제 코드를 통해 RecyclerView를 사용하여 목록 화면을 구성해보겠습니다. 이번 예제에서는 간단한 연락처 목록을 구현하겠습니다.

3.1 프로젝트 설정

새로운 Android Studio 프로젝트를 생성한 후, Gradle 파일에 RecyclerView 의존성을 추가합니다.

implementation "androidx.recyclerview:recyclerview:1.2.1"

3.2 레이아웃 구성

이제 RecyclerView를 표시할 메인 레이아웃 XML 파일을 작성합니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp"
        android:clipToPadding="false"/>
</RelativeLayout>

3.3 데이터 모델 클래스 만들기

연락처 정보를 담기 위한 데이터 모델 클래스를 작성합니다.

data class Contact(val name: String, val phone: String)

3.4 ViewHolder 클래스 작성하기

ViewHolder를 구현하여, 각 항목의 UI를 구성합니다.

class ContactViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val nameTextView: TextView = itemView.findViewById(R.id.nameTextView)
    val phoneTextView: TextView = itemView.findViewById(R.id.phoneTextView)
}

3.5 Adapter 클래스 구현하기

Adapter를 통해 RecyclerView와 데이터 소스를 연결합니다.

class ContactAdapter(private val contacts: List) : RecyclerView.Adapter<ContactViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ContactViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_contact, parent, false)
        return ContactViewHolder(view)
    }

    override fun onBindViewHolder(holder: ContactViewHolder, position: Int) {
        val contact = contacts[position]
        holder.nameTextView.text = contact.name
        holder.phoneTextView.text = contact.phone
    }

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

3.6 RecyclerView 연동하기

메인 액티비티에서 RecyclerView와 Adapter를 연결합니다.

class MainActivity : AppCompatActivity() {
    private lateinit var recyclerView: RecyclerView
    private lateinit var contactAdapter: ContactAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        recyclerView = findViewById(R.id.recyclerView)
        recyclerView.layoutManager = LinearLayoutManager(this)

        val contacts = listOf(
            Contact("John Doe", "123-456-7890"),
            Contact("Jane Smith", "987-654-3210"),
            Contact("Joe Bloggs", "543-210-9876")
        )

        contactAdapter = ContactAdapter(contacts)
        recyclerView.adapter = contactAdapter
    }
}

4. 더 나아가기: 추가 기능 구현

기본적인 RecyclerView 구현이 완료되었습니다. 이제 몇 가지 추가 기능을 구현하여 애플리케이션을 더 향상시켜 보겠습니다.

4.1 클릭 리스너 추가하기

각 목록 항목에 클릭 리스너를 추가해 클릭 시 추가적인 동작을 수행할 수 있도록 합니다.

override fun onBindViewHolder(holder: ContactViewHolder, position: Int) {
    val contact = contacts[position]
    holder.nameTextView.text = contact.name
    holder.phoneTextView.text = contact.phone

    holder.itemView.setOnClickListener {
        Toast.makeText(holder.itemView.context, "Clicked: ${contact.name}", Toast.LENGTH_SHORT).show()
    }
}

4.2 항목 레이아웃 만들기

연락처 정보를 표시하기 위한 항목 레이아웃을 디자인합니다.

<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dp">

    <TextView
        android:id="@+id/nameTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/phoneTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"/>

</LinearLayout>

4.3 아이템 삭제 기능

데이터 목록에서 특정 항목을 삭제하는 기능도 구현할 수 있습니다. 다음 코드를 참고하십시오.

class ContactAdapter(private val contacts: MutableList) : RecyclerView.Adapter<ContactViewHolder>() {
    // ...

    // 아이템 삭제 메소드 추가
    fun removeItem(position: Int) {
        contacts.removeAt(position)
        notifyItemRemoved(position)
    }
}

이제 아이템을 길게 눌렀을 때 삭제되는 기능을 추가해보겠습니다.

holder.itemView.setOnLongClickListener {
    removeItem(position)
    true
}

5. 마무리

이번 강좌에서는 Kotlin을 사용하여 Android 애플리케이션에서 RecyclerView를 구성하는 방법에 대해 배웠습니다. RecyclerView는 많은 양의 데이터를 효율적으로 표시할 수 있는 강력한 도구이며, 유연성과 성능에서 큰 장점이 있습니다. 다양한 구성 요소와 기능을 조합하여 실제 사용자 경험에 맞는 복잡한 UI를 구축할 수 있습니다.

이제 여러분이 본 강좌에서 배운 내용을 토대로, 실제 앱에 RecyclerView를 통합하여 다양한 데이터를 관리하고 표시하는 방법을 응용해 보시기 바랍니다.

코틀린 안드로이드 앱개발 강좌, 리사이클러 뷰 – 목록 화면 구성