[안드로이드] ListView 구현하기

ListView는 MainActivity에서 Adapter에게 정보를 전달하고, Apdater가 ListView에 요소들을 넣어주는 흐름을 가집니다.

 

먼저 간단히 ListView를 표시할 화면을 구성하겠습니다.

 

<?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"
    tools:context=".MainActivity">

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

</LinearLayout>

 

그리고 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="80dp"
    android:gravity="center_vertical"
    android:orientation="vertical"
    android:padding="5dp"
    android:weightSum="2">
    
    <TextView
        android:id="@+id/listViewItemTitle"
        android:text="제목"
        android:textSize="30sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <TextView
        android:id="@+id/listViewItemDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="설명"
        android:layout_weight="1"/>

</LinearLayout>

 

ListView에 들어갈 ListViewItem은 다음과 같이 화면에 보여질 예정입니다.

 

ListViewItem에 들어갈 데이터 형식을 만들어주기 위해 data class인 ListViewItemModel.kt를 만들어 주겠습니다.

 

package com.example.listview_ex

data class ListViewItemModel (
    var title : String = "",
    var description : String = ""
)

 

ListView에 들어갈 정보들을 리스트 형태로 줄 예정이기 때문에 Adapter를 생성할 때 리스트를 주도록 하겠습니다.

 

또한 Adapter 클래스의 반환형을 BaseAdapter로 해주어야 합니다.

 

BaseAdapter는 abstract 클래스로 getCount, getItem, getItemId, getView 메서드를 필수로 구성해주어야합니다.

 

각 메서드는 다음을 반환해주어야 합니다.

- getCount() : Int --> 리스트의 크기를 반환

- getItem(position: Int) : Any --> position에 위치한 리스트의 요소를 반환

- getItemId(position: Int) : Long --> position을 Long형으로 변환한 후 반환

- getView(position: Int, convertView: View?, parent: ViewGroup?): View --> position에 위치한 요소를 View형태로 바꾸어 반환

 

따라서 구성을 마친 코드는 다음과 같습니다.

package com.example.listview_ex

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.TextView

class ListViewAdapter(private var List : MutableList<ListViewItemModel>) : BaseAdapter() {
    override fun getCount(): Int {
        return List.size
    }

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

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

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        var convView = convertView

        // LayoutInflater 을 통해 ListView 에 들어갈 item 의 레이아웃인 xml 을 가져온다.
        if (convView == null) {
            convView = LayoutInflater
                .from(parent?.context)
                .inflate(R.layout.listview_item, parent, false)
        }

        // 가져온 item 의 레이아웃에서 TextView 를 찾는다.
        val listItemTitle = convView!!.findViewById<TextView>(R.id.listViewItemTitle)
        val listItemDescription = convView!!.findViewById<TextView>(R.id.listViewItemDescription)

        // TextView 의 text 를 수정한다.
        listItemTitle.text = List[position].title
        listItemDescription.text = List[position].description

        return convView!!
    }
}

 

이제 ListView에 위에서 만들어준 Apdater를 넣어 완성시키겠습니다.

 

package com.example.listview_ex

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

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    
        // Adapter 에 들어갈 리스트 데이터 구성
        val listItem = mutableListOf<ListViewItemModel>()

        listItem.add(ListViewItemModel("First Item", "First Item description"))
        listItem.add(ListViewItemModel("Second Item", "Second Item description"))
        listItem.add(ListViewItemModel("Third Item", "Third Item description"))

        // xml 에서 ListView 가져오기
        val listview = findViewById<ListView>(R.id.mainListView)
        
        // 리스트 데이터를 넣어준 Adapter 를 ListView 에 넣어주기
        val listAdapter = ListViewAdapter(listItem)
        listview.adapter = listAdapter
    }
}