美文网首页程序员Android技术知识Android知识
用RecyclerView展示错误和空白界面 附加详情界面实践-

用RecyclerView展示错误和空白界面 附加详情界面实践-

作者: free46000 | 来源:发表于2017-04-25 00:58 被阅读0次

    前言

    本文是MultiItem系列的进阶文章,讲解如何展示空白、错误等状态页,这个功能比较常用,实现的思路也有很多,本文的思路是把状态页当成一个填充满RecyclerViewItem,不需要事先定义到布局中,然后利用库中封装的一个状态页辅助类进行管理,方便简洁,并且做到了用时再去初始化,减少资源浪费。另外会附加讲一下,对于展示业务中详情页的实践,由于这个实践目前比较简单,所以就不单拿出来写一篇文章了。MultiItem特点:

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

    源码地址

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

    系列文章

    效果截图

    空白错误页空白错误页
    详情页效果详情页效果

    用法

    开启数据绑定

    由于用到了数据绑定的技术,首先需要在build.gradle开启DataBinding

    dataBinding {
        enabled = true
    }
    

    状态页使用方法

    状态页就是空白错误等页面,首先初始化列表和辅助类,为列表设置点击监听,处理状态页的展示。让每个状态对应一个实例,使用起来更清晰。

    protected void initViews() {
        //初始化adapter
        BaseItemAdapter adapter = new BaseItemAdapter();
        //为XXBean数据源注册XXManager管理类
        adapter.register(TextBean.class, new TextViewManager());
        recyclerView.setAdapter(adapter);
        adapter.addDataItem(new TextBean("展示空白页"));
        adapter.addDataItem(new TextBean("展示错误页"));
        //设置点击监听,再点击Item的时候展示空白或者错误页面
        setOnItemClickListener(adapter);
        //初始化空白页辅助类
        emptyViewHelper = newStateViewHelper("列表数据为空");
        //初始化错误页辅助类
        errorViewHelper = newStateViewHelper("数据加载错误");
    }
    
    /**
     * 创建新的状态页辅助类
     *
     * @param message 状态页展示的信息
     * @return StateViewHelper
     */
    private StateViewHelper newStateViewHelper(String message) {
        //初始化状态Item
        BaseItemState stateItem = new ItemEmptyAndError(message);
        //初始化辅助类,需要一个BaseItemState
        StateViewHelper stateViewHelper = new StateViewHelper(recyclerView, stateItem);
        //设置状态页按钮的点击事件监听,处理状态页隐藏
        stateItem.setOnStateClickListener(() -> errorViewHelper.hide());
        return stateViewHelper;
    }
    
    /**
     * 设置点击监听,再点击Item的时候展示空白或者错误页面
     */
    private void setOnItemClickListener(BaseItemAdapter adapter) {
        adapter.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(BaseViewHolder viewHolder) {
                switch (viewHolder.getItemPosition()) {
                    case 0:
                        //展示空白页
                        emptyViewHelper.show();
                        break;
                    case 1:
                        //展示错误页
                        errorViewHelper.show();
                        break;
                }
            }
        });
    }
    

    由上面代码可以看出我们需要一个BaseItemState的类,Demo中自定义了一个ItemEmptyAndError的子类,使用了DataBinding的技术,由于本身并没有承载太多的业务,只是对一些属性进行存储,逻辑基本都在xml布局中,下面我们看下布局的主要代码:

    <?xml version="1.0" encoding="utf-8"?>
    <layout ... >
    
        <data>
            <variable
                name="itemData"
                type="com.freelib.multiitem.demo.state.ItemEmptyAndError"/>
        </data>
    
        <android.support.constraint.ConstraintLayout ... >
    
            <TextView
                //文本绑定
                android:text="@{itemData.message}"
                ... />
    
            <Button
                //点击监听
                android:onClick="@{() -> itemData.onStateClickListener.onStateClick()}"
                //文本绑定
                android:text="@{itemData.btnText}"
                ... />
        </android.support.constraint.ConstraintLayout>
    </layout>
    

    详情页相关实践

    Demo中介绍了展示用户详情页,并没有复杂的界面,首先我们为每一条用户信息项声明一个ItemInfo实体,Demo里为了简单,只实现了这一种类型,大家使用的时候视具体业务而定(例如:文章详情功能:就需要,标题、内容、回复等至少三种Item...)。
    下面我们来看看相关实现代码,组装用户展示项,并添加到列表中:

    protected void initViews() {
        UserBean userBean = getUserBean();
    
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        //初始化adapter
        BaseItemAdapter adapter = new BaseItemAdapter();
        //为UserBean数据源注册数据绑定View Holder Manager管理类
        adapter.register(ItemInfo.class, new DataBindViewHolderManager<>(
                R.layout.item_info, BR.itemData));
        recyclerView.setAdapter(adapter);
    
        //构建用户信息需要展示的ItemInfo的集合,每个ItemInfo代表页面中的一行
        List<ItemInfo> list = new ArrayList<>(5);
        list.add(new ItemInfo("名字", userBean.getName()));
        list.add(new ItemInfo("性别", userBean.getSex()));
        list.add(new ItemInfo("年龄", userBean.getAge()));
        list.add(new ItemInfo("城市", userBean.getAddr()));
        list.add(new ItemInfo("介绍", userBean.getInfo()));
        adapter.setDataItems(list);
    }
    

    然后我们看下ItemInfo实体类,其实非常简单:

    public class ItemInfo {
        private String name;
        private String value;
    
        public ItemInfo(String name, String value) {
            this.name = name;
            this.value = value;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public String getValue() {
            return value;
        }
    
        public void setValue(String value) {
            this.value = value;
        }
    }
    

    可以看出上面的代码中除了声明了新的ItemInfo实体类以外,其余全部使用了已有的方法并且是MultiItem库中已经定义好的基础类。所以用起来还是很轻的,希望大家多多尝试。

    总结

    状态界面采用辅助类的方式实现,没有侵入原有的业务代码,并且对于每种状态会生成对应的实例去管理,使用起来更灵活,更简洁。详情界面是对已有功能的一个实践,可能用户详情这个例子并不是特别适合,但是前面提到的文章详情界面应该更有说服力。期待大家多多挖掘实用的功能,欢迎大家多多交流。

    相关文章

      网友评论

        本文标题:用RecyclerView展示错误和空白界面 附加详情界面实践-

        本文链接:https://www.haomeiwen.com/subject/ezumzttx.html