用 RecyclerView 实现 Form 表单 灵活可复用 给你一个新思路 - MultiItem 进阶

前言

本文是MultiItem系列的进阶文章，讲解如何利用RecyclerView实现Form表单，在平常开发中多数人仍是使用普通布局方式实现，这种方案比较直观也很简单，可是若是表单业务较多，而且易变，不少弊端就会显现，不过这正是使用RecyclerView实现的优点所在，能够自定义一套通用的输入类型的ItemInput组件，既灵活又可复用。MultiItem特色：

• 直接使用业务中的实体类为RecyclerView Adapter设置数据源，不须要作任何封装
• RecyclerView Adapter零编码，解放了复杂的Adapter类
• 支持DataBinding，让你清爽的编写列表代码
• 支持Form表单录入，懒加载易复用，支持DataBinding、隐藏域、输入内容验证及是否变化

源码地址

Github地址：github.com/free46000/M…，请你们多多关注。

系列文章

• 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表单了并非一种主流的实现方式，固然会存在一些不足之处，可是比较适用于大量表单业务的客户端中，但愿你们多多交流！
最后扩展一下你们的思路，其实咱们能够约定好表单格式数据，经过服务端下发，在客户端作到动态表单录入