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

前言

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

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

源码地址

Github地址:https://github.com/free46000/MultiItem,请大家多多关注。

系列文章

效果截图

Form表单效果
Form表单效果

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表单流程
Form表单流程

总结

前言中也说利用RecyclerView实现Form表单了并不是一种主流的实现方式,当然会存在一些不足之处,但是比较适用于大量表单业务的客户端中,希望大家多多交流!
最后扩展一下大家的思路,其实我们可以约定好表单格式数据,通过服务端下发,在客户端做到动态表单录入

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容