商城项目实战 | 8.2 SwipeRefreshLayout 实现可以下拉刷新和加载更多的热门商品列表

本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。

在上篇文章《 商城项目实战 | 8.1 SwipeRefreshLayout 详解 官方下拉刷新控件》中对 SwipeRefreshLayout 做了详细的介绍了，但是也发现了该控件有个问题，那就是它只支持下拉刷新，不支持加载更多，这在使用的时候就有点麻烦了，所以本篇文章就要对 SwipeRefreshLayout 进行扩展，使用 SwipeRefreshLayout 实现可以下拉刷新和加载更多的热门商品列表。

所要实现的热门商品列表的效果

SwipeRefreshLayout 具有下拉刷新的功能，但是加载更多则不支持，所以就要我们自己扩展了，本篇文章就介绍 Github 上面开源的一款控件 MaterialRefreshLayout，这款组件在原本官方的控件 SwipeRefreshLayout 上做了扩展，不仅可以支持下拉刷新，还可以支持加载更多。先来看下热门商品的效果图，如下。

图中的热门商品列表可以下拉刷新数据，同时还需要加载更多的功能，如何实现这样的热门商品列表的效果呢？带着这个问题往下看。

热门商品列表实现过程

已经看到了热门商品列表的效果，下面就是具体的实现过程了。

1. Gradle 添加依赖

在 module 下的 build.gradle 文件中添加所需第三方控件的依赖。

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.2.0'
    compile 'com.android.support.constraint:constraint-layout:1.0.1'
    testCompile 'junit:junit:4.12'
    compile 'com.daimajia.slider:library:1.1.5@aar'
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.nineoldandroids:library:2.4.0'
    compile 'com.android.support:support-v4:25.2.0'
    compile 'com.android.support:recyclerview-v7:25.2.0'
    compile 'com.android.support:cardview-v7:25.2.0'
    compile 'com.squareup.okhttp3:okhttp:3.6.0'
    compile 'com.google.code.gson:gson:2.8.0'
    compile 'com.github.d-max:spots-dialog:0.7'
    compile 'com.facebook.fresco:fresco:1.2.0'
    compile 'com.cjj.materialrefeshlayout:library:1.3.0'
}

2. 添加权限

因为这里需要从网络请求数据，所以需要网络权限。

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

3. 定义布局

根据效果图来设计 RecyclerView 的 item 布局以及 热门模块 HotFragment 的布局。

首先是新建 xml 布局文件 fragment_hot_layout.xml，也就是热门模块 HotFragment 的布局，如下。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.cjj.MaterialRefreshLayout
        android:id="@+id/hot_layout_refresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        app:overlay="true"
        app:wave_show="true"
        app:wave_color="#90ffffff"
        app:progress_colors="@array/material_colors"
        app:wave_height_type="higher"
        >

        <android.support.v7.widget.RecyclerView
            android:id="@+id/hot_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </android.support.v7.widget.RecyclerView>

    </com.cjj.MaterialRefreshLayout>

</LinearLayout>

然后就是RecyclerView 的 item 布局了。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/selector_list_item"
    android:padding="5dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.facebook.drawee.view.SimpleDraweeView
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:background="@null"
        android:id="@+id/drawee_view"
        android:layout_alignParentLeft="true"
        app:viewAspectRatio="1"
        >
    </com.facebook.drawee.view.SimpleDraweeView>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/drawee_view">

        <TextView
            android:id="@+id/text_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:textSize="16sp"
            android:maxLines="3"
            />

        <TextView
            android:id="@+id/text_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textColor="@color/firebrick"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/bigRedButton"
            android:layout_marginTop="20dp"
            android:text="立即购买"
            android:layout_gravity="right|bottom"
            />
    </LinearLayout>

</RelativeLayout>

这里图片加载组件使用的是 Facebook 开源的图片加载组件 Fresco。

4. 初始化 Fresco 类

因为使用了图片加载组件 Fresco，所以必须在 Application 中做对 Fresco 类初始化的处理。

public class CNiaoApplicaiton extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}

5. 定义实体类

根据所要请求的数据定义好相应的实体类，这里涉及了两个实体类，分别为 WaresInfo 商品信息类以及 PageInfo 页面信息类。

WaresInfo 商品信息类如下。

public class WaresInfo implements Serializable{
    private Long id;
    private String name;
    private String imgUrl;
    private String description;
    private Float price;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getImgUrl() {
        return imgUrl;
    }

    public void setImgUrl(String imgUrl) {
        this.imgUrl = imgUrl;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public Float getPrice() {
        return price;
    }

    public void setPrice(Float price) {
        this.price = price;
    }
}

下面就是 PageInfo 页面信息类。

public class PageInfo <T> implements Serializable{
    private  int currentPage;
    private  int pageSize;
    private  int totalPage;
    private  int totalCount;

    private List<T> list;

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }
}

6. 定义 Adapter

RecyclerView 作为列表控件，必定需要适配器 Adapter，下面是定义的 HotWaresAdapter。

public class HotWaresAdapter  extends RecyclerView.Adapter<HotWaresAdapter.ViewHolder>  {

    private List<WaresInfo> mDatas;

    private LayoutInflater mInflater;

    public HotWaresAdapter(List<WaresInfo> wares){
        mDatas = wares;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        mInflater = LayoutInflater.from(parent.getContext());
        View view = mInflater.inflate(R.layout.recycler_item_wares_layout,null);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        WaresInfo wares = getData(position);
        holder.draweeView.setImageURI(Uri.parse(wares.getImgUrl()));
        holder.textTitle.setText(wares.getName());
        holder.textPrice.setText("￥"+wares.getPrice());
    }

    public WaresInfo getData(int position){

        return mDatas.get(position);
    }

    public List<WaresInfo> getDatas(){

        return  mDatas;
    }
    public void clearData(){

        mDatas.clear();
        notifyItemRangeRemoved(0,mDatas.size());
    }

    public void addData(List<WaresInfo> datas){

        addData(0,datas);
    }

    public void addData(int position,List<WaresInfo> datas){

        if(datas !=null && datas.size()>0) {

            mDatas.addAll(datas);
            notifyItemRangeChanged(position, mDatas.size());
        }
    }

    @Override
    public int getItemCount() {

        if(mDatas!=null && mDatas.size()>0)
            return mDatas.size();
        return 0;
    }



    class ViewHolder extends RecyclerView.ViewHolder{
        SimpleDraweeView draweeView;
        TextView textTitle;
        TextView textPrice;
        public ViewHolder(View itemView) {
            super(itemView);

            draweeView = (SimpleDraweeView) itemView.findViewById(R.id.drawee_view);
            textTitle= (TextView) itemView.findViewById(R.id.text_title);
            textPrice= (TextView) itemView.findViewById(R.id.text_price);
        }
    }
}

在 Adapter 中写入了 clearData() 清除数据以及 addData(List datas) 添加数据的方法，为之后刷新数据和加载更多数据时调用。

7. 定义获取数据的方法

布局、实体类还有适配器都已经写好了，下面就是要开始写请求数据的方法了。

private void getData(){

        String url = Constants.API.WARES_HOT+"?curPage="+currPage+"&pageSize="+pageSize;
        httpHelper.get(url, new SpotsCallBack<PageInfo<WaresInfo>>(getContext()) {
            @Override
            public void onSuccess(Response response, PageInfo<WaresInfo> waresPage) {
                datas = waresPage.getList();
                currPage = waresPage.getCurrentPage();
                totalPage =waresPage.getTotalPage();
                showData();
            }

            @Override
            public void onError(Response response, int code, Exception e) {
                Toast.makeText(getActivity(),"Error："+code+e.toString(),Toast.LENGTH_SHORT).show();
                super.onError(response,code,e);
            }

            @Override
            public void onFailure(Request request, Exception e) {
                super.onFailure(request, e);
                Toast.makeText(getActivity(),"Fail："+e.toString(),Toast.LENGTH_SHORT).show();
            }
        });
    }

    private  void showData(){

        switch (state){

            case  STATE_NORMAL:
                mAdatper = new HotWaresAdapter(datas);

                recyclerView.setAdapter(mAdatper);

                recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
                recyclerView.setItemAnimator(new DefaultItemAnimator());
                recyclerView.addItemDecoration(new WareItemDecoration(getContext(),WareItemDecoration.VERTICAL_LIST));

                break;

            case STATE_REFREH:
                mAdatper.clearData();
                mAdatper.addData(datas);
                recyclerView.scrollToPosition(0);
                layoutRefresh.finishRefresh();
                break;

            case STATE_MORE:
                mAdatper.addData(mAdatper.getDatas().size(),datas);
                recyclerView.scrollToPosition(mAdatper.getDatas().size());
                layoutRefresh.finishRefreshLoadMore();
                break;

        }
    }

对于数据的请求有三种状态，分别为 STATE_NORMAL 表示正常状态，STATE_REFREH 表示刷新状态，STATE_MORE 则表示加载更多的状态，根据不同的状态下请求数据来执行相应的操作。

8. 实现下拉刷新方法

下拉刷新时，可以直接调用获取数据方法 getData()，此时设置状态为 STATE_REFREH 刷新状态。

private  void refreshData(){
        currPage =1;
        state=STATE_REFREH;
        getData();
    }

9. 实现加载更多的方法

同样的，加载更多其实就是和下拉刷新状态有所不同，也是直接调用获取数据方法 getData()，此时设置状态为 STATE_MORE 加载更多状态。

private void loadMoreData(){
        currPage = ++currPage;
        state = STATE_MORE;
        getData();
    }

10. 初始化 MaterialRefreshLayout

下拉刷新和加载更多的方法都已经实现好了，可以直接初始化 MaterialRefreshLayout ，然后扩展它的刷新事件监听和加载更多事件监听，就可以实现我们所需要的效果了。

private  void initRefreshLayout(){

        layoutRefresh.setLoadMore(true);
        layoutRefresh.setMaterialRefreshListener(new MaterialRefreshListener() {
            @Override
            public void onRefresh(MaterialRefreshLayout materialRefreshLayout) {

                refreshData();

            }

            @Override
            public void onRefreshLoadMore(MaterialRefreshLayout materialRefreshLayout) {

                if(currPage <=totalPage)
                    loadMoreData();
                else{
                    Toast.makeText(getActivity(),"已经加载完成，没有更多数据了",Toast.LENGTH_SHORT).show();
                    layoutRefresh.finishRefreshLoadMore();
                }
            }
        });
    }

最终效果

所有的都实现好了之后，运行代码，获取最终效果。

最终基本实现了文章开始所要求的可以下拉刷新和加载更多的热门商品列表的效果。

关于 MaterialRefreshLayout 更多的使用，可以参考Github 源码 。