Kotlin中使用ArrayAdapter为ListView创建带状态指示器的自定义行

1. 改造item布局文件res/layout/device_button.xml #

替换原有单TextView布局，加入指示器控件，解决单控件布局限制问题：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="#FFFFFF"
    android:orientation="horizontal"
    android:paddingHorizontal="16dp"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/tv_device_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textColor="#25383C"
        android:textSize="16sp"/>

    <View
        android:id="@+id/iv_status_indicator"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_marginStart="12dp"
        android:background="@drawable/circle_indicator"/>

</LinearLayout>

2. 新建圆形指示器drawable #

创建res/drawable/circle_indicator.xml实现原生圆形样式：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/teal_200"/>
</shape>

3. 创建设备数据类 #

统一存储设备名称和错误状态，方便后续通用复用：

data class DeviceItem(
    val name: String,
    val hasError: Boolean
)

4. 自定义ArrayAdapter实现动态渲染 #

class DeviceListAdapter(context: Context, private val deviceList: List<DeviceItem>) :
    ArrayAdapter<DeviceItem>(context, R.layout.device_button, deviceList) {

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view = convertView ?: LayoutInflater.from(context).inflate(R.layout.device_button, parent, false)
        val currentItem = deviceList[position]
        
        // 绑定设备名称
        val tvName = view.findViewById<TextView>(R.id.tv_device_name)
        tvName.text = currentItem.name
        
        // 动态设置指示器颜色
        val indicator = view.findViewById<View>(R.id.iv_status_indicator)
        val indicatorColor = if (currentItem.hasError) {
            Color.RED
        } else {
            Color.GREEN
        }
        indicator.background.setColorFilter(indicatorColor, PorterDuff.Mode.SRC_IN)
        
        return view
    }
}

5. 替换原有页面适配器初始化逻辑 #

你原有onItemClickListener逻辑完全不需要修改，仅替换适配器初始化部分即可：

// List of device names
val listView: ListView = findViewById(R.id.deviceList)
// 生成设备列表数据，此处替换为你实际接口返回的对应字段即可
val deviceItems = mutableListOf<DeviceItem>()
for (i in 0 until jsonArray.length()) {
    val device = jsonArray.getJSONObject(i)
    val deviceName = device.getString("name") // 替换为你实际的设备名称字段
    val hasError = device.getBoolean("has_error") // 替换为你实际的错误状态字段
    deviceItems.add(DeviceItem(deviceName, hasError))
}
// 初始化自定义适配器
val arrayAdapter = DeviceListAdapter(this@Homepage, deviceItems)
listView.adapter = arrayAdapter

// 原有点击逻辑完全保留，无需修改
listView.onItemClickListener =
    AdapterView.OnItemClickListener { parent, view, position, id ->
        val pos = position
        println(pos)
        val device = jsonArray.getJSONObject(pos)
        val ID = device.get("id") as String
        println(ID)
        goToDeviceDetail(ID)
    }

后续需要调整样式时，仅修改device_button.xml布局，或调整DeviceListAdapter中的文本、颜色逻辑即可实现复用。

内容的提问来源于stack exchange，提问作者Sacooley1