안드로이드 커스텀 리스트 뷰

리스트 뷰에서 했던 내용을 이어서 하도록 하겠습니다.

 

커스텀 리스트 뷰는 리스트 뷰에서 데이터를 보여주는 레이아웃을 직접 커스텀할 수 있습니다.

 

SimpleAdapter를 사용합니다.

 

그럼 시작하겠습니다.

 

커스텀 레이아웃 만들기

 

 

위와 같은 커스텀 리스트 뷰의 xml 코드를 작성할 레이아웃 파일을 하나 만들어줍니다.

 

custom_listview.xml

// custom_listview.xml

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

    <ImageView
        android:id="@+id/image"
        android:layout_weight="7"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <TextView
        android:id="@+id/text"
        android:layout_weight="3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

 

커스텀 리스트 뷰 작성하기

 

먼저 메인 액티비티의 xml입니다. 

 

 

activity_main.xml

// activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="15dp"
        android:textStyle="bold"/>

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

</LinearLayout>

 

그리고 MainActivity의 전체 코드입니다.

class MainActivity : AppCompatActivity() {

    private val image = arrayOf(R.drawable.ic_launcher_foreground, R.drawable.ic_launcher_foreground, R.drawable.ic_launcher_foreground)
    private val item = arrayOf("1", "2", "3")

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

        val list = ArrayList<HashMap<String, Any>>()

        for (i in item.indices) {

            val map = HashMap<String, Any>()

            map.put("image", image[i])
            map.put("item", item[i])

            list.add(map)
        }

        val keys = arrayOf("image", "item")
        val ids = intArrayOf(R.id.image, R.id.text)

        val adapter = SimpleAdapter(this, list, R.layout.custom_listview, keys, ids)

        listView.adapter = adapter
    }
}

 

 

코드를 하나하나 설명하면

 

private val image = arrayOf(R.drawable.ic_launcher_foreground, R.drawable.ic_launcher_foreground, R.drawable.ic_launcher_foreground)
private val item = arrayOf("1", "2", "3")

이미지와 아이템 값을 array에 담은 코드입니다.

 

 

val list = ArrayList<HashMap<String, Any>>()

SimpleAdapter를 사용하기 전에 가공한 데이터를 담을 list를 선언합니다.

 

 

for (i in item.indices) {

    val map = HashMap<String, Any>()

    map.put("image", image[i])
    map.put("item", item[i])

    list.add(map)
}

HashMap인 map을 선언한 후 이미지와 아이템 값을 담고 list에 map을 더해줍니다.

 

 

val keys = arrayOf("image", "item")
val ids = intArrayOf(R.id.image, R.id.text)

SimpleAdapter에 담기 전에 HashMap에 저장했던 Key 값과 id 값을 저장해둡니다.

 

 

val adapter = SimpleAdapter(this, list, R.layout.custom_listview, keys, ids)

listView.adapter = adapter

SimpleAdapter에 가공한 데이터들을 담고 커스텀한 레이아웃도 지정해주고 listView에 어댑터를 지정합니다.

 

 

 

버튼 클릭 이벤트는 1편인 리스트 뷰와 동일함으로 참고하면 될 것 같습니다.

 

 

예제 코드

https://github.com/Im-Tae/Blog_Example/tree/master/Android/CustomListViewExample