溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
背景
在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，有興趣的可以去下載。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
