Kotlin Android 自定义列表视图

2025年3月17日 | 阅读 3 分钟

在之前的教程Kotlin Android 列表视图中，我们创建了一个默认列表视图的示例。 Android 提供了一个自定义列表视图的功能。在本教程中，我们将自定义我们的列表视图。

一个适配器类用于在列表中添加列表项。它将数据列表连接到 AdapterView 以及其他视图组件（ListView、ScrollView 等）。

Kotlin Android 自定义列表视图示例

在此示例中，我们将创建一个自定义列表视图，并在列表项上执行点击操作。在此自定义列表视图中，我们为列表视图的每一行添加一个图像和两个不同的文本描述。

activity_main.xml

在 activity_main.xml 文件中，添加一个 ListView 组件来显示项目列表。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="example.javatpoint.com.kotlincustomlistview.MainActivity">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</android.support.constraint.ConstraintLayout>

custom_list.xml

在布局目录中创建一个名为 custom_list.xml 的布局文件，并添加一个 ImageView 和两个 TextView。 ImageView 用于显示图像，一个 TextView 用于显示标题，另一个 TextView 用于显示文本描述。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center" >
    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="title"
            android:textStyle="bold"
            android:layout_marginLeft="15dp"
            android:layout_marginStart="15dp"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" />

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="description"
            android:layout_marginLeft="15dp"
            android:layout_marginStart="15dp"
            android:layout_marginTop="5dp"
            android:textSize="16sp"/>
    </LinearLayout>
    </LinearLayout>
</LinearLayout>

MainActivity.kt

在 MainActivity.kt 类中添加以下代码。在这个类中，我们创建了两个字符串数组和一个整数数组，分别用于存储字符串文本和图像 ID。

从这个类中，我们通过传递上下文和数据作为参数来调用一个名为 MyListAdapter 的自定义适配器类。 listView.adapter = myListAdapter 将返回的适配器设置为 ListView。

package example.javatpoint.com.kotlincustomlistview

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {
    val language = arrayOf<String>("C","C++","Java",".Net","Kotlin","Ruby","Rails","Python","Java Script","Php","Ajax","Perl","Hadoop")
    val description = arrayOf<String>(
            "C programming is considered as the base for other programming languages",
            "C++ is an object-oriented programming language.",
            "Java is a programming language and a platform.",
            ".NET is a framework which is used to develop software applications.",
            "Kotlin is a open-source programming language, used to develop Android apps and much more.",
            "Ruby is an open-source and fully object-oriented programming language.",
            "Ruby on Rails is a server-side web application development framework written in Ruby language.",
            "Python is interpreted scripting  and object-oriented programming language.",
            "JavaScript is an object-based scripting language.",
            "PHP is an interpreted language, i.e., there is no need for compilation.",
            "AJAX allows you to send and receive data asynchronously without reloading the web page.",
            "Perl is a cross-platform environment used to create network and server-side applications.",
            "Hadoop is an open source framework from Apache written in Java."
    )

    val imageId = arrayOf<Int>(
            R.drawable.c_image,R.drawable.cpp_image,R.drawable.java_image,
            R.drawable.net_image,R.drawable.kotlin_image,R.drawable.ruby_image,
            R.drawable.rails_image,R.drawable.python_image,R.drawable.js_image,
            R.drawable.php_image,R.drawable.ajax_image,R.drawable.python_image,
            R.drawable.hadoop_image
    )
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val myListAdapter = MyListAdapter(this,language,description,imageId)
        listView.adapter = myListAdapter

        listView.setOnItemClickListener(){adapterView, view, position, id ->
            val itemAtPos = adapterView.getItemAtPosition(position)
            val itemIdAtPos = adapterView.getItemIdAtPosition(position)
            Toast.makeText(this, "Click on item at $itemAtPos its item id $itemIdAtPos", Toast.LENGTH_LONG).show()
        }
    }
}

MyListAdapter.kt

现在，创建一个名为 MyListAdapter.kt 的自定义适配器类，该类将数据模型填充到 ListView 中。

package example.javatpoint.com.kotlincustomlistview

import android.app.Activity
import android.view.View
import android.view.ViewGroup
import android.widget.*
class MyListAdapter(private val context: Activity, private val title: Array<String>, private val description: Array<String>, private val imgid: Array<Int>)
    : ArrayAdapter<String>(context, R.layout.custom_list, title) {

    override fun getView(position: Int, view: View?, parent: ViewGroup): View {
        val inflater = context.layoutInflater
        val rowView = inflater.inflate(R.layout.custom_list, null, true)

        val titleText = rowView.findViewById(R.id.title) as TextView
        val imageView = rowView.findViewById(R.id.icon) as ImageView
        val subtitleText = rowView.findViewById(R.id.description) as TextView

        titleText.text = title[position]
        imageView.setImageResource(imgid[position])
        subtitleText.text = description[position]

        return rowView
    }
}

输出

下一主题#

Kotlin Android 自定义列表视图