前言
本文是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拖动 支持缩小后拖动
用法
使用方法
首先初始化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
,所以并没有太多可以讲解的地方,所以花了一个流程图供大家参考:
总结
前言中也说利用RecyclerView
实现Form
表单了并不是一种主流的实现方式,当然会存在一些不足之处,但是比较适用于大量表单业务的客户端中,希望大家多多交流!
最后扩展一下大家的思路,其实我们可以约定好表单格式数据,通过服务端下发,在客户端做到动态表单录入