[Android] Custom ListView 사용하기 (Kotlin, 리스트뷰, adapter)

들어가며

---

이전에 ListView를 android 기본 아이템 레이아웃을 활용하여 나타냈습니다.

이번 포스팅은 Java가 아닌 Kotlin으로 직접 아이템 뷰를 만들고 BaseAdapter를 상속받아서 커스텀 어댑터까지 구현하겠습니다.

 

Java로 ListView 맛보기

bbaktaeho-95.tistory.com/66?category=782684

[Android] ListView 사용하기 (안드로이드, 리스트뷰, Adapter)

프로젝트 생성

---

Java가 아닌 Kotlin으로 선택해서 생성합니다. 아래 포스팅을 참고하세요

bbaktaeho-95.tistory.com/53

[Android] Click 이벤트로 Toast 생성하기 (setOnclickListener, makeToast)

아이템 뷰 만들기

---

res/layout 우클릭 -> New -> Layout Resource File 클릭

 

적당한 이름으로 생성합니다.

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/image_title"
        android:layout_weight="1" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="4">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/text_title"
            android:textSize="24dp"
            android:textColor="#000000"
            android:gravity="center_vertical"
            android:layout_weight="2" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/text_sub_title"
            android:textSize="16dp"
            android:textColor="#666666"
            android:layout_weight="1" />
    </LinearLayout>
</LinearLayout>

커스텀 아이템 뷰는 이미지와 타이틀, 서브 타이틀로 구성했습니다.

 

이미지를 사용하기 위해 적절한 이미지를 res/drawable에 추가합니다.

리스트 뷰 만들기

---

기본으로 생성되어 있는 activity_main.xml에서 만들겠습니다.

 

ListView의 id를 listView로 지정했습니다.

어댑터 만들기

---

모든 소스코드가 MainActivity에 구현된다면 가독성이 떨어지고 유지보수가 어려워집니다.

새로운 코틀린 파일을 생성해서 어댑터를 구현하겠습니다.

 

패키지 우클릭 -> New -> Kotlin File/Class 클릭

 

ListViewAdapter, ListViewItem 클래스를 생성했습니다.

ListViewItem 클래스는 date class로 만들어줍니다.

import android.graphics.drawable.Drawable

data class ListViewItem(val icon: Drawable, val title: String, val subTitle: String)

data class는 하나의 데이터 타입으로 사용됩니다.

 

다음은 ListViewAdapter 파일입니다.

class ListViewAdapter(private val items: MutableList<ListViewItem>): BaseAdapter() {

    override fun getCount(): Int = items.size

    override fun getItem(position: Int): ListViewItem = items[position]

    override fun getItemId(position: Int): Long = position.toLong()

    override fun getView(position: Int, view: View?, parent: ViewGroup?): View {
        var convertView = view
        if (convertView == null) convertView = LayoutInflater.from(parent?.context).inflate(R.layout.custom_list_item, parent, false)

        val item: ListViewItem = items[position]
        convertView!!.image_title.setImageDrawable(item.icon)
        convertView.text_title.text = item.title
        convertView.text_sub_title.text = item.subTitle

        return convertView
    }
}

BaseAdapter 클래스를 상속해서 필요한 메서드를 override 합니다.

오버라이딩된 getView 메서드를 통해서 실제 리스트 뷰에 그려질 아이템을 셋팅합니다.

LayoutInflater를 사용해서 xml 파일을 클래스로 사용할 수 있도록 inflate 합니다.

그렇게 변환된 뷰에 리소스를 셋팅합니다.

(여기서 ViewHolder 패턴을 사용하지 않으면  findViewById가 계속 호출되어 불필요한 작업이 반복됩니다.)

어댑터 연결하기

---

MainActivity로 넘어와서 아이템 리스트와 어댑터를 생성해서 리스트 뷰에 뿌려주겠습니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val items = mutableListOf<ListViewItem>()

        items.add(ListViewItem(ContextCompat.getDrawable(this, R.drawable.instagram)!!, "인스타그램", "인스타그램 입니다"))
        items.add(ListViewItem(ContextCompat.getDrawable(this, R.drawable.facebook)!!, "페이스북", "페이스북 입니다"))
        items.add(ListViewItem(ContextCompat.getDrawable(this, R.drawable.youtube)!!, "유튜브", "유튜브 입니다"))

        val adapter = ListViewAdapter(items)
        listView.adapter = adapter

        listView.setOnItemClickListener { parent: AdapterView<*>, view: View, position: Int, id: Long ->
            val item = parent.getItemAtPosition(position) as ListViewItem
            Toast.makeText(this, item.title, Toast.LENGTH_SHORT).show()
        }
    }
}

ListViewItem만 담을 수 있는 더미 데이터(items)를 만들고 어댑터의 생성자에 인자로 전달합니다.

마지막으로 listView.adapter = adapter 어댑터 셋팅!

실행

---

아이템 클릭

참고 자료

---

hjiee.tistory.com/entry/Android-ViewHolder%ED%8C%A8%ED%84%B4%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-Base-ListView-%EB%A7%8C%EB%93%A4%EA%B8%B0

[Android] ViewHolder패턴을 활용한 Base ListView 만들기