2. 程式人生 > >RecyclerView更全解析之

RecyclerView更全解析之

阿新 • • 發佈：2019-01-05

1.概述

　　昨天跟自己群裡的人嘮嗑的時候發現還有人在用Eclipse，我相信可能還是有很多人在用ListView，這裡介紹一個已經出來的n年了的控制元件RecyclerView，實現ListView,GridView,瀑布流的效果。還可以輕鬆的實現一些複雜的功能，如QQ的拖動排序，側滑刪除等等。

　　
　　這裡寫圖片描述

2．概述　

　　最終我們肯定要用到專案中，因為我覺得所有寫的東西都必須封裝好下次開發可以直接用到專案中。但是首先得要熟悉該控制元件才行。可以選擇去google官方瞭解RecyclerView，但要翻牆。

　　據官方的介紹，該控制元件用於在有限的視窗中展示大量資料集，其實這樣功能的控制元件我們並不陌生，例如：ListView、GridView。

那麼有了ListView、GridView為什麼還需要RecyclerView這樣的控制元件呢？整體上看RecyclerView架構，提供了一種插拔式的體驗，高度的解耦，異常的靈活，通過設定它提供的不同LayoutManager，ItemDecoration , ItemAnimator實現令人瞠目的效果。

1.你想要控制其顯示的方式，請通過佈局管理器LayoutManager，ListView–>GridView–>瀑布流　只需要一行程式碼；
2.你想要控制Item間的間隔（可繪製），請通過ItemDecoration（這個比較蛋疼） ；
3.你想要控制Item增刪的動畫，請通過ItemAnimator；
4.你想要控制點選、長按事件，請自己寫（擦，這點尼瑪）。
　　

3．基本使用　

　　首先我們需要新增RecyclerView的依賴包，在build.gradle中新增依賴：

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

　　和ListView一樣通過設定Adapter()給他繫結資料來源，但在這之前必須設定setLayoutManager()這個方法是用來設定顯示效果的（這樣我們就可以通過設定佈局管理顯示不同的效果：ListView、GridView、瀑布流等等）。
　　

    // 設定recyclerView的佈局管理  
    // LinearLayoutManager -> ListView風格
 

    // GridLayoutManager -> GridView風格
    // StaggeredGridLayoutManager -> 瀑布流風格
    LinearLayoutManager linearLayoutManager = new 
          LinearLayoutManager(this);
    mRecyclerView.setLayoutManager(linearLayoutManager);

3.1 Adapter編寫

　　接下來我們先去後臺伺服器請求資料，然後我們來編寫Adapter，我們直接使用Okhttp獲取伺服器資料，在這裡就不多說了，我們主要看Adapter怎麼寫。在ListView和GridView中我們可以不用ViewHolder，反正沒人打我，只是資料特別多可能會崩潰而已；但是在RecyclerView中就不一樣了它強制我們使用ViewHolder：

/**
 * Created by Darren on 2016/12/27.
 * Email: 240336124@qq.com
 * Description: 熱吧訂閱列表的Adapter
 */
public class CategoryListAdapter extends RecyclerView.Adapter<CategoryListAdapter.ViewHolder> {

    private List<ChannelListResult.DataBean.CategoriesBean.CategoryListBean> mList;
    private Context mContext;
    private LayoutInflater mInflater;

    public CategoryListAdapter(Context context, List<ChannelListResult.DataBean.CategoriesBean.CategoryListBean> list) {
        this.mContext = context;
        this.mList = list;
        this.mInflater = LayoutInflater.from(mContext);
    }

    /**
     * 建立條目ViewHolder
     *
     * @param parent   RecyclerView
     * @param viewType view的型別可以用來顯示多列表佈局等等
     * @return
     */
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // 建立條目
        View itemView = mInflater.inflate(R.layout.channel_list_item, parent, false);
        // 建立ViewHolder
        ViewHolder viewHolder = new ViewHolder(itemView);
        return viewHolder;
    }

    /**
     * 繫結ViewHolder設定資料
     *
     * @param holder
     * @param position 當前位置
     */
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // 設定繫結資料
        ChannelListResult.DataBean.CategoriesBean.CategoryListBean item = mList.get(position);
        holder.nameTv.setText(item.getName());
        holder.channelTopicTv.setText(item.getIntro());
        String str = item.getSubscribe_count() + " 訂閱 | " +
                "總帖數 <font color='#FF678D'>" + item.getTotal_updates() + "</font>";
        holder.channelUpdateInfo.setText(Html.fromHtml(str));
        // 是否是最新
        if (item.isIs_recommend()) {
            holder.recommendLabel.setVisibility(View.VISIBLE);
        } else {
            holder.recommendLabel.setVisibility(View.GONE);
        }
        // 載入圖片
        Glide.with(mContext).load(item.getIcon_url()).centerCrop().into(holder.channelIconIv);
    }

    /**
     * 總共有多少條資料
     */
    @Override
    public int getItemCount() {
        return mList.size();
    }

    /**
     * RecyclerView的Adapter需要一個ViewHolder必須要extends RecyclerView.ViewHolder
     */
    public static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView nameTv;
        public TextView channelTopicTv;
        public TextView channelUpdateInfo;
        public View recommendLabel;
        public ImageView channelIconIv;

        public ViewHolder(View itemView) {
            super(itemView);
            // 在建立的時候利用傳遞過來的View去findViewById
            nameTv = (TextView) itemView.findViewById(R.id.channel_text);
            channelTopicTv = (TextView) itemView.findViewById(R.id.channel_topic);
            channelUpdateInfo = (TextView) itemView.findViewById(R.id.channel_update_info);
            recommendLabel = itemView.findViewById(R.id.recommend_label);
            channelIconIv = (ImageView) itemView.findViewById(R.id.channel_icon);
        }
    }
}

　　3.2 分隔線定製

　　對於分隔線這個也比較蛋疼，你會發現RecyclerView並沒有支援divider這樣的屬性。那麼怎麼辦，你可以在建立item佈局的時候直接寫在佈局中，當然了這種方式不夠優雅，我們早就說了可以自由的去定製它。
　　既然比較麻煩那麼我們可以去github上面下載一個：DividerItemDecoration來參考一下。我這裡就直接來寫一個效果，大家也可以找找別人的部落格看看。
　　分割線我們利用RecyclerView的addItemDecoration(ItemDecoration fromHtml) 新建一個類來看看到底是什麼：

/**
 * Created by Darren on 2016/12/27.
 * Email: [email protected]
 * Description: RecyclerView 分割線定製
 */
public class CategoryItemDecoration extends RecyclerView.ItemDecoration {
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {

    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

    }
}
有兩個方法getItemOffsets()這裡我一般指定偏移量就可以了，就是分割線佔多少高度，或者說是畫在什麼位置，你總的給我留出位置來；
onDraw()我們可以直接去繪製，繪製什麼都可以因為有Canvas ，但一般都是繪製Drawable，這裡不多說具體看視訊吧。

/**
 * Created by Darren on 2016/12/27.
 * Email: [email protected]
 * Description: RecyclerView 分割線定製
 */
public class CategoryItemDecoration extends RecyclerView.ItemDecoration {
    private Paint mPaint;

    public CategoryItemDecoration(int color) {
        // 直接繪製顏色  只是用來測試
        mPaint = new Paint();
        mPaint.setColor(color);
        mPaint.setAntiAlias(true);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        int childCount = parent.getChildCount();
        // 獲取需要繪製的區域
        Rect rect = new Rect();
        rect.left = parent.getPaddingLeft();
        rect.right = parent.getWidth() - parent.getPaddingRight();
        for (int i = 0; i < childCount; i++) {
            View childView = parent.getChildAt(i);
            rect.top = childView.getBottom();
            rect.bottom = rect.top + 20;
            // 直接利用Canvas去繪製一個矩形 在留出來的地方
            c.drawRect(rect, mPaint);
        }
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        // 在每個子View的下面留出20px來畫分割線
        outRect.bottom += 20;
    }
}

看一下效果

這裡寫圖片描述

　　這只是用來測試一下，並不是我們所需要的效果，只是說一下這兩個方法都可以幹什麼就是你想怎麼弄分割線就怎麼弄。我們一般會使用Drawable去畫，所以我們必須調整成我們最終的效果，程式碼其實基本一致。

/**
 * Created by Darren on 2016/12/27.
 * Email: [email protected]
 * Description: RecyclerView 分割線定製
 */
public class CategoryItemDecoration extends RecyclerView.ItemDecoration {
    private Drawable mDivider;

    public CategoryItemDecoration(Drawable divider) {
        // 利用Drawable繪製分割線
        mDivider = divider;
    }

    @Override
    public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
        int childCount = parent.getChildCount();
        // 計算需要繪製的區域
        Rect rect = new Rect();
        rect.left = parent.getPaddingLeft();
        rect.right = parent.getWidth() - parent.getPaddingRight();
        for (int i = 0; i < childCount; i++) {
            View childView = parent.getChildAt(i);
            rect.top = childView.getBottom();
            rect.bottom = rect.top + mDivider.getIntrinsicHeight();
            // 直接利用Canvas去繪製
            mDivider.draw(canvas);
        }
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        // 在每個子View的下面留出來畫分割線
        outRect.bottom += mDivider.getIntrinsicHeight();
    }
}

　　接下來我們就可以在drawable，下面新建一個xxx.xml的分割線檔案了
　　

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="0.5dp"   />
    <solid android:color="@color/list_item_divider" />
</shape>

這裡寫圖片描述

　　基本沒什麼效果因為分割線比較小0.5dp,仔細看還是看得出來的，最後宣告一下因為整個專案涉及到一鍵更換面板，那麼恭喜恭喜這樣做並沒什麼卵用，我們還是得直接寫在item佈局中，而不是用程式碼設定分割線。

　　3.3 RecyclerView分割線原始碼解析
　　
　　估計很大一部分的哥們在開發的時候都是使用的第三方的分割線，基本上都類似，一般都是利用系統自帶的一個屬性 android.R.attrs.listDriver我們直接獲取這個屬性的Drawable去繪製，那麼這裡我們分析一下原始碼去了解一些RecyclerView到底是怎樣新增分割線的。
　　一萬一千多行程式碼我們就只挑關鍵的方法：measureChild()，onDraw() , soeasy()

    // 只挑關鍵程式碼 一萬一千多行太多了
    /**
    * Measure a child view using standard measurement policy, taking the padding
    * of the parent RecyclerView and any added item decorations into account.
    *
    * <p>If the RecyclerView can be scrolled in either dimension the caller may
    * pass 0 as the widthUsed or heightUsed parameters as they will be irrelevant.</p>
    *
    * @param child Child view to measure
    * @param widthUsed Width in pixels currently consumed by other views, if relevant
    * @param heightUsed Height in pixels currently consumed by other views, if relevant
    */
    public void measureChild(View child, int widthUsed, int heightUsed) {
        final LayoutParams lp = (LayoutParams) child.getLayoutParams();
        // 關鍵看這個方法 --> getItemDecorInsetsForChild
        final Rect insets = mRecyclerView.getItemDecorInsetsForChild(child);
        widthUsed += insets.left + insets.right;
        heightUsed += insets.top + insets.bottom;
        // 考慮分割線返回的Rect
        final int widthSpec = getChildMeasureSpec(getWidth(), getWidthMode(),
            getPaddingLeft() + getPaddingRight() + widthUsed, lp.width,
            canScrollHorizontally());
        final int heightSpec = getChildMeasureSpec(getHeight(), getHeightMode(),
            getPaddingTop() + getPaddingBottom() + heightUsed, lp.height,
            canScrollVertically());
        if (shouldMeasureChild(child, widthSpec, heightSpec, lp)) {
            child.measure(widthSpec, heightSpec);
        }
    }

    /**
    *  獲取分割線裝飾的Rect
    **/
    Rect getItemDecorInsetsForChild(View child) {
        final LayoutParams lp = (LayoutParams) child.getLayoutParams();
        if (!lp.mInsetsDirty) {
            return lp.mDecorInsets;
        }

        if (mState.isPreLayout() && (lp.isItemChanged() || lp.isViewInvalid())) {
            // changed/invalid items should not be updated until they are rebound.
            return lp.mDecorInsets;
        }
        final Rect insets = lp.mDecorInsets;
        insets.set(0, 0, 0, 0);
        final int decorCount = mItemDecorations.size();
        for (int i = 0; i < decorCount; i++) {
            mTempRect.set(0, 0, 0, 0);
            // getItemOffsets()還是比較熟悉，獲取分割線返回的佔用位置
            mItemDecorations.get(i).getItemOffsets(mTempRect, child, this, mState);
            // 開始累加佔用位置
            insets.left += mTempRect.left;
            insets.top += mTempRect.top;
            insets.right += mTempRect.right;
            insets.bottom += mTempRect.bottom;
        }
        lp.mInsetsDirty = false;
        // 返回分割線的Rect
        return insets;
    }

    // onDraw()方法異常簡單，自己體會一下吧
    @Override
    public void onDraw(Canvas c) {
        super.onDraw(c);

        final int count = mItemDecorations.size();
        for (int i = 0; i < count; i++) {
            // 回調出去直接在getItemOffsets留出分割線位置的基礎上直接繪製
            mItemDecorations.get(i).onDraw(c, this, mState);
        }
    }

　　3.4 長按和點選事件
　　
　　這個是第二坑，第一坑就是上面的，後面還會有第三坑，RecyclerView並沒有方法可以setOnItemClickListener()。我們只能在Adapter裡面去寫介面了，但是想想我們會有很多Adapter的每個都單獨的去寫會不會很麻煩。這個不用擔心後面我們會寫萬能的Adapter，後面也會去自定義RecyclerView，目前只能這麼弄了，修改修改Adapter：
　　

/**
 * Created by Darren on 2016/12/27.
 * Email: [email protected]
 * Description: 熱吧訂閱列表的Adapter
 */
public class CategoryListAdapter extends RecyclerView.Adapter<CategoryListAdapter.ViewHolder> {

    // 省略之前的程式碼 ......

    /**
     * 繫結ViewHolder設定資料
     *
     * @param holder
     * @param position 當前位置
     */
    @Override
    public void onBindViewHolder(ViewHolder holder, final int position) {
        // 省略之前的程式碼 ......

        // 設定點選和長按事件
        if (mItemClickListener != null) {
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mItemClickListener.onItemClick(position);
                }
            });
        }
        if (mLongClickListener != null) {
            holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    return mLongClickListener.onLongClick(position);
                }
            });
        }
    }

    // 省略之前的程式碼 ......


    /***************
     * 給條目設定點選和長按事件
     *********************/
    public OnItemClickListener mItemClickListener;
    public OnLongClickListener mLongClickListener;

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

    public void setOnLongClickListener(OnLongClickListener longClickListener) {
        this.mLongClickListener = longClickListener;
    }

    public interface OnItemClickListener {
        public void onItemClick(int position);
    }

    public interface OnLongClickListener {
        public boolean onLongClick(int position);
    }
}

　　估計有些不想接觸新事物的哥們會覺得，哪裡好用。他們都說好我覺得也好用著用著就好了因為公司的人都在用我不用也沒辦法。下一期我們還是解析RecyclerView可能會要更好用一些.

相關推薦

RecyclerView更全解析之

1.概述 　　昨天跟自己群裡的人嘮嗑的時候發現還有人在用Eclipse，我相信可能還是有很多人在用ListView，這裡介紹一個已經出來的n年了的控制元件RecyclerView，實現ListView,GridView,瀑布流的效果。還可以輕鬆的實現一些複

Android異步載入全解析之開篇瞎扯淡

com des turn pro 能夠 eat launch 卡頓 ring Android異步載入概述 Android異步載入在Android中使用的很廣泛，除了是由於避免在主線程中做網絡操作。更是為了避免在顯示時由於時間太長而造成ANR，添加顯示的流暢性，特別是像Li

New程式媛OpenGL全解析之—基本圖元與繪製

大家好！ 本期丹丹將給大家解析OpenGL基本圖元以及繪製～～ 本期視訊的連結地址是： https://www.bilibili.com/video/av22494256/ 大家也可以直接在bi站首頁搜尋：New程式媛 ，即可看到相

New程式媛OpenGL全解析之—紋理

大家好本期視訊的連結地址是：https://www.bilibili.com/video/av24529999/大家也可以直接在bi站首頁搜尋：New程式媛 ，即可看到相應視訊本期的資源和程式碼下載連結是：連結：https://pan.baidu.com/s/11DhBfRj

New程式媛OpenGL全解析之—向量

大家好本期視訊的連結地址是：https://www.bilibili.com/video/av23269538/大家也可以直接在bi站首頁搜尋：New程式媛 ，即可看到相應視訊本期的程式碼因為已經給大家全部貼出了，所以不再另附資源，請大家動手獨立完成。丹丹今天要給大家帶來的是

New程式媛OpenGL全解析之—第一個OpenGL程式解析

大家好！本期丹丹將給大家解析第一個OpenGL程式本期視訊的連結地址是：https://www.bilibili.com/video/av21319715大家也可以直接在bi站首頁搜尋：New程式媛 ，即可看到相應視訊本期的資源和程式碼下載連結是：連結：https://pan

Macaca 自動化測試框架全解析之簡單介紹

今天來整理下使用阿里巴巴開源的自動化測試框架macaca github地址：https://www.oschina.net/p/macaca 簡單介紹 Macaca 是一套面向使用者端軟體的測試解決方案，提供了自動化驅動，周邊工具，整合方案，旨在解決終端上的測試、自

Android非同步載入全解析之Bitmap

public static OutputStream decodeBitmap(String path) { BitmapFactory.Options opts = new BitmapFactory.Options(); opts.inJustDecodeBounds

3秒鐘不懂你砍我：RecyclerView下拉重新整理和上拉載入更多（開源中國List業務流程全解析）

這裡以開源中國開源資訊頁面為例子。 這個頁面資料的url：http://www.oschina.net/action/apiv2/news?pageToken= 是這樣的 json資料的結構: NewsBean返回成功與否的code和msg。 ResultBean返回的

從零打造線上網盤系統之Struts2框架核心功能全解析

歡迎瀏覽Java工程師SSH教程從零打造線上網盤系統系列教程,本系列教程將會使用SSH(Struts2+Spring+Hibernate)打造一個線上網盤系統,本系列教程是從零開始,所以會詳細以及著重地闡述SSH三個框架的基礎知識,第四部分將會進入專案實戰,如果您已經對SSH框架有所掌握,那麼可以直接瀏

從零打造線上網盤系統之Struts2框架配置全解析

歡迎瀏覽Java工程師SSH教程從零打造線上網盤系統系列教程,本系列教程將會使用SSH(Struts2+Spring+Hibernate)打造一個線上網盤系統,本系列教程是從零開始,所以會詳細以及著重地闡述SSH三個框架的基礎知識,第四部分將會進入專案實戰,如果您已經對SSH框架有所掌握,那麼可以直接瀏覽第四

從零打造在線網盤系統之Struts2框架配置全解析

edi syntax ges sin prop parameter 映射 基礎知識 最新 歡迎瀏覽Java工程師SSH教程從零打造在線網盤系統系列教程,本系列教程將會使用SSH(Struts2+Spring+Hibernate)打造一個在線網盤系統,本系列教程是從零開始,所

CVPR2018論文解析之《Fully Convolutional Adaptation Networks for Semantic Segmentation》(全卷積適配網路)

論文網址：Fully Convolutional Adaptation Networks for Semantic Segmentation   1.摘要： 問題： 收集大量畫素級標記的資料是一個費事費力的過程，一個比較好的選擇是使用合成數據，比如遊戲視訊，來自動產生標籤。

前端入門之(vue-router全解析三)

上一節前端入門之(vue-router全解析二)我們帶著vue-router的push方法走了一遍原始碼,然後還分析了router-view的原始碼,最後還差router-link元件沒有分析了,我們今天繼續vue-router解析. 我們在原始碼中找到router-link元件的程

前端入門之(vue-router全解析一)

前言: 一直想著啥時候能把vue全家桶的東西原始碼全部擼一遍,可惜無奈能力有限啊(哈哈,最近一直在補js基礎),看vuex程式碼的時候覺得也還好,基本上是邊學邊解析原始碼的方式把vuex擼了一遍(畢竟整個vuex加起來也沒多少程式碼),可當碰到vue-router的時候,首先就被它那幾千

前端入門之(vue-router全解析二)

前面一篇文章 前端入門之(vue-router全解析一)我們簡單的瞭解了一下vue-router的原理,今天我們繼續vue-router,我們從頭到尾的全部擼一遍哈.小夥伴開車啦,跟緊了哦~~ 我這裡以vue-cli+webpack建立的但頁面工程為例子了哈,我們直接選帶有vue-r

SpringMVC之Controller常用註解功能全解析

一、簡介 在SpringMVC中，控制器Controller負責處理由DispatcherServlet分發的請求，它把使用者請求的資料經過業務處理層處理之後封裝成一個Model ，然後再把該Model返回給對應的View進行展示。在SpringMVC 中提供了一個非常簡便

Java上帝之眼系列配置Spring專案檔案上傳兩種方式（全解析）

歡迎檢視Java開發之上帝之眼系列教程，如果您正在為Java後端龐大的體系所困擾，如果您正在為各種繁出不窮的技術和各種框架所迷茫，那麼本系列文章將帶您窺探Java龐大的體系。本系列教程希望您能站在上帝

SAP ABAP檢視變更之全解析

更多內容關注公眾號：SAP Technical 點選進入：SAP檢視變更之全解析 如果圖片看不到，請關注我的公眾號：SAP Technical 上一篇介紹檢視變更方法的文章裡，很多讀者小夥伴給我了一些建議，非常感謝大家提供的思路和方法。所以，今天這篇文章我們在討論一下這個問題，

netty原始碼分析之新連線接入全解析

本文收穫 通讀本文，你會了解到 1.netty如何接受新的請求 2.netty如何給新請求分配reactor執行緒 3.netty如何給每個新連線增加ChannelHandler 其實，遠不止這些～ 前序背景 讀這篇文章之前，最好掌握一些前序知識，包括netty中的r