[Kotlin] ListView 생성 및 데이터 출력

메인 화면 구성을 위한 ListView 구현

1. List Item의 레이아웃 구성 

경로 : res > layout > main_list_item.xml

이미지뷰 1개, TextView 2개 

Code

<?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">
    
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/ml_img_title"
        android:layout_weight="1" />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="4">
        
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/ml_txt_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:id="@+id/ml_txt_subtitle"
            android:text="New Text"
            android:textSize="16dp"
            android:textColor="#666666"
            android:layout_weight="1"/>
    </LinearLayout>

</LinearLayout>

2. ListItem을 클래스로 설정

경로 : java > com.noa.mytv > MainListItem.kt

Code

package com.noa.mytv

class MainListItem (val icon: String, val title: String, val subTitle: String)

3. ListItem의 데이터 처리를 위한 Adapter 구현

경로 : java > com.noa.mytv > MainListAdapter.kt

Code

package com.noa.mytv

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import com.noa.mytv.databinding.MainListItemBinding

class MainListAdapter (private val context: Context, private val MainList: MutableList<MainListItem>) : BaseAdapter() {
    override fun getCount(): Int = MainList.size

    override fun getItem(position: Int): MainListItem = MainList[position]

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

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val binding = MainListItemBinding.inflate(LayoutInflater.from(context))

        val show = MainList[position]
        val resourceId = context.resources.getIdentifier(show.icon, "drawable", context.packageName)
        binding.mlImgTitle.setImageResource(resourceId)
        binding.mlTxtTitle.text = show.title
        binding.mlTxtSubtitle.text = show.subTitle

        return binding.root

    }

}

Study

1. findViewById()를 대체하는 binding

 

2. kotlin-android-extensions 플러그인이 지원 중단될 예정 (https://developer.android.com/topic/libraries/view-binding/migration)

Kotlin synthetics를 사용한 view binding이 더 이상 지원이 되지 않기 때문에 Jetpack view binding을 사용해야 한다.

build.gradle (.app) 파일에 아래 내용을 추가하고 sync 를 한다.

    buildFeatures {
        viewBinding = true
    }

생성한 layout xml 파일이 binding class로 생성되어 직접 참조가 가능해진다.

main_list_item.xml layout 파일의 경우 MainListItemBinding 으로 참조가 가능해진다. 

이 후 layout의 view item에 접근할 때는 다음과 같은 방법으로 접근이 가능해진다.

val binding = MainListItemBinding.inflate(LayoutInflater.from(context))

binding.mlTxtTitle.text = show.title
binding.mlTxtSubtitle.text = show.subTitle

3. 이미지의 파일명을 전달 받아 ImageView에 출력

이미지명을 받아 resourceId로 변경하고 해당 이미지로 resource 설정

val resourceId = context.resources.getIdentifier(show.icon, "drawable", context.packageName)
binding.mlImgTitle.setImageResource(resourceId)

4. ListView에 adapter 연결

package com.noa.mytv

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.AdapterView
import android.widget.Toast
import com.noa.mytv.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val items = mutableListOf<MainListItem>(
            MainListItem("show01", "놀면 뭐하니?", "버라이어티"),
            MainListItem("show02", "무한도전", "버라이어티")
        )

        val mlAdapter = MainListAdapter(this, items)
        binding.mainListView.adapter = mlAdapter
    }
}

5. 구동 확인

화면에 수동으로 입력한 아이템들이 보는 것을 확인할 수 있다.

이제 이 부분을 읽어 온 값으로 대체하는 기능을 추가하려 한다.