复杂type页面封装库，支持多种状态切换和下拉刷新上拉加载

时间 2019-11-06

标签复杂 type 页面封装支持多种状态切换下拉刷新加载栏目软件设计繁體版

原文原文链接

目录介绍

1.复杂页面库介绍
2.本库优点亮点
- 2.1 支持多种状态切换管理
- 2.2 支持添加多个header和footer
- 2.3 支持侧滑功能和拖拽移动
- 2.4 其余亮点介绍
3.如何使用介绍
- 3.1 最基础的使用
- 3.2 添加下拉刷新和加载更多监听
- 3.3 添加header和footer操做
- 3.4 设置数据和刷新
- 3.5 设置adapter
- 3.6 设置条目点击事件
- 3.7 设置侧滑删除功能[QQ侧滑删除]
- 3.8 轻量级拖拽排序与滑动删除
4.关于状态切换
- 4.1 关于布局内容
- 4.2 关于实现思路
- 4.3 关于状态切换api调用
- 4.4 关于自定义状态布局
- 4.5 关于自定义布局交互事件处理
5.经常使用api介绍
- 5.1 状态切换方法说明
- 5.2 viewHolder方法说明
- 5.3 adapter方法说明
- 5.4 分割线方法说明
- 5.5 swipe侧滑方法说明
- 5.6 其余api说明
6.优化实现点
- 6.1 viewHolder优化
- 6.2 状态管理器优化
- 6.3 recyclerView滑动卡顿优化
- 6.4 多线程下插入数据优化
- 6.5 rv四级缓存
- 6.6 异常状况下保存状态
7.实现效果展现
8.版本更新说明
9.参考资料说明
10.其余内容介绍

开源库地址：github.com/yangchong21…

自定义支持上拉加载更多，下拉刷新，能够自定义头部和底部，能够添加多个header，使用一个原生recyclerView就能够搞定复杂界面。支持自由切换状态【加载中，加载成功，加载失败，没网络等状态】的控件，能够自定义状态视图View。拓展功能【支持长按拖拽，侧滑删除】，轻量级，能够选择性添加。持续更新……

1.复杂页面库介绍

自定义支持上拉加载更多【加载中，加载失败[好比没有更多数据]，加载异常[无网络]，加载成功等多种状态】，下拉刷新，能够实现复杂的状态页面，支持自由切换状态【加载中，加载成功，加载失败，没网络等状态】的控件，拓展功能[支持长按拖拽，侧滑删除]能够选择性添加。具体使用方法，能够直接参考demo案例。
支持复杂type页面，例如添加自定义头部HeaderView和底部布局FooterView，支持横向滑动list，还能够支持粘贴头部list[相似微信好友分组]，支持不规则瀑布流效果，支持侧滑删除功能。

2.本库优点亮点

2.1 支持多种状态切换管理

支持在布局中或者代码设置自定义不一样状态的view，一行代码既能够切换不一样的状态，十分方便。
针对自定义状态view或者layout，能够实现交互功能，好比当切换到网络异常的页面，能够点击页面控件取刷新数据或者跳转设置网络页面

2.2 支持添加多个header和footer

支持添加多个自定义header头部布局，能够自定义footer底部布局。十分方便实现复杂type的布局页面，结构上井井有条，便于维护。
支持复杂界面使用，好比有的页面包含有轮播图，按钮组合，横向滑动list，还有复杂list，那么用这个控件就能够搞定。

2.3 支持侧滑功能和拖拽移动

轻量级侧滑删除菜单，直接嵌套item布局便可使用，使用十分简单
经过自定义ItemTouchHelper实现RecyclerView条目Item拖拽排序，只是设置是否拖拽，设置拖拽item的背景颜色，优化了拖拽效果，好比在拖拽过程当中设置item的缩放和渐变效果

2.4 其余亮点介绍

支持上拉加载，下拉刷新。当上拉加载更多失败或者异常时，能够设置自定义加载更多失败或者异常布局(好比没有网络时的场景)，同时点击该异常或者失败布局能够恢复加载更多数据；当上拉加载更多没有更多数据时，能够设置自定义加载更多无数据布局。
能够设置上拉加载更多后自动加载下一页数据，也能够上拉加载更多后手动触发加载下一页数据。在上拉加载更多时，能够设置加载更多的布局，支持加载监听。
支持粘贴头部的需求效果，这种效果相似微信好友分组的那种功能界面。
支持插入【插入指定索引】，更新【更新指定索引或者data数据】或者删除某条数据，支持删除全部数据。同时在多线程条件下，添加了锁机制避免数据错乱！
支持横向滑动list效果，支持瀑布流的效果，还支持与CoordinatorLayout结合实现炫酷的效果。这种效果特别不错……
已经用于实际开发项目投资界，新芽，沙丘大学中……且通过近三年时间的迭代与维护，持续更新维护中！

3.如何使用介绍

3.1 最基础的使用

首先在集成：
- implementation 'org.yczbj:YCRefreshViewLib:2.5.8'

在布局中

<org.yczbj.ycrefreshviewlib.YCRefreshView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_progress="@layout/view_custom_loading_data"
    app:layout_empty="@layout/view_custom_empty_data"
    app:layout_error="@layout/view_custom_data_error"/>
复制代码

在代码中，初始化recyclerView

adapter = new PersonAdapter(this);
recyclerView.setAdapter(adapter);
final LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(linearLayoutManager);
adapter.addAll(data);
复制代码

在代码中，建立adapter实现RecyclerArrayAdapter

public class PersonAdapter extends RecyclerArrayAdapter<PersonData> {

    public PersonAdapter(Context context) {
        super(context);
    }

    @Override
    public BaseViewHolder OnCreateViewHolder(ViewGroup parent, int viewType) {
        return new PersonViewHolder(parent);
    }

    public class PersonViewHolder extends BaseViewHolder<PersonData> {

        private ImageView iv_news_image;

        PersonViewHolder(ViewGroup parent) {
            super(parent, R.layout.item_news);
            iv_news_image = getView(R.id.iv_news_image);
        }

        @Override
        public void setData(final PersonData person){

        }
    }
}
复制代码

3.2 添加下拉刷新和加载更多监听

下拉刷新监听操做

//设置刷新listener
recyclerView.setRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        //刷新操做
    }
});
//设置是否刷新
recyclerView.setRefreshing(false);
//设置刷新颜色
recyclerView.setRefreshingColorResources(R.color.colorAccent);
复制代码

上拉加载更多监听操做

第一种状况，上拉加载更多后自动加载下一页数据

//设置上拉加载更多时布局，以及监听事件
adapter.setMore(R.layout.view_more, new OnLoadMoreListener() {
    @Override
    public void onLoadMore() {
        //能够作请求下一页操做
    }
});
复制代码

第二种状况，上拉加载更多后手动触发加载下一页数据

adapter.setMore(R.layout.view_more2, new OnMoreListener() {
    @Override
    public void onMoreShow() {
        //不作处理
    }

    @Override
    public void onMoreClick() {
        //点击触发加载下一页数据
    }
});
复制代码

在上拉加载更多时，可能出现没有更多数据，或者上拉加载失败，该如何处理呢？

//设置上拉加载没有更多数据监听
adapter.setNoMore(R.layout.view_no_more, new OnNoMoreListener() {
    @Override
    public void onNoMoreShow() {
        //上拉加载，没有更多数据展现，这个方法能够暂停或者中止加载数据
        adapter.pauseMore();
    }

    @Override
    public void onNoMoreClick() {
        //这个方法是点击没有更多数据展现布局的操做，好比能够作吐司等等
        Log.e("逗比","没有更多数据了");
    }
});
//设置上拉加载更多异常监听数据监听
adapter.setError(R.layout.view_error, new OnErrorListener() {
    @Override
    public void onErrorShow() {
        //上拉加载，加载更多数据异常展现，这个方法能够暂停或者中止加载数据
        adapter.pauseMore();
    }

    @Override
    public void onErrorClick() {
        //这个方法是点击加载更多数据异常展现布局的操做，好比恢复加载更多等等
        adapter.resumeMore();
    }
});
复制代码

3.3 添加header和footer操做

添加headerView操做。至于添加footerView的操做，几乎和添加header步骤是同样的。

添加普通的布局【非listView或者RecyclerView布局】

adapter.addHeader(new InterItemView() {
    @Override
    public View onCreateView(ViewGroup parent) {
        View inflate = LayoutInflater.from(context).inflate(R.layout.header_view, null);
        return inflate;
    }

    @Override
    public void onBindView(View headerView) {
        TextView tvTitle = headerView.findViewById(R.id.tvTitle);
    }
});
复制代码

添加list布局【以横向recyclerView为例子】

adapter.addHeader(new InterItemView() {
    @Override
    public View onCreateView(ViewGroup parent) {
        RecyclerView recyclerView = new RecyclerView(parent.getContext()){
            //为了避免打扰横向RecyclerView的滑动操做，能够这样处理
            @SuppressLint("ClickableViewAccessibility")
            @Override
            public boolean onTouchEvent(MotionEvent event) {
                super.onTouchEvent(event);
                return true;
            }
        };
        return recyclerView;
    }

    @Override
    public void onBindView(View headerView) {
        //这里的处理别忘了
        ((ViewGroup)headerView).requestDisallowInterceptTouchEvent(true);
    }
});
复制代码

注意要点
- 若是添加了HeaderView，凡是经过ViewHolder拿到的position都要减掉HeaderView的数量才能获得正确的position。

3.4 设置数据和刷新

添加全部数据，能够是集合，也能够是数组

//添加全部数据
adapter.addAll(data);
//添加单挑数据
adapter.add(data);
复制代码

插入，刷新和删除数据

//插入指定索引数据，单个数据
adapter.insert(data, pos);
//插入指定索引数据，多个数据
adapter.insertAll(data, pos);
//刷新指定索引数据
adapter.update(data, pos);
//删除数据，指定数据
adapter.remove(data);
//删除数据，指定索引
adapter.remove(pos);
//清空全部数据
复制代码

3.5 设置adapter

注意自定义adapter须要实现RecyclerArrayAdapter，其中T是泛型，就是你要使用的bean数据类型

public class PersonAdapter extends RecyclerArrayAdapter<PersonData> {

    public PersonAdapter(Context context) {
        super(context);
    }

    @Override
    public BaseViewHolder OnCreateViewHolder(ViewGroup parent, int viewType) {
        return new PersonViewHolder(parent);
    }

    public class PersonViewHolder extends BaseViewHolder<PersonData> {

        private TextView tv_title;
        private ImageView iv_news_image;

        PersonViewHolder(ViewGroup parent) {
            super(parent, R.layout.item_news);
            iv_news_image = getView(R.id.iv_news_image);
            tv_title = getView(R.id.tv_title);

            //添加孩子的点击事件
            addOnClickListener(R.id.iv_news_image);
            addOnClickListener(R.id.tv_title);
        }

        @Override
        public void setData(final PersonData person){
            Log.i("ViewHolder","position"+getDataPosition());
            tv_title.setText(person.getName());
        }
    }
}
复制代码

3.6 设置条目点击事件

条目单击点击事件，长按事件[省略，能够本身看代码]

adapter.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(int position) {
        if (adapter.getAllData().size()>position && position>=0){
            //处理点击事件逻辑
        }
    }
});
复制代码

条目中孩子的点击事件

//添加孩子的点击事件，能够看3.5设置adapter
addOnClickListener(R.id.iv_news_image);
addOnClickListener(R.id.tv_title);

//设置孩子的点击事件
adapter.setOnItemChildClickListener(new OnItemChildClickListener() {
    @Override
    public void onItemChildClick(View view, int position) {
        switch (view.getId()){
            case R.id.iv_news_image:
                Toast.makeText(HeaderFooterActivity.this,
                        "点击图片了",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tv_title:
                Toast.makeText(HeaderFooterActivity.this,
                        "点击标题",Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
    }
});
复制代码

3.7 设置侧滑删除功能[QQ侧滑删除]

在布局文件中，这里省略部分代码

<org.yczbj.ycrefreshviewlib.swipeMenu.YCSwipeMenu
    android:orientation="horizontal">
    <!--item内容-->
    <RelativeLayout
    </RelativeLayout>

    <!-- 侧滑菜单 -->
    <Button
        android:id="@+id/btn_del"/>
    <Button
        android:id="@+id/btn_top"/>
</org.yczbj.ycrefreshviewlib.swipeMenu.YCSwipeMenu>
复制代码

在代码中设置

在adapter中定义接口

private OnSwipeMenuListener listener;
public void setOnSwipeMenuListener(OnSwipeMenuListener listener) {
    this.listener = listener;
}
复制代码

在adapter设置点击事件

View.OnClickListener clickListener = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_del:
                if (null != listener) {
                    listener.toDelete(getAdapterPosition());
                }
                break;
            case R.id.btn_top:
                if (null != listener) {
                    listener.toTop(getAdapterPosition());
                }
                break;
        }
    }
};
btn_del.setOnClickListener(clickListener);
btn_top.setOnClickListener(clickListener);
复制代码

处理置顶或者删除的功能

adapter.setOnSwipeMenuListener(new OnSwipeMenuListener() {
    //删除功能
    @Override
    public void toDelete(int position) {

    }

    //置顶功能
    @Override
    public void toTop(int position) {

    }
});
复制代码

3.8 轻量级拖拽排序与滑动删除

处理长按拖拽，滑动删除的功能。轻量级，自由选择是否实现。

mCallback = new DefaultItemTouchHelpCallback(new DefaultItemTouchHelpCallback
                        .OnItemTouchCallbackListener() {
    @Override
    public void onSwiped(int adapterPosition) {
        // 滑动删除的时候，从数据库、数据源移除，并刷新UI
    }

    @Override
    public boolean onMove(int srcPosition, int targetPosition) {
        return false;
    }
});
mCallback.setDragEnable(true);
mCallback.setSwipeEnable(true);
mCallback.setColor(this.getResources().getColor(R.color.colorAccent));
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(mCallback);
itemTouchHelper.attachToRecyclerView(recyclerView);
复制代码

4.关于状态切换

4.1 关于布局内容

YCRecyclerView是一个组合自定义控件，其布局以下所示

<!--刷新控件    省略部分代码-->
<android.support.v4.widget.SwipeRefreshLayout>
    <FrameLayout>
        <!--RecyclerView控件-->
        <android.support.v7.widget.RecyclerView/>
        <!--加载数据为空时的布局-->
        <FrameLayout/>
        <!--正在加载数据中的布局-->
        <FrameLayout/>
        <!--加载错误时的布局：网络错误或者请求数据错误-->
        <FrameLayout/>
    </FrameLayout>
</android.support.v4.widget.SwipeRefreshLayout>
复制代码

4.2 关于实现思路

关于页面状态切换的思路
- 第一种方式：直接把这些界面include到main界面中，而后动态去切换界面，后来发现这样处理不容易复用到其余项目中，并且在activity中处理这些状态的显示和隐藏比较乱
- 第二种方式：利用子类继承父类特性，在父类中写切换状态，但有些界面若是没有继承父类，又该如何处理
而本库采用的作法思路
- 一个帧布局FrameLayout里写上4种不一样类型布局，正常布局，空布局，加载loading布局，错误布局[网络异常，加载数据异常]
- 固然也能够自定义这些状态的布局，经过addView的形式，将不一样状态布局添加到对应的FrameLayout中。而切换状态，只须要设置布局展现或者隐藏便可。

4.3 关于状态切换api调用

以下所示

//设置加载数据完毕状态
recyclerView.showRecycler();
//设置加载数据为空状态
recyclerView.showEmpty();
//设置加载错误状态
recyclerView.showError();
//设置加载数据中状态
recyclerView.showProgress();
复制代码

4.4 关于自定义状态布局

以下所示

//设置空状态页面自定义布局
recyclerView.setEmptyView(R.layout.view_custom_empty_data);
recyclerView.setEmptyView(view);
//获取空页面自定义布局
View emptyView = recyclerView.getEmptyView();

//设置异常状态页面自定义布局
recyclerView.setErrorView(R.layout.view_custom_data_error);
recyclerView.setErrorView(view);

//设置加载loading状态页面自定义布局
recyclerView.setProgressView(R.layout.view_progress_loading);
recyclerView.setProgressView(view);
复制代码

4.5 关于自定义布局交互事件处理

有时候，加载页面出现异常状况，好比没有网络会显示自定义的网络异常页面。如今须要点击异常页面按钮等等操做，那么该如何作呢？

//注意须要
LinearLayout ll_error_view = (LinearLayout) recyclerView.findViewById(R.id.ll_error_view);
ll_error_view.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //好比，跳转到网络设置页面，或者再次刷新数据，或者其余操做等等
    }
});
复制代码

5.经常使用api介绍

状态切换方法说明

//设置加载数据完毕状态
recyclerView.showRecycler();
//设置加载数据为空状态
recyclerView.showEmpty();
//设置加载错误状态
recyclerView.showError();
//设置加载数据中状态
recyclerView.showProgress();
//设置自定义布局，其余几个方法同理
recyclerView.setEmptyView(R.layout.view_custom_empty_data);
复制代码

viewHolder方法说明

//子类设置数据方法
setData方法
//findViewById方式
iv_news_image = getView(R.id.iv_news_image);
//获取上下文
Context context = getContext();
//获取数据索引的位置
int dataPosition = getDataPosition();
//添加item中子控件的点击事件
addOnClickListener(R.id.tv_title);
复制代码

adapter方法说明

//删除索引处的数据
adapter.remove(0);
//触发清空全部数据
adapter.removeAll();
//添加数据，注意这个是在最后索引处添加
adapter.add(new PersonData());
//添加全部数据
adapter.addAll(DataProvider.getPersonList(0));
//插入数据
adapter.insert(data,3);
//在某个索引处插入集合数据
adapter.insertAll(data,3);
//获取item索引位置
adapter.getPosition(data);
//触发清空全部的数据
adapter.clear();
//获取全部的数据
adapter.getAllData();

//清除全部footer
adapter.removeAllFooter();
//清除全部header
adapter.removeAllHeader();
//添加footerView
adapter.addFooter(view);
//添加headerView
adapter.addHeader(view);
//移除某个headerView
adapter.removeHeader(view);
//移除某个footerView
adapter.removeFooter(view);
//获取某个索引处的headerView
adapter.getHeader(0);
//获取某个索引处的footerView
adapter.getFooter(0);
//获取footer的数量
adapter.getFooterCount();
//获取header的数量
adapter.getHeaderCount();

//设置上拉加载更多的自定义布局和监听
adapter.setMore(R.layout.view_more,listener);
//设置上拉加载更多的自定义布局和监听
adapter.setMore(view,listener);
//设置上拉加载没有更多数据布局
adapter.setNoMore(R.layout.view_nomore);
//设置上拉加载没有更多数据布局
adapter.setNoMore(view);
//设置上拉加载没有更多数据监听
adapter.setNoMore(R.layout.view_nomore,listener);
//设置上拉加载异常的布局
adapter.setError(R.layout.view_error);
//设置上拉加载异常的布局
adapter.setError(view);
//设置上拉加载异常的布局和异常监听
adapter.setError(R.layout.view_error,listener);
//暂停上拉加载更多
adapter.pauseMore();
//中止上拉加载更多
adapter.stopMore();
//恢复上拉加载更多
adapter.resumeMore();

//获取上下文
adapter.getContext();
//应该使用这个获取item个数
adapter.getCount();
//设置操做数据[增删改查]后，是否刷新adapter
adapter.setNotifyOnChange(true);

//设置孩子点击事件
adapter.setOnItemChildClickListener(listener);
//设置条目点击事件
adapter.setOnItemClickListener(listener);
//设置条目长按事件
adapter.setOnItemLongClickListener(listener);
复制代码

分割线方法说明

//能够设置线条颜色和宽度的分割线
//四个参数，上下文，方向，线宽，颜色
final RecycleViewItemLine line = new RecycleViewItemLine(this, LinearLayout.HORIZONTAL,
        (int)AppUtils.convertDpToPixel(1,this),
        this.getResources().getColor(R.color.color_f9f9f9));
recyclerView.addItemDecoration(line);

//适用于瀑布流中的间距设置
SpaceViewItemLine itemDecoration = new SpaceViewItemLine(
        (int) AppUtils.convertDpToPixel(8,this));
itemDecoration.setPaddingEdgeSide(true);
itemDecoration.setPaddingStart(true);
itemDecoration.setPaddingHeaderFooter(true);
recyclerView.addItemDecoration(itemDecoration);

//能够设置线条颜色和宽度，而且能够设置距离左右的间距
DividerViewItemLine itemDecoration = new
        DividerViewItemLine( this.getResources().getColor(R.color.color_f9f9f9)
        , LibUtils.dip2px(this, 1f),
        LibUtils.dip2px(this, 72), 0);
itemDecoration.setDrawLastItem(false);
recyclerView.addItemDecoration(itemDecoration);
复制代码

其余api说明

7.实现效果展现

7.1 使用过YCRefreshView库的案例代码

能够直接参考demo，或者直接参考的我其余案例，其中这几个案例中使用到了该库
github.com/yangchong21…
github.com/yangchong21…

7.2 图片展现效果

7.3 部分案例图展现[部分案例图能够参考7.1]

8.版本更新说明

v1.0 更新于2016年11月2日
v1.1 更新于2017年3月13日
v1.3 更新于2017年8月9日
v1.…… 更新于2018年1月5日
v2.2 更新于2018年1月17日
v2.3 更新于2018年2月9日
v2.4 更新于2018年3月19日
v2.5.6 更新于2018年8月6日
v2.5.7 更新于2019年3月3日
v2.5.8 更新于2019年3月4日

9.参考资料说明

很是感谢前辈大神的封装思路和代码案例，感谢！！！
- github.com/XRecyclerVi…
- BGARefreshLayout-Android：github.com/bingoogolap…
- Android-PullToRefresh：github.com/chrisbanes/…
- adapter：github.com/CymChad/Bas…
- fastAdapter：github.com/mikepenz/Fa…
- Jude95/EasyRecyclerView：github.com/Jude95/Easy…
- UltimateRecyclerView：github.com/cymcsg/Ulti…
关于viewHolder的封装，参考是鸿洋大神的baseAdapter
关于RecyclerView实现条目Item拖拽排序与滑动删除，参看是严正杰大神的博客，拖拽排序
关于仿照QQ侧滑删除，参考是SwipeMenu的案例，具体能够看：SwipeMenu

10.其余内容介绍

01.关于博客汇总连接

02.关于个人博客

个人我的站点：www.yczbj.org，www.ycbjie.cn
github：github.com/yangchong21…
知乎：www.zhihu.com/people/yczb…
简书：www.jianshu.com/u/b7b2c6ed9…
csdn：my.csdn.net/m0_37700275
喜马拉雅听书：www.ximalaya.com/zhubo/71989…
开源中国：my.oschina.net/zbj1618/blo…
泡在网上的日子：www.jcodecraeer.com/member/cont…
邮箱：yangchong211@163.com
阿里云博客：yq.aliyun.com/users/artic… 239.headeruserinfo.3.dT4bcV
segmentfault头条：segmentfault.com/u/xiangjian…
掘金：juejin.im/user/593943…

03.勘误及提问

若是有疑问或者发现错误，能够在相应的 issues 进行提问或勘误。若是喜欢或者有所启发，欢迎star，对做者也是一种鼓励。

04.关于LICENSE

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
复制代码