[Kotlin] ListView

이상목·2024년 5월 22일

kotlin practice

Kotlin

목록 보기

8/20

안드로이드에서 굉장히 많이 쓰이는 것중 하나인 ListVIew를 만드는 방법에 대해서 알아보겠습니다.

리스트 뷰란?

ListView는 스크롤 가능한 항목을 나타낼 때 사용되는 뷰 그룹입니다.
ListView에 먼저 View를 배치한 다음, 데이터가 저장된 곳에서 데이터를 View의 형식에 맞게 변환하여 가져옵니다.
위 사진에서와 같이 Adapter의 역할이 가장 중요한데, ListViewModel과 list_view_item을 가지고 와서 예쁘게 리스트를 만들어서 MainActivity에 있는 ListView에 데이터를 준다고 생각하면 됩니다.
아래의 예제를 통하여 더 알아보겠습니다.

리스트 뷰 사용 예시

1. 어댑터 생성

리스트를 받아주기 위한 Adapter class를 생성한다.

2 . 어댑터 설정

2-1. BaseAdapter(기본제공)라는 추상 클래스를 상속받아 문자열(String) 타입의 데이터를 받아줄 준비를 합니다.

package com.sangmoki.listview

import android.widget.BaseAdapter

// 데이터를 받아주기 위한 Adapter 클래스
// 문자열 데이터를 받기 위해 <String> 타입으로 설정
class ListViewAdapter(val List : MutableList<String>) : BaseAdapter() {

}

2-2. 어? 빨간 줄이 그어지네

이와 같이 설정하면 위와 같이 빨간줄로 에러가 발생하는데, 이와 같은 이유는 BaseAdapter라는 추상 클래스를 상속(extends가 아닌 implement)를 받기 때문에 BaseAdapter 에서 정의한 함수를 하위 클래스인 ListViewAdapter 에서도 필수로 사용해야 하기 때문입니다.

부모 클래스의 함수를 호출하기 위해 implement members를 클릭합니다.

위 사진과 같이 부모 클래스의 함수를 보여줍니다. OK를 누릅니다.

2-3. 반환 값 설정

2-2까지 완료되었다면 부모에게 물려받은 함수를 재정의 합니다.
이 기본 함수에서는 getCount()와 getView(position: Int, convertView: View?, parent: ViewGroup?) 함수가 중요합니다.

class ListViewAdapter(val List : MutableList<String>) : BaseAdapter() {

    // 전체 아이템의 개수 반환
    override fun getCount(): Int {
        return List.size
    }

    // 아이템 반환 (리스트에서 몇번째에 자리한 아이템인지)
    override fun getItem(position: Int): Any {
        return List[position]
    }

    // 아이템의 ID 반환
    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
    }

}

여기서 마지막 getView에는 리턴 구문을 작성해주지 않았는데, 이는 반환해줄 item을 아직 작성해주지 않았기 때문입니다.
때문에, item을 먼저 작성해주도록 하겠습니다.

3. Adapter에 들어갈 item 설정

3-1. 새로운 resource file을 생성합니다.

3-2. list_view_item이라는 명칭으로 생성해줍니다.

ok 버튼을 클릭하면 list_view_item으로 설정한 layout이 생성됩니다.

3-3. 생성한 list_view_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="80dp">

    <TextView
        android:id="@+id/listViewItem"
        android:text="리스트뷰 아이템"
        android:textSize="30sp"
        android:layout_margin="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
 </LinearLayout>

각 리스트 뷰에 들어갈 item의 layout을 위 이미지와 같이 설정해준다.

4. 설정한 listViewItem을 Adapter에 적용하기

4-1. list_view_item에서 설정한 item_list_view 레이아웃을 inflate하여 반환한다.

2-3에서 작성하지 못한 getView로 돌아가서 아래와 같이 작성해준다.

    // list_view_item에서 설정한 item_list_view 레이아웃을 inflate하여 반환
    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

        var convertView = convertView

        // 만약 convertView가 null이라면
        if (convertView == null) {
            // item_list_view 레이아웃을 inflate하여 convertView에 저장
            convertView = LayoutInflater.from(parent?.context).inflate(R.layout.list_view_item, parent, false)
        }

        // 컨버트뷰를 가져오면 반환해준다.
        return convertView!!
    }

4-2. 아이템 생성

        // String 타입의 가변 배열 변수 생성
        val list_item = mutableListOf<String>()

        // 가변 배열에 아이템 추가
        list_item.add("1번째 아이템")
        list_item.add("2번째 아이템")
        list_item.add("3번째 아이템")

위와 같이 String 타입의 가변 배열 변수 list_item을 생성 한 후 배열에 담아줄 아이템을 .add() 함수를 통하여 list_item 객체에 담아준다.

4-3. ListView 변수 및 ListViewAdapter 객체 생성

        // ListView 변수 생성
        val listview = findViewById<ListView>(R.id.mainListView)

        // ListViewAdapter 클래스의 객체 생성
        val listAdapter = ListViewAdapter(list_item)

4-4. ListView에 Adapter 설정

        // ListView에 Adapter 설정
        listview.adapter = listAdapter

listview activity의 객체의 adapter에 아이템 정보를 담은 listAdapter를 넣어준다.

4-5. 처음 default로 잡아놓은 TextView 변경

처음 list_view_item 레이아웃에서 android:text="리스트뷰 아이템" 을 통하여 아이템의 기본 데이터를 넣어놓았는데, 이제 add를 통하여 생성한 데이터를 바인딩해보겠습니다.

    // list_view_item에서 설정한 item_list_view 레이아웃을 inflate하여 반환
    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

        var convertView = convertView

        // 만약 convertView가 null이라면
        if (convertView == null) {
            // item_list_view 레이아웃을 inflate하여 convertView에 저장
            convertView = LayoutInflater.from(parent?.context).inflate(R.layout.list_view_item, parent, false)
        }

        // listViewItem 레이아웃에서 TextView를 찾아 data 변수에 저장
        val data = convertView!!.findViewById<TextView>(R.id.listViewItem)
        // data 변수의 text(android:text)에 List[아이템인덱스]를 넣어준다.
        data.text = List[position]

        // 컨버트뷰를 가져오면 반환해준다.
        return convertView!!
    }