那年的RecyclerView我們從頭擼一下
1. RecyclerView是什么?
根據(jù)Google官方給出的說明：A flexible view for providing a limited window into a large data set。能夠在有限的窗口中展示大數(shù)據(jù)集合的靈活視圖。
所以我們能夠理解為，RecyclerView的一個恰當?shù)氖褂脠鼍笆牵河捎诔叽缦拗?，用戶的設(shè)備不能一次性展現(xiàn)所有條目，用戶需要上下滾動以查看更多條目。滾出可見區(qū)域的條目將被回收，并在下一個條目可見的時候被復(fù)用。
對于減少內(nèi)存開銷和CPU的計算，緩存條目是一個非常有用的方法，因為這意味著我們不必每次都創(chuàng)建新的條目，從而減小內(nèi)存開銷和CPU的計算，而且還能夠有效降低屏幕的卡頓，保證滑動的順滑。
RecyclerView不關(guān)心視覺效果(visuals)
但是和ListView有什么區(qū)別呀?我們已經(jīng)使用ListView很長一段時間了呀，它一樣可以做到呀。從它的類名上看，RecyclerView代表的意義是，我只管Recycler View，也就是說RecyclerView只管回收與復(fù)用View，其他的開發(fā)者可以自己去設(shè)置。你想要另一個布局?插入另一個LayoutManager。你想要不同的動畫嗎?插入一個ItemAnimator，等等。可以看出其高度的解耦，給予你充分的定制自由(所以你才可以輕松的通過這個控件實現(xiàn)ListView,GirdView，瀑布流等效果)。
2. 引入RecyclerView
RecyclerView 是Support Library的一部分。所以只需要在app/build.gradle中添加以下依賴，便能立即使用：
- dependencies { compile 'com.android.support:recyclerview-v7:25.3.1'}
在布局文件中加入：
- <android.support.v7.widget.RecyclerView
- android:id="@+id/recycler_view"
- android:layout_width="match_parent"
- android:layout_height="match_parent" />
然后在頁面中引入RecyclerView即可：
- RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
OK，從現(xiàn)在開始，讓我們一步一步，開始了解它。
3. 使用RecyclerView
下面的表格中就是使用RecyclerView來顯示數(shù)據(jù)中用到的幾個最重要的類，這些類都是RecyclerView的內(nèi)部類，如果你想使用RecyclerView，需要做以下操作：
| Class | 功能 |
|---|---|
| Adapter | 處理數(shù)據(jù)集合并負責綁定視圖 |
| ViewHolder | 持有所有的用于綁定數(shù)據(jù)或者需要操作的View |
| LayoutManager | 負責擺放視圖等相關(guān)操作 |
| ItemDecoration | 負責繪制Item附近的分割線 |
| ItemAnimator | 為Item的一般操作添加動畫效果，如，增刪條目等 |
我們可以從下圖更直觀的了解到RecyclerView的基本結(jié)構(gòu)：
接下來，我將要描述每個類或接口的內(nèi)容以及如何使用它。
3.1 RecyclerView.ViewHolder
ViewHolder的基本用法是用來存放View對象。Android團隊很早之前就推薦使用“ViewHolder設(shè)計模式”，但是沒有要求開發(fā)者在Adapter中必須使用ViewHolder模式。那么現(xiàn)在對于這種新型的RecyclerView.Adapter，我們必須實現(xiàn)并使用這種模式。
Google官方等了這么長時間才強制使用ViewHolder模式，這有點奇怪，但遲做總比不做好。如果您不了解ViewHolder模式，請查看一下Android training Hold View Objects in a View Holder。另外網(wǎng)上有大量關(guān)于ListView優(yōu)化的文章。面試重點。
有一件事是專門針對RecyclerView的。ViewHolder子類可以通過訪問公共成員itemView來訪問ViewHolder的根視圖。所以不需要在ViewHolder子類中存儲。
下面是示例的ViewHolder的代碼，ViewHolder是示例Adapter的內(nèi)部類：
- public static class MyViewHolder extends RecyclerView.ViewHolder{
- TextView tv;
- public MyViewHolder(View itemView) {
- super(itemView);
- tv = (TextView) itemView.findViewById(R.id.tv);
- }
- }
3.2 Adapter
Adapter扮演著兩個角色。一是，根據(jù)不同ViewType創(chuàng)建與之相應(yīng)的的Item-Layout，二是，訪問數(shù)據(jù)集合并將數(shù)據(jù)綁定到正確的View上。這就需要我們重寫以下3個方法：
- public VH onCreateViewHolder(ViewGroup parent, int viewType) 創(chuàng)建Item視圖，并返回相應(yīng)的ViewHolder
- public void onBindViewHolder(VH holder, int position) 綁定數(shù)據(jù)到正確的Item視圖上。
- public int getItemCount() 返回該Adapter所持有的item數(shù)量
示例代碼如下所示：
- @Override
- public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
- MyViewHolder holder = new MyViewHolder(LayoutInflater.from(context)
- .inflate(R.layout.item_recycler_view,parent,false));
- return holder;
- }
- @Override
- public void onBindViewHolder(MyViewHolder holder, int position) {
- holder.tv.setText(mDatas.get(position));
- }
- @Override
- public int getItemCount() {
- return mDatas.size();
- }
因此，一個基本的RecyclerView.Adapter如下：
- public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder> {
- private Context context;
- private List<String> mDatas;
- public RecyclerAdapter(Context context, List<String> mDatas) {
- this.context = context;
- this.mDatas = mDatas;
- }
- @Override
- public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
- MyViewHolder holder = new MyViewHolder(LayoutInflater.from(context)
- .inflate(R.layout.item_recycler_view, parent, false));
- return holder;
- }
- @Override
- public void onBindViewHolder(MyViewHolder holder, int position) {
- holder.tv.setText(mDatas.get(position));
- }
- @Override
- public int getItemCount() {
- return mDatas == null ? 0 : mDatas.size();
- }
- public static class MyViewHolder extends RecyclerView.ViewHolder {
- TextView tv;
- public MyViewHolder(View itemView) {
- super(itemView);
- tv = (TextView) itemView.findViewById(R.id.tv);
- }
- }
- }
3.3 RecyclerView.LayoutManager
LayoutManager的職責是擺放Item的位置，并且負責決定何時回收和重用Item。它有一個默認的實現(xiàn)：LinearLayoutManager，它可以用于垂直和水平列表。
RecyclerView.LayoutManager是一個抽象類，RecyclerView為我們提供3個實現(xiàn)類：
- LinearLayoutManager 現(xiàn)行管理器，支持橫向、縱向。
- GridLayoutManager 網(wǎng)格布局管理器
- StaggeredGridLayoutManager 瀑布流式布局管理器
3.3.1 LinearlayoutManager
LinearlayoutManager是LayoutManager的默認實現(xiàn)。你可以使用這個類來創(chuàng)建垂直或水平列表。
- // 設(shè)置RecyclerView布局方式為縱向布局
- LinearLayoutManager layoutManager = new LinearLayoutManager(context);
- layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
- recyclerView.setLayoutManager(layoutManager);
- // 設(shè)置RecyclerView布局方式為橫向布局
- LinearLayoutManager layoutManager= new LinearLayoutManager(this);
- layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
- recyclerView.setLayoutManager(layoutManager);
運行程序，我們看到如下效果：
我們發(fā)現(xiàn)和ListView有一些不同，沒有分割線讓這個列表看起來很不美觀，給RecyclerView設(shè)置分割線這個我們在下一小節(jié)說明。
當然LinearlayoutManager中還有一些很實用的API：
- findFirstVisibleItemPosition() 返回當前***個可見Item的position
- findFirstCompletelyVisibleItemPosition() 返回當前***個完全可見Item的position
- findLastVisibleItemPosition() 返回當前***一個可見Item的position
- findLastCompletelyVisibleItemPosition() 返回當前***一個完全可見Item的position
3.3.2 GridLayoutManager
有兩個構(gòu)造方法：
- /**
- * Creates a vertical GridLayoutManager
- *
- * @param context Current context, will be used to access resources.
- * @param spanCount 設(shè)置行數(shù)，因為默認是縱向的
- */public GridLayoutManager(Context context, int spanCount) {
- super(context);
- setSpanCount(spanCount);
- }/**
- * @param context Current context, will be used to access resources.
- * @param spanCount 設(shè)置行數(shù)或者列數(shù)，根據(jù)方向
- * @param orientation 布局方向 HORIZONTAL or VERTICAL.
- * @param reverseLayout 是否反向顯示 When set to true, layouts from end to start.
- */public GridLayoutManager(Context context, int spanCount, int orientation, boolean reverseLayout) {
- super(context, orientation, reverseLayout);
- setSpanCount(spanCount);
- }
我們按如下代碼設(shè)置：
- // 設(shè)置縱向的4列的表格布局GridLayoutManager layoutManager = new GridLayoutManager(this,4,GridLayoutManager.VERTICAL,false);
- recyclerView.setLayoutManager(layoutManager);
- // 設(shè)置橫向的3行的表格布局GridLayoutManager layoutManager = new GridLayoutManager(this,3,GridLayoutManager.HORIZONTAL,false);
- recyclerView.setLayoutManager(layoutManager);
3.3.3 StaggeredGridLayoutManager
我們來看StaggeredGridLayoutManager的構(gòu)造方法，只有一個方法
- /**
- * Creates a StaggeredGridLayoutManager with given parameters.
- *
- * @param spanCount 設(shè)置行數(shù)或者列數(shù)，根據(jù)方向，縱向就是列數(shù)，橫向就是行數(shù)
- * @param orientation 方向
- */
- public StaggeredGridLayoutManager(int spanCount, int orientation) {}
因此我們這樣設(shè)置：
- // 設(shè)置縱向的瀑布流布局
- StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL);
- recyclerView.setLayoutManager(layoutManager);
我們看效果和GridLayoutManager沒有什么區(qū)別呢，那我們來小小的修改一下，你就可以看到它的強大。
我們給每個item的布局加入margin：
- <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical" android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_margin="5dp"
- android:background="@color/colorAccent">
- <TextView
- android:id="@+id/tv"
- android:layout_width="100dp"
- android:layout_height="100dp"
- android:layout_gravity="center"
- android:gravity="center"
- android:textColor="#fff"
- /></LinearLayout>
然后我們在適配器的onBindViewHolder方法中為我們的item設(shè)置個隨機的高度：
- //貼上部分代碼，其余的請看附件
- private List<Integer> mHeights;
- public RecyclerAdapter(Context context, List<String> mDatas) {
- this.context = context;
- this.mDatas = mDatas;
- mHeights = new ArrayList<Integer>();
- for (int i = 0; i < mDatas.size(); i++) {
- mHeights.add((int) (100 + Math.random() * 300));
- }
- }
- @Override
- public void onBindViewHolder(MyViewHolder holder,
- final int position) {
- ViewGroup.LayoutParams lp = holder.tv.getLayoutParams();
- lp.height = mHeights.get(position);
- holder.tv.setLayoutParams(lp);
- }
運行，我們可以看到效果，是不是很炫!
3.4 RecyclerView.ItemDecoration
通過設(shè)置
- recyclerView.addItemDecoration(new DividerDecoration(Context context, int orientation));
來改變Item之間的偏移量或者對Item進行裝飾。
例如，在上面的設(shè)置LinearlayoutManager之后加入以下代碼，那么列表的效果就會發(fā)生改變：
- // 給縱向顯示RecyclerView設(shè)置分割線
- recyclerView.addItemDecoration(new DividerItemDecoration(activity,DividerItemDecoration.VERTICAL));
- // 給橫向顯示RecyclerView設(shè)置分割線
- recyclerView.addItemDecoration(new DividerItemDecoration(activity,DividerItemDecoration.HORIZONTAL));
當然，你也可以對RecyclerView設(shè)置多個ItemDecoration，列表展示的時候會遍歷所有的ItemDecoration并調(diào)用里面的繪制方法，對Item進行裝飾。
RecyclerView.ItemDecoration是一個抽象類，可以通過重寫以下三個方法，來實現(xiàn)Item之間的偏移量或者裝飾效果：
- public void onDraw(Canvas c, RecyclerView parent) 裝飾的繪制在Item條目繪制之前調(diào)用，所以這有可能被Item的內(nèi)容所遮擋
- public void onDrawOver(Canvas c, RecyclerView parent) 裝飾的繪制在Item條目繪制之后調(diào)用，因此裝飾將浮于Item之上
- public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) 與padding或margin類似，LayoutManager在測量階段會調(diào)用該方法，計算出每一個Item的正確尺寸并設(shè)置偏移量。
當然了，如果我們使用GridLayoutManager后，對于分割線，前面的DividerItemDecoration就不適用了，主要是因為它在繪制的時候，比如水平線，針對每個child的取值為：
- final int left = parent.getPaddingLeft();
- final int right = parent.getWidth() - parent.getPaddingRight();
因為每個Item一行，這樣是沒問題的。而GridLayoutManager時，一行有多個childItem，這樣就多次繪制了，并且GridLayoutManager時，Item如果為***一列(則右邊無間隔線)或者為***一行(底部無分割線)。
按照上述的方法，我們可以自定義一個DividerGridItemDecoration。由于代碼篇幅過長，我們在附件中給出。我們給GridLayoutManager設(shè)置DividerGridItemDecoration，運行效果如下：
3.5 RecyclerView.ItemAnimator
ItemAnimator能夠幫助Item實現(xiàn)獨立的動畫。
ItemAnimator作觸發(fā)于以下三種事件：
- 某條數(shù)據(jù)被插入到數(shù)據(jù)集合中
- 從數(shù)據(jù)集合中移除某條數(shù)據(jù)
- 更改數(shù)據(jù)集合中的某條數(shù)據(jù)
幸運的是，在Android中默認實現(xiàn)了一個DefaultItemAnimator，我們可以通過以下代碼為Item增加動畫效果：
- recyclerView.setItemAnimator(new DefaultItemAnimator());
在之前的版本中，當時據(jù)集合發(fā)生改變時，我們通過調(diào)用.notifyDataSetChanged()，來刷新列表，因為這樣做會觸發(fā)列表的重繪，所以并不會出現(xiàn)任何動畫效果，因此需要調(diào)用一些以notifyItem*()作為前綴的特殊方法，比如：
- public final void notifyItemInserted(int position) 向指定位置插入Item
- public final void notifyItemRemoved(int position) 移除指定位置Item
- public final void notifyItemChanged(int position) 更新指定位置Item
下面我們使用DefaultItemAnimator來展示一下動畫效果，修改代碼如下：
在Activity中添加兩個按鈕add和remove負責動態(tài)插入和移除item
- btnAdd.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View v) {
- adapter.addData(1);
- }
- });
- btnRemove.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View v) {
- adapter.removeData(2);
- }
- });
在Adapter中添加兩個方法：
- public void addData(int position) {
- mDatas.add(position, "Insert");
- mHeights.add( (int) (100 + Math.random() * 300));
- notifyItemInserted(position);
- }public void removeData(int position) {
- mDatas.remove(position);
- notifyItemRemoved(position);
- }
運行結(jié)果如下：
3.6 Listeners
很遺憾，RecyclerView并沒有像ListView那樣提供以下兩個Item的點擊監(jiān)聽事件
- public void setOnItemClickListener(@Nullable OnItemClickListener listener) Item點擊事件監(jiān)聽
- public void setOnItemLongClickListener(OnItemLongClickListener listener) Item長按事件監(jiān)聽
但是這并不能阻攔我們的腳步，我可以定義這樣的兩個方法。
- public interface OnItemClickLitener {
- void onItemClick(View view, int position);
- void onItemLongClick(View view, int position);
- }
- private OnItemClickLitener litener;
- public void setLitener(OnItemClickLitener litener) {
- this.litener = litener;
- }
在onBindViewHolder方法中給需要響應(yīng)點擊事件的控件設(shè)置監(jiān)聽器：
- // 如果設(shè)置了回調(diào)，則響應(yīng)點擊事件holder.itemView.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View v) {
- if (litener != null) {
- litener.onItemClick(v, position);
- }
- }
- });
- holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
- @Override
- public boolean onLongClick(View v) {
- if (litener != null) {
- litener.onItemLongClick(v, position);
- } return false;
- }
- });
在Activity中設(shè)置這個方法：
- adapter.setLitener(new RecyclerAdapter.OnItemClickLitener() {
- @Override
- public void onItemClick(View view, int position) {
- Toast.makeText(activity,"第"+position+"項被點擊了",Toast.LENGTH_SHORT).show();
- }
- @Override
- public void onItemLongClick(View view, int position) {
- Toast.makeText(activity,"第"+position+"項被長按了",Toast.LENGTH_SHORT).show();
- }
- });
效果如圖：
