用RecyclerView实现Form表单 灵活可复用 给你一个
前言
本文是MultiItem系列的进阶文章，讲解如何利用RecyclerView实现Form表单，在日常开发中多数人还是使用普通布局方式实现，这种方案比较直观也很简单，但是如果表单业务较多，并且易变，很多弊端就会显现，不过这正是使用RecyclerView实现的优势所在，可以自定义一套通用的输入类型的ItemInput组件，既灵活又可复用。MultiItem特点：
- 直接使用业务中的实体类为
RecyclerView Adapter设置数据源，不需要做任何封装 -
RecyclerView Adapter零编码，解放了复杂的Adapter类 - 支持
DataBinding，让你清爽的编写列表代码 - 支持Form表单录入，懒加载易复用，支持
DataBinding、隐藏域、输入内容验证及是否变化
源码地址
Github地址：https://github.com/free46000/MultiItem，请大家多多关注。
系列文章
- MultiItem用法与详解-优雅的实现多类型
- MultiItem进阶 实现Head Foot和加载更多
- MultiItem进阶 使用DataBinding让RecyclerView代码更简洁清爽
- MultiItem扩展 仿任务面板 跨多个RecyclerView的Item拖动 支持缩小后拖动
效果截图
Form表单效果
Form表单提交
用法
使用方法
首先初始化InputItemAdapter，然后添加实现ItemInput接口的数据源，相关代码：
注：类库中已提供了一些实现接口的基类如：BaseItemInput DataBindItemInput，使用时直接继承基类就可以，
protected void initViews() {
//初始化adapter
adapter = new InputItemAdapter();
List<Object> list = new ArrayList<>();
//姓名和性别录入Item，一个录入item对应多个提交的值{"name":"","sex":""}
list.add(new ItemNameAndSex());
//普通的EditText录入Item
list.add(new ItemEdit("height").setName("身高:"));
list.add(new ItemEdit("weight").setName("体重:"));
list.add(new ItemEdit("age").setName("年龄:"));
list.add(new ItemEdit("default").setName("国家:").setDefValue("中国"));
//利用DataBinding的录入Item
list.add(new ItemInfoDataBind("info").setName("介绍:"));
//添加user id对应的隐藏域的Item（用户不可见）
adapter.addHiddenItem("id", "隐藏域中携带id");
adapter.setDataItems(list);
recyclerView.setAdapter(adapter);
}
接下来展示提交表单的相关代码，提交时可以自动组装数据，另外还提供了一些有用的api，详见代码注释：
public void submit() {
//通过adapter.isValueChange()判断表单内容是否改变
//通过adapter.isValueValid()判断表单内容是否有效
//通过adapter.getInputJson()直接获取表单录入Json，还有获取录入Map的方法
String tipTxt = "表单内容" + (adapter.isValueChange() ? " 已经 " : " 没有 ") +
"被用户改变！\n表单 " + (adapter.isValueValid() ? " 已经 " : " 没有 ") +
"通过验证！\n自动组装的表单内容为：\n";
//表单内容json字符串，也可以通过Gson或FastJson等对字符串反序列化成实体对象
String valueTxt = adapter.getInputJson().toString(4);
new AlertDialog.Builder(this).setTitle("提交").setMessage(tipTxt + valueTxt)
.setPositiveButton(R.string.confirm, null).show();
}
ItemInput普通录入ItemEdit
我们先来看看普通的录入ItemEdit的编写方式，它继承了BaseItemInput基类，下面贴出一些关键的需要覆写的方法，作用详见注释：
public class ItemEdit extends BaseItemInput<ItemEdit> {
/**
* @param key 录入对应key
*/
public ItemEdit(String key) {
super(key);
}
@Override
public String getValue() {
//返回录入的值，和{@link #getKey()}一起组装为Map 如果为null则不组装
return editText == null ? defValue : editText.getText().toString();
}
@Override
public boolean isValueValid() {
//录入的值不为空则有效；其它无效
return !TextUtils.isEmpty(getValue());
}
@Override
protected void initInputView(BaseViewHolder holder) {
//初始化Input视图，由于Input视图不可以复用，所以直接在初始化视图时设置好相关内容即可
TextView nameText = getView(holder.itemView, R.id.text);
nameText.setText(name);
editText = getView(holder.itemView, R.id.editText);
editText.setHint(hint);
editText.setText(defValue);
}
...
}
ItemInput一对多录入ItemNameAndSex
上面我们已经看了普通录入的实现，一对多录入的方式需要在上面的基础上，增加一些定制化的实现，所以和普通录入重复的代码就不贴出来了，只贴出一些关键的需要覆写的方法，作用详见注释：
public class ItemNameAndSex extends BaseItemInput<ItemNameAndSex> {
//本例中需要返回两组key-value所以去覆写getValueMap()
@Override
public Object getValue() {
//在本方法中返回两个值的组合，作用是为判断表单的值是否被改变提供依据
if (nameEdit == null) {
return null;
}
return nameEdit.getText().toString() + sexRadio.getCheckedRadioButtonId();
}
@Override
public boolean isValueValid() {
//如果名字输入框录入的值不为空则有效；其它无效
return nameEdit != null && !TextUtils.isEmpty(nameEdit.getText().toString());
}
@Override
public Map<String, Object> getValueMap() {
if (nameEdit == null) {
return null;
}
//此处自己组装Map{name:name,sex:sex}并返回，这样可以达到一个Item返回两组值的效果
Map<String, Object> valueMap = new HashMap<>(2);
valueMap.put("name", nameEdit.getText().toString());
int sexStrResId = sexRadio.getCheckedRadioButtonId() == R.id.man ? R.string.man : R.string.woman;
valueMap.put("sex", nameEdit.getContext().getString(sexStrResId));
return valueMap;
}
...
}
ItemInput 数据绑定录入ItemInfoDataBind
接下来我们看看数据绑定方式，贴出关键代码：
public class ItemInfoDataBind extends DataBindItemInput<ItemInfoDataBind> {
@Override
protected void initInputView(ViewDataBinding dataBinding) {
//把自身实例对象通过ViewDataBinding绑定到视图中
dataBinding.setVariable(BR.itemData, this);
}
...
}
通过以上代码我们不难发现数据绑定技术对代码的改善，java代码中已经没有了和View层相关的逻辑代码，直接在xml布局中就可以完成，下面贴出xml布局的关键代码：
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<variable
name="itemData"
type="com.freelib.multiitem.demo.input.ItemInfoDataBind"/>
</data>
<LinearLayout ...>
<TextView
...
android:text="@{itemData.name}"/>
<EditText
...
//@={}为双向绑定用法，即EditText的变化会实时更新到itemData.info属性上
android:text="@={itemData.info}"/>
</LinearLayout>
</layout>
数据绑定的xml布局和普通写法也没什么差别，所以在这里再次安利下，大家要多多使用DataBinding,提高开发效率，降低耦合度。
详解
复用详解
拿我们上面贴出代码的ItemEdit来说，在正常情况下所有EditText相关的录入项都可以使用本类即可，这样就做到了复用。所以我们在项目中封装一些公用组件的录入Item后，即使碰到大量到表单业务，变化再多都不需要担心，只是在InputItemAdapter添加删除一些组件Item或者把原有组件Item的顺序调整一下即可，在这个过程中都不需要去碰到xml布局文件，在逻辑上也会比较清晰。
流程解析
这次实现相当于在原有功能的基础上封装了一些新的api，所以并没有太多可以讲解的地方，所以花了一个流程图供大家参考：
Form表单流程
总结
前言中也说利用RecyclerView实现Form表单了并不是一种主流的实现方式，当然会存在一些不足之处，但是比较适用于大量表单业务的客户端中，希望大家多多交流！
最后扩展一下大家的思路，其实我们可以约定好表单格式数据，通过服务端下发，在客户端做到动态表单录入
