В предыдущем уроке Kotlin Android ListView мы создали пример ListView по умолчанию. Android предоставляет средство для настройки ListView. В этом уроке мы настроим наш пользовательский ListView Android в Kotlin.
Класс адаптера используется для добавления элементов списка в список. Он соединяет список данных между AdapterView и другими компонентами представлений(ListView, ScrollView и т. д.).
Пример пользовательского ListView для Kotlin Android
В этом примере мы создадим собственный ListView в Котлин и выполним действие щелчка по элементам списка. В этом пользовательском 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.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. В этом классе мы создаем два массива String и один массив Int для хранения строкового текста и идентификатора изображения соответственно.
Из этого класса мы вызываем пользовательский класс адаптера с именем 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("C","C++","Java",".Net","Kotlin","Ruby","Rails","Python","Java Script","Php","Ajax","Perl","Hadoop")
val description = arrayOf(
"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(
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, private val description: Array, private val imgid: Array)
: ArrayAdapter(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
}
}
Вывод:
