目的

示範 Kotlin ListView 實際例子，方便後續與 Flutter ListView 實際例子比較

實例主題

用 ListView 元件列出書名、作者和購買日期

以下為完成畫面截圖：

程式碼檔案架構

1. 程式碼：

• 書本相關資料結構：BookInfor.kt
• Activity 頁面：MainActivity.kt
• Adapter 更新 ListView 資料：MyAdapter.kt
• 監聽資料變化：MyViewModel.kt

2. layout xml 檔：

• Activity 頁面 layout：activity_main.xml
• ListView item layout：listview_item.xml

以下為 BookInfor.kt 檔案內容：建立書本相關資料結構，儲存書本的書名、作者和購買日期資料。

package com.example.kotlin_demo

data class BookInfor(
  val bookName: String,
  val bookAuthor : String,
  val bookBuyDate : String
)

以下為 MainActivity.kt 檔案內容：

1. 由 id 取得 ListView 元件
2. 設定書本資料到 ViewModel liveData
3. 當 liveData 發現資料更新，就會送資料給 Adapter
4. 最終 Adapter 更新 ListView 的資料

package com.example.kotlin_demo

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

class MainActivity : AppCompatActivity() {
    private val viewModel = MyViewModel()

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

        val listView : ListView = findViewById<ListView>(R.id.listView)

        val bookData = mutableListOf<BookInfor>()

        for(bookNum in 1..9){
            bookData.add(BookInfor("MyBook$bookNum","Author$bookNum","2023-09-0$bookNum"))
        }

        viewModel.addList(bookData)

        val adapter = MyAdapter(this)
        adapter.setData(viewModel.BookList.value!!)
        listView.adapter = adapter

    }
}

以下為 MyAdapter.kt 檔案內容：接收 BookInfor 資料結構，並以此結構資料設置到 ListView item 。

package com.example.kotlin_demo

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter

import android.widget.TextView
import androidx.core.content.ContextCompat

class MyAdapter(context: Context) : ArrayAdapter<BookInfor>(context, R.layout.listview_item) {
    

    fun setData(itemList: List<BookInfor>) {
        addAll(itemList)
        notifyDataSetChanged()
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val itemView = convertView ?: LayoutInflater.from(context).inflate(R.layout.listview_item,parent,false)
        val itemData = getItem(position)
        itemView.apply {

            //設定文字元件
            val bookTV: TextView = findViewById<TextView>(R.id.bookNameTV)
            bookTV.setText("${itemData!!.bookName}")
            bookTV.setTextColor(ContextCompat.getColor(context, R.color.black))

            val bookAuthorTV: TextView = findViewById<TextView>(R.id.bookAuthorTV)
            bookAuthorTV.setText("${itemData!!.bookAuthor}")
            bookAuthorTV.setTextColor(ContextCompat.getColor(context, R.color.black))

            val bookDateTV: TextView = findViewById<TextView>(R.id.bookDateTV)
            bookDateTV.setText("${itemData!!.bookBuyDate}")
            bookDateTV.setTextColor(ContextCompat.getColor(context, R.color.black))


        }
        return itemView
    }
}

以下為 MyViewModel.kt 檔案內容：由 BookList liveData變數儲存書本相關資料。

package com.example.kotlin_demo

import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel

class MyViewModel: ViewModel() {

    val BookList = MutableLiveData<List<BookInfor>>()

    fun addList (itemList:MutableList<BookInfor>){
        val list = mutableListOf<BookInfor>()
        list.addAll(itemList)
        BookList.value = list
    }
}

以下為 activity_main.xml 檔案內容：設置 ListView 元件於 MainActivity 頁面上。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/listView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

以下為 listview_item.xml 檔案內容：設置 ListView 元件 item 所需書本文字 TextView 元件 layout。

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@color/white"
    app:cardCornerRadius="10dp"
    app:contentPadding="5dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/bookNameTV"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:textSize="20dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/bookAuthorTV"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginStart="10dp"
            android:textSize="20dp"
            app:layout_constraintStart_toEndOf="@id/bookNameTV"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/bookDateTV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/bookNameTV" />


    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>