SwipeRefreshLayout+RcyclerView完成下拉刷新，上拉數(shù)據(jù)加載

關(guān)于RcycyclerView的介紹，推薦大家去看洪洋的博客，里面已經(jīng)介紹的很詳細(xì)了。
http://blog.csdn.net/lmj623565791/article/details/45059587
官方文檔：
https://developer.android.google.cn/reference/android/support/v7/widget/RecyclerView.html
參考一下自己動手做了個demo，并加上了下拉刷新，和上拉加載的效果。
包括刷新狀態(tài)的時候，改變標(biāo)題欄的顏色，等等。

項目放在了github上，需要的可以去查看源碼
https://github.com/wapchief/android-CollectionDemo

先來看下效果：


wapchief.com

使用條件
在modle下的build.gardle注入依賴：

    compile 'com.android.support:recyclerview-v7:23.1.0'

當(dāng)然也可以在project Structure中選擇model，直接搜索V7包導(dǎo)入即可。

布局文件
只需要兩部分，swipeRefreshLayout負(fù)責(zé)控制刷新，RecyclerView負(fù)責(zé)數(shù)據(jù)展示：

<android.support.v4.widget.SwipeRefreshLayout
   android:id="@+id/swipeRefreshLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
   android:id="@+id/recyclerView"
   android:dividerHeight="10dp"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>
</android.support.v4.widget.SwipeRefreshLayout>

item的布局
這里只用了一個textVIew，并在text頂部添加了一個圖片效果：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@mipmap/ic_launcher"
    android:text="測試"
    android:id="@+id/tv_item"
    android:gravity="center">
</TextView>

到這里基本完成了xml的編寫，但是還少一個加載中的布局，現(xiàn)在很流行的一個簡單樣式，在上拉的時候會提示正在加載：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:gravity="center"
    android:background="@android:color/white"
    android:orientation="horizontal">

    <ProgressBar
        android:layout_marginRight="6dp"
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

    <TextView
        android:id="@+id/tv_footview"
        style="@style/SmallGreyTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="正在加載" />


</LinearLayout>

打造適配器
在RecyclerView中已經(jīng)給我們定義好了Adapter，直接繼承就行
但是他沒有給我們提供監(jiān)聽的方法，需要我們自己寫。這里可以在適配器中直接定義監(jiān)聽的接口。隨后在Activity中調(diào)用。

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

    private List data;
    private Context context;
    private static final int TYPE_ITEM = 0;
    private static final int TYPE_FOOTER = 1;

    public interface OnItemClickListener {
        void onItemClick(View view, int position);

        void onItemLongClick(View view, int position);
    }

    private OnItemClickListener onItemClickListener;

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    @Override
    public int getItemCount() {
        return data.size() == 0 ? 0 : data.size() + 1;
    }

    @Override
    public int getItemViewType(int position) {
        if (position + 1 == getItemCount()) {
            return TYPE_FOOTER;
        } else {
            return TYPE_ITEM;
        }
    }

    public RecyclerViewAdapter(Context context, List data) {
        this.context = context;
        this.data = data;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //根據(jù)position判斷要加載的界面，可以是多個頁面的item
        if (viewType == TYPE_ITEM) {
            View view = LayoutInflater.from(context).inflate(R.layout.recycler_view_item, parent, false);
            return new ItemViewHolder(view);
        } else if (viewType == TYPE_FOOTER) {
            View view = LayoutInflater.from(context).inflate(R.layout.item_foot, parent, false);
            return new FootViewHolder(view);
        }
        return null;
    }

    @Override
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof ItemViewHolder) {
            if (onItemClickListener != null) {
                holder.itemView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        int position = holder.getLayoutPosition();
                        onItemClickListener.onItemClick(holder.itemView, position);
                    }
                });
                holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
                    @Override
                    public boolean onLongClick(View v) {
                        int position = holder.getLayoutPosition();
                        onItemClickListener.onItemLongClick(holder.itemView, position);
                        return false;
                    }
                });
            }
        }
    }

    //展示的item
    class ItemViewHolder extends RecyclerView.ViewHolder {

        TextView tv;
        public ItemViewHolder(View view) {
            super(view);
            tv = (TextView) view.findViewById(R.id.tv_item);
        }
    }
     //正在加載
    static class FootViewHolder extends RecyclerView.ViewHolder {

        public FootViewHolder(View view) {
            super(view);
        }
    }
}

Activity
在主方法里，使用initview來初始化數(shù)據(jù)。所有的刷新動作都在這里完成

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.recycler_view);
        ButterKnife.bind(this);
        initview();
        initData();
    }

使用initData來完成首次進(jìn)入加載小圓圈的效果

    public void initData() {
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                getdata();
            }
        }, 1500);
    }

在getData方法里提供了加載時所需要的數(shù)據(jù)

 private void getdata() {

        for (int i = 0; i < 10; i++) {
            data.add(i);
        }

        updateView();
    }

為了便于理解，我把刷新的方法單獨拿出來
在加載一次數(shù)據(jù)之后，調(diào)用adaper的notifyDataSetChanged();方法進(jìn)行重繪，查看該方法的官方源碼 會發(fā)現(xiàn)其實執(zhí)行的是mObservable.notifyChanged();意為通知觀察者數(shù)據(jù)發(fā)生改變，隨后執(zhí)行刷新的動作

    private void updateView() {

        adapter.notifyDataSetChanged();
        //setRefreshing方法必須在view初始化完畢之后使用
        swipeRefreshLayout.setRefreshing(false);
        //獲取到數(shù)據(jù)變化通知刷新
        adapter.notifyItemRemoved(adapter.getItemCount());
    }

到這一步我們僅僅只是做了一個數(shù)據(jù)變化的操作。
具體設(shè)置RecyclerView樣式等，還需要我們回到initview一步步的進(jìn)行。

  • 設(shè)置刷新圓圈的顏色： (可以設(shè)置一個或多個)
swipeRefreshLayout.setColorSchemeResources(
                R.color.blue
                , R.color.oriange
                , R.color.black
                , R.color.red);
  • 設(shè)置完swipeRefreshLayout后，開線程進(jìn)行刷新操作。
    使用setOnRefreshListener方法監(jiān)聽刷新狀態(tài)
    每刷新一次執(zhí)行clear，清空一次數(shù)據(jù)。然后再重新調(diào)用getdata方法獲取新數(shù)據(jù)。
        swipeRefreshLayout.post(new Runnable() {
            @Override
            public void run() {
                //開始
                swipeRefreshLayout.setRefreshing(true);
            }
        });
     
        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                //設(shè)置延遲刷新時間1800
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        //刷新數(shù)據(jù)
                        data.clear();
                        getdata();
                    }
                }, 1800);
            }
        });
  • 設(shè)置適配器
    通過setLayoutManager設(shè)置RecyclerView樣式。
    RecyclerView提供了三種樣式，分別是

1、LinearLayoutManager線性布局
2、GridLayoutManager網(wǎng)格布局
3、StaggeredGridLayoutManager瀑布流布局
常用的就是線性布局

  • 監(jiān)聽RecyclerView滑動狀態(tài)
    有兩種狀態(tài)一般常用第二種，也就是刷新的時候進(jìn)行的操作
    在獲取到可見的item個數(shù)之后，如果滑到了下一個，就進(jìn)行判斷是否等于實際一次加載的item個數(shù)。
       layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(adapter);

        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            //當(dāng)RecyclerView的滑動狀態(tài)改變時觸發(fā)
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                Log.d("測試-----------test", "狀態(tài)改變 = " + newState);

            }

            /**
             * 當(dāng)RecyclerView滑動時觸發(fā)
             * 類似點擊事件的MotionEvent.ACTION_MOVE
             */
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                //獲取可見item個數(shù)
                int lastVisibleItemPosition = layoutManager.findLastVisibleItemPosition();
                if (lastVisibleItemPosition + 1 == adapter.getItemCount()) {
                    //加載
                    boolean isRefreshing = swipeRefreshLayout.isRefreshing();
                    if (isRefreshing) {
                        tvTitle.setBackgroundColor(getResources().getColor(R.color.black_transparent));
                        adapter.notifyItemRemoved(adapter.getItemCount());
                        return;
                    }
                    if (!isLoading) {
                        isLoading = true;
                        handler.postDelayed(new Runnable() {
                            @Override
                            public void run() {
                                getdata();
                                Log.d("測試--------------test", "完成加載更多");

                                isLoading = false;
                            }
                        }, 1000);
                    }
                }

            }
        });

到這里，就已經(jīng)完成了整個加載，刷新的動作。
但是還缺一個監(jiān)聽事件。
就是我們在adapter里面設(shè)置過的接口，如果不用豈不是浪費了。

        adapter.setOnItemClickListener(new RecyclerViewAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                UToasts.showShort(RecyclerViewActivity.this, "點擊了item:" + position);
            }

            @Override
            public void onItemLongClick(View view, int position) {

            }
        });

好了，所有功能基本都實現(xiàn)了。
如果對效果不滿意可以根據(jù)需要修改。比如在頭部放個標(biāo)題欄，當(dāng)滑動當(dāng)一定距離的時候，可以設(shè)置顏色透明漸變，或者隱藏布局等，可以充分利用空間。
效果我已經(jīng)做出來了。具體可以去查看我github的demo，后期我也會寫一篇文章來介紹滑動事件。
如果您覺得該內(nèi)容對您有所幫助，歡迎star，項目地址：https://github.com/wapchief/android-CollectionDemo
如有不妥，歡迎指正。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容