Android實現(xiàn)直播聊天區(qū)域中頂部的漸變效果
背景
在4月份開發(fā)直播時,有一個需求,需要實現(xiàn)一個RecylerView頂部漸變的效果
實際效果

解決思路
圖層重疊處理(本質是alpha疊加出來的效果)
實現(xiàn)流程
保存一個圖層,然后畫漸變,最后再和原來的圖層進行合并,達到這個效果。
涉及知識(不知道的請google):
* 主要通過RecyclerView 的 ItemDecoration類進行解決。
* Paint、Canvas、Shader、Xfermode(圖層融合)
* Gradient(漸變)
詳細過程:
圖層疊加需要通過Xfermode,Xfermode主要是讓不同圖層融合,但是有個前提,就是不同圖層需要由相同的畫筆(Paint)繪制而成。 這里就拋出了幾個問題:
1. 如何獲取RecyclerView上每個Item的圖層?
2. 獲取到圖層,如何讓該圖層的畫筆和漸變圖層的畫筆保持一致?
3. 融合方式,參見Xfermode的參數(shù)?
解決方案
1. 查找資料之后,可以通過RecyclerView的ItemDecoration抽象類獲知,繪制圖層前后的事件。 onDraw:繪制Item開始的事件回調,onDrawOver:繪制Item結束的事件回調??梢酝ㄟ^Parent計算獲取相應的Item或Canvas面板。
2. Canvas的saveLayer方法,將當前的Canvas存入Paint中,然后用該Paint繪制漸變圖層,就實現(xiàn)兩個圖層相同畫筆這一條件。
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);
// 創(chuàng)造一個顏色漸變,作為聊天區(qū)頂部效果
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已經(jīng)上傳github:https://github.com/HarrisonLin/RecyclerViewEffectGather,有興趣的可以去下載。
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關文章
Android 系統(tǒng)簽名 keytool-importkeypair的操作步驟
本文介紹了在Android項目中使用系統(tǒng)簽名并打包APK的方法,步驟包括獲取系統(tǒng)簽名文件、修改AndroidManifest.xml、轉換簽名文件、配置Android Studio簽名、生成APK文件和打包APK,感興趣的朋友一起看看吧2025-01-01
Android 超詳細講解fitsSystemWindows屬性的使用
fitsSystemWindows屬性可以讓view根據(jù)系統(tǒng)窗口來調整自己的布局;簡單點說就是我們在設置應用布局時是否考慮系統(tǒng)窗口布局,這里系統(tǒng)窗口包括系統(tǒng)狀態(tài)欄、導航欄、輸入法等,包括一些手機系統(tǒng)帶有的底部虛擬按鍵2022-03-03
Android自定義view之圍棋動畫效果的實現(xiàn)
這篇文章主要介紹了Android自定義view之圍棋動畫效果的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12
Android應用中使用及實現(xiàn)系統(tǒng)“分享”接口實例
為了應用的推廣、傳播,很多的應用中都有“分享”功能,這篇文章主要介紹了Android應用中使用及實現(xiàn)系統(tǒng)“分享”接口實例,有興趣的可以了解一下。2016-12-12

