Android RecyclerView 如何展示自定义列表 Kotlin

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 复制代码
<?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步里定义的视图。
xml 复制代码
<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()

五、结果

最终经过修改我实现的效果是这样的:

相关推荐
爱编程的鱼7 分钟前
C# 多态性详解:从静态到动态的编程艺术
开发语言·c#
字节旅行者23 分钟前
Matlab自学笔记
开发语言·笔记·matlab
贫道绝缘子38 分钟前
【Android】四大组件之BroadcastReceiver
android
关岭风尘2 小时前
Matlab/Simulink - BLDC直流无刷电机仿真基础教程(六) - 波形解析专题P1
开发语言·matlab·电机控制·simulink仿真·bldc仿真·电机续流·pid调节
景天科技苑7 小时前
【Rust通用集合类型】Rust向量Vector、String、HashMap原理解析与应用实战
开发语言·后端·rust·vector·hashmap·string·rust通用集合类型
阿沁QWQ8 小时前
友元函数和友元类
开发语言·c++
lucky_tom9 小时前
【android Framework 探究】pixel 5 内核编译
android
小黑随笔9 小时前
【Golang玩转本地大模型实战(一):ollma部署模型及流式调用】
开发语言·后端·golang
江沉晚呤时9 小时前
Redis缓存穿透、缓存击穿与缓存雪崩:如何在.NET Core中解决
java·开发语言·后端·算法·spring·排序算法
achene_ql9 小时前
缓存置换:用c++实现最近最少使用(LRU)算法
开发语言·c++·算法·缓存