Android RecyclerView 如何展示自定义列表 Kotlin
一、前提
有这么一个对象
kotlin">class DeviceDemo (val name: String, val type: String, val address: String)
要展示一个包含这个对象的列表
kotlin">bluetoothDevices.add(DeviceDemo("bb 9800", "LE", "32:34:34:23:23"))
bluetoothDevices.add(DeviceDemo("bb 9900", "RN/LE", "32:34:34:23:23"))
bluetoothDevices.add(DeviceDemo("iPhone 15 Pro", "LE", "32:34:34:23:23"))
最终效果是这样的：
二、定义所需要的视图 layout
1. 定义列表单元格的 layout
就是定义一个普通的 layout 视图，这个视图就是列表中每个元素的视图，自己随意定义，别忘了给每个元素添加 id。
recyclerview_cell.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="horizontal"
android:gravity="left"
android:layout_height="wrap_content">
<LinearLayout
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="@+id/list_cell_bt_index"
android:textAlignment="textEnd"
android:layout_marginRight="10dp"
android:text="1."
android:textColor="@color/white"
android:textSize="18dp"
android:fontFamily="@font/jetbrainsmono_bold"
android:layout_width="50dp"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:gravity="center"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:id="@+id/list_cell_bt_name"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="@font/jetbrainsmono_bold"
android:text="BlackBerry Q10"
android:textSize="14dp"
android:textAlignment="center"
android:textColor="@color/white" />
<TextView
android:id="@+id/list_cell_bt_type"
android:fontFamily="@font/jetbrainsmono_bold"
android:layout_marginLeft="10dp"
android:textSize="12dp"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="低功耗"
android:textColor="@color/btBlue" />
</LinearLayout>
<TextView
android:layout_gravity="left"
android:id="@+id/list_cell_bt_mac"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="34:53:E3:12:23:45"
android:textColor="@color/white" />
</LinearLayout>
</LinearLayout>
2. 在你的主视图 xml 中添加 RecyclerView
如下，两个地方需要注意：
layoutManager就在下面这个值listitem是指的你的列表中每个单元 cell 的视图 layout，也就是上面第1步里定义的视图。
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="170dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
tools:listitem="@layout/recyclerview_cell" />
这样就能在 xml 预览窗口中看到这个列表的样子，这样关于视图的定义就完成了。
三、定义对应的程序代码
列表是上面已经定义好的 DeviceDemo 类型的 List。就不再重新定义这个
要想展示这个列表，需要用到 Adapter，它的类型是 RecyclerView.Adapter
1. 定义基础元素、数据
这里只做演示用，所以定义了简单的对象：
kotlin">class DeviceDemo (val name: String, val type: String, val address: String)
// 新建一个 list 对象，演示数据
private var bluetoothDevices = mutableListOf<DeviceDemo>()
bluetoothDevices.add(DeviceDemo("bb 9800", "LE", "32:34:34:23:23"))
bluetoothDevices.add(DeviceDemo("bb 9900", "RN/LE", "32:34:34:23:23"))
bluetoothDevices.add(DeviceDemo("iPhone 15 Pro", "LE", "32:34:34:23:23"))
2. 定义 adapter
就是定义一个自己的 adapter，在里面实现 ViewHolder 方法，对上面定义的单元格视图和数据进行绑定。
需要重写 onBindViewHolder onCreateViewHolder getItemCount 几个方法变量
kotlin">package cn.kylebing.blackberry.q10_keyboard
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
class BluetoothDeviceRecycleListAdapter(private val dataSet: MutableList<DeviceDemo>) :
RecyclerView.Adapter<BluetoothDeviceRecycleListAdapter.ViewHolder>() {
class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
val index: TextView
val deviceName: TextView
val deviceMac: TextView
val deviceType: TextView
init {
index = view.findViewById(R.id.list_cell_bt_index)
deviceName = view.findViewById(R.id.list_cell_bt_name)
deviceMac = view.findViewById(R.id.list_cell_bt_mac)
deviceType = view.findViewById(R.id.list_cell_bt_type)
}
}
override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
val view = LayoutInflater.from(viewGroup.context)
.inflate(R.layout.recyclerview_cell, viewGroup, false)
return ViewHolder(view)
}
override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {
viewHolder.index.text = position.toString()
viewHolder.deviceName.text = dataSet.get(position).name
viewHolder.deviceMac.text = dataSet.get(position).address
viewHolder.deviceType.text = dataSet.get(position).type
}
override fun getItemCount() = dataSet.size
}
3. 主程序中调用
kotlin">class MainActivity : AppCompatActivity() {
private var bluetoothDevices = mutableListOf<DeviceDemo>()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.bluetooth_info_panel)
bluetoothDevices.add(DeviceDemo("bb 9800", "LE", "32:34:34:23:23"))
bluetoothDevices.add(DeviceDemo("bb 9900", "RN/LE", "32:34:34:23:23"))
bluetoothDevices.add(DeviceDemo("iPhone 15 Pro", "LE", "32:34:34:23:23"))
// recycleView
val recycleView = findViewById<RecyclerView>(R.id.recyclerview)
val adapter = BluetoothDeviceRecycleListAdapter(bluetoothDevices)
recycleView.setAdapter(adapter)
}
}
四、List 数据发生变化时更新界面
不可避免的，你可能需要更新原列表数据，比如删除或添加元素，此时需要界面跟着更新，就需要找到 RecyclerView 的 adapter，执行 adapter.notifyItemRangeChanged() 告知 adapter 进行更新。
kotlin">bluetoothDevices.add(DeviceDemo("new device", "LE", "32:34:34:23:23"))
findViewById<RecyclerView>(R.id.recyclerview).adapter?.notifyDataSetChanged()
五、结果
最终经过修改我实现的效果是这样的：
