Android 리스트 관리 - Adapter , Custom listview

안녕하세요, '소프트웨어 공장'의 여러분! 오늘은 안드로이드 애플리케이션에서 흔히 사용하는 ListView를 조금 더 세련되고 유연하게 사용할 수 있는 Custom ListView에 대해 알아보려고 합니다. Custom ListView를 사용하면 기본 ListView의 단조로움을 탈피하여 나만의 멋진 UI를 구현할 수 있습니다. Kotlin으로 간단한 예제와 함께 직접 Custom ListView를 만들어 보겠습니다.

1. Custom ListView란?

기본 ListView는 안드로이드에서 가장 흔하게 사용되는 UI 컴포넌트 중 하나입니다. 하지만 기본적으로 제공되는 ListView는 단순히 텍스트를 보여주는 용도로만 사용하기 때문에 앱의 UI 디자인에 제약이 있을 수 있습니다. 이를 해결하기 위해 우리는 Custom Adapter를 사용하여 각 항목의 레이아웃을 커스터마이징할 수 있습니다.

이 예제에서는 사용자 이름과 프로필 사진을 포함한 Custom ListView를 만들어 보겠습니다.

2. 프로젝트 준비하기

먼저 Custom ListView를 구현하기 위해 필요한 파일들을 살펴보겠습니다.

필요한 파일들:

• activity_main.xml: ListView를 포함하는 메인 레이아웃
• list_item.xml: 각 항목의 레이아웃을 정의하는 XML 파일
• MainActivity.kt: ListView를 다루는 메인 액티비티
• CustomAdapter.kt: Custom Adapter 클래스

3. 레이아웃 파일 작성하기

3.1. activity_main.xml

activity_main.xml 파일에는 ListView를 배치합니다.

<?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="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

3.2. list_item.xml

각 ListView 항목의 레이아웃을 정의하는 list_item.xml 파일을 작성합니다. 여기서는 프로필 사진과 이름을 표시합니다.

<?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="horizontal"
    android:padding="8dp">

    <ImageView
        android:id="@+id/profile_image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/ic_launcher"
        android:layout_marginRight="16dp" />

    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="User Name"
        android:textSize="18sp" />

</LinearLayout>

4. Custom Adapter 구현하기

이제 Kotlin으로 Custom Adapter를 작성하여 list_item.xml을 이용해 ListView의 각 항목을 구성해 보겠습니다.

4.1. 데이터 클래스 정의

먼저 사용자 데이터를 정의할 데이터 클래스를 만듭니다.

data class User(val name: String, val profileImage: Int)

4.2. CustomAdapter 클래스 작성

CustomAdapter 클래스를 작성하여 list_item.xml과 데이터 리스트를 연결합니다.

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.ImageView
import android.widget.TextView

class CustomAdapter(private val context: Context, private val userList: ArrayList<User>) : BaseAdapter() {

    override fun getCount(): Int {
        return userList.size
    }

    override fun getItem(position: Int): Any {
        return userList[position]
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        var view = convertView
        if (view == null) {
            val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
            view = inflater.inflate(R.layout.list_item, parent, false)
        }

        val user = userList[position]

        val profileImageView = view?.findViewById<ImageView>(R.id.profile_image)
        val userNameTextView = view?.findViewById<TextView>(R.id.user_name)

        profileImageView?.setImageResource(user.profileImage)
        userNameTextView?.text = user.name

        return view!!
    }
}

4.3. MainActivity 작성

마지막으로 MainActivity를 작성하여 ListView에 CustomAdapter를 연결합니다.

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import android.widget.ListView

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

        val userList = arrayListOf(
            User("Alice", R.mipmap.ic_launcher),
            User("Bob", R.mipmap.ic_launcher),
            User("Charlie", R.mipmap.ic_launcher),
            User("David", R.mipmap.ic_launcher),
            User("Eve", R.mipmap.ic_launcher)
        )

        val listView = findViewById<ListView>(R.id.listView)
        val adapter = CustomAdapter(this, userList)
        listView.adapter = adapter
    }
}

5. 결과 확인하기

이제 앱을 실행하면 각 사용자의 이름과 프로필 이미지를 보여주는 Custom ListView를 확인할 수 있습니다. 기본적인 텍스트 리스트보다 훨씬 보기 좋은 디자인이 되었습니다.

6. 요약

이번 포스팅에서는 안드로이드에서 ListView를 커스터마이징하여 Custom ListView를 구현하는 방법에 대해 알아보았습니다. Custom Adapter를 사용하면 원하는 모양으로 ListView를 구성할 수 있고, 사용자에게 더 나은 경험을 제공할 수 있습니다. 앞으로도 ListView를 더욱 효율적으로 활용하여 멋진 UI를 구현해 보세요!

다음 시간에는 Custom ListView의 성능을 개선하는 방법이나 RecyclerView로 전환하는 방법에 대해서도 다뤄보겠습니다. 질문이나 궁금한 점이 있다면 언제든지 댓글로 남겨주세요.

감사합니다!"

7. 참고 자료

• ListView 문서 - Android Developers
• Custom Adapter 예제