Android实现列表展示输入框数据

前言

RecyclerView列表展示数据是大家再熟悉不过的知识了,但是有时在列表展示数据的时候，我们也会遇到十分蛋疼的 UI，那就是在列表项中含有输入框的问题，乍看起来是十分简单的问题，可是在实际操作中还是会遇到很多麻烦，下面就来讲解下吧。

今天涉及的内容：

1. 列表项中含输入框可能出现的问题
2. 列表输入框在Activity中使用
3. 效果图和项目结构图
4. 需要注意的问题
5. 适配器TestAdapter源码

先来波效果图

效果图.gif

一. 列表项中含输入框可能出现的问题

列表项中含输入框可能出现以下问题：

• 输入框移出界面后，再出来数据消失
• 列表刷新后，输入框数据错乱
• 列表展示输入框数据时崩溃
• 点击获取的数据并不是该项上展示的数据

二. 列表输入框在Activity中使用

ok，以上问题，我会在第四点时做详细讲解，接下来让我们看看列表展示输入框在Activity中使用示例。MainActivity涉及的输入框的处理问题都在适配器TestAdapter中，后文会给出TestAdapter源码。
先丢出MainActivity对应布局activity_main.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".ui.MainActivity"
    android:background="@color/color_f2f2f2">

    <TextView
        android:id="@+id/mTvTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        android:gravity="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="30dp"
        android:textSize="16sp"
        android:textColor="@color/black"
        android:text="Excel测试"/>

    <Button
        android:id="@+id/mBtnTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@+id/mTvTest"
        app:layout_constraintBottom_toBottomOf="@+id/mTvTest"
        app:layout_constraintStart_toEndOf="@+id/mTvTest"
        android:text="测试"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/mRecyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mTvTest"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginTop="5dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

这是一个比较简单的布局，主要列表数据会展示在RecyclerView中，然后mBtnTest按钮用于点击时展示所选项中对应输入框的值。
接下来看看MainActivity代码：

open class MainActivity : AppCompatActivity(), View.OnClickListener {

    private var mItemList:MutableList<Item> = mutableListOf()
    private var mTestAdapter: TestAdapter<Item>?=null
    private var mIndex:Int=-1

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initData()
        setListener()
    }

    private fun initData() {
        for(i in 0 until 30){
            var item:Item= Item("名称$i",i.toString())
            mItemList.add(item)
        }
        mTestAdapter=TestAdapter(this,mItemList)
        var layoutManager = LinearLayoutManager(this)
        layoutManager.isSmoothScrollbarEnabled = true
        layoutManager.isAutoMeasureEnabled = true
        mRecyclerView.isNestedScrollingEnabled=false
        mRecyclerView.setHasFixedSize(true)
        mRecyclerView.layoutManager=layoutManager
        mRecyclerView.adapter=mTestAdapter
    }

    private fun setListener() {
        mBtnTest.setOnClickListener(View.OnClickListener {
            if(mIndex!=-1) {
                ToastUtil.shortShow("选中项的值为:${mItemList[mIndex].value}")
            }
        })

        mTestAdapter!!.setOnItemClick(object:TestAdapter.OnItemClick{
            override fun click(position: Int) {
                mIndex=position
                mTestAdapter!!.setIndex(mIndex)
                mTestAdapter!!.notifyDataSetChanged()
            }
        })
    }

    override fun onClick(v: View) {

    }

}

三.效果图和项目结构图

效果图.gif
项目结构图.png

四.需要注意的问题

4.1 输入框移出界面后，再出来数据消失