Kotlin Android自定义ListView

在上一个Kotlin Android ListView教程中, 我们创建了一个默认ListView的示例。 Android提供了自定义ListView的功能。在本教程中, 我们将自定义ListView。

Adapter类用于在列表中添加列表项。它在AdapterView与其他View组件（ListView, ScrollView等）之间桥接数据列表。

Kotlin Android自定义ListView示例

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

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.srcmini02.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类中添加以下代码。在此类中, 我们将创建两个String数组和一个Int数组, 分别存储字符串文本和图像ID。

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

package example.srcmini02.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.srcmini02.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
    }
}

输出：