背景
在4月份開發直播時，有一個需求，需要實現一個RecylerView頂部漸變的效果
實際效果
解決思路
圖層重疊處理（本質是alpha疊加出來的效果）
實現流程
保存一個圖層，然后畫漸變，最后再和原來的圖層進行合并，達到這個效果。
涉及知識（不知道的請google）：
* 主要通過RecyclerView 的 ItemDecoration類進行解決。
* Paint、Canvas、Shader、Xfermode（圖層融合）
* Gradient（漸變）
詳細過程：
圖層疊加需要通過Xfermode，Xfermode主要是讓不同圖層融合，但是有個前提，就是不同圖層需要由相同的畫筆（Paint）繪制而成。 這里就拋出了幾個問題：
1. 如何獲取RecyclerView上每個Item的圖層？
2. 獲取到圖層，如何讓該圖層的畫筆和漸變圖層的畫筆保持一致？
3. 融合方式，參見Xfermode的參數？
解決方案
1. 查找資料之后，可以通過RecyclerView的ItemDecoration抽象類獲知，繪制圖層前后的事件。 onDraw：繪制Item開始的事件回調，onDrawOver：繪制Item結束的事件回調。可以通過Parent計算獲取相應的Item或Canvas面板。
2. Canvas的saveLayer方法，將當前的Canvas存入Paint中，然后用該Paint繪制漸變圖層，就實現兩個圖層相同畫筆這一條件。
3. 融合方式，采用DST_IN， 底部圖層是聊天Item，上層是漸變圖層，alpha融合之后就是聊天Item帶有漸變的效果。（腦部一下）
具體代碼：
public void doTopGradualEffect(){ if(recyclerView == null){ return ; } mPaint = new Paint(); // 融合器 final Xfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN); mPaint.setXfermode(xfermode); // 創造一個顏色漸變，作為聊天區頂部效果 linearGradient = new LinearGradient(0.0f, 0.0f, 0.0f, 100.0f, new int[]{0, Color.BLACK}, null, Shader.TileMode.CLAMP); recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() { // 滑動RecyclerView，渲染之后每次都會回調這個方法，就在這里進行融合 @Override public void onDrawOver(Canvas canvas, RecyclerView parent, RecyclerView.State state) { super.onDrawOver(canvas, parent, state); mPaint.setXfermode(xfermode); mPaint.setShader(linearGradient); canvas.drawRect(0.0f, 0.0f, parent.getRight(), 200.0f, mPaint); mPaint.setXfermode(null); canvas.restoreToCount(layerId); } @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); layerId = c.saveLayer(0.0f, 0.0f, (float) parent.getWidth(), (float) parent.getHeight(), mPaint, Canvas.ALL_SAVE_FLAG); } @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); } }); }Demo已經上傳github：https://github.com/HarrisonLin/RecyclerViewEffectGather，有興趣的可以去下載。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對VEVB武林網的支持。
新聞熱點
疑難解答
