快捷導(dǎo)航

Android實現(xiàn)直播聊天區(qū)域中頂部的漸變效果

更新時間：2018年04月21日 16:10:31 作者：MG屠夫

最近在研究直播的彈幕，東西有點(diǎn)多，準(zhǔn)備記錄一下免得自己忘了又要重新研究，下面這篇文章主要給大家介紹了關(guān)于Android如何實現(xiàn)直播聊天區(qū)域中頂部漸變效果的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。

背景

在4月份開發(fā)直播時，有一個需求，需要實現(xiàn)一個RecylerView頂部漸變的效果

實際效果

解決思路

圖層重疊處理（本質(zhì)是alpha疊加出來的效果）

實現(xiàn)流程

保存一個圖層，然后畫漸變，最后再和原來的圖層進(jìn)行合并，達(dá)到這個效果。

涉及知識（不知道的請google）：

* 主要通過RecyclerView 的 ItemDecoration類進(jìn)行解決。

* Paint、Canvas、Shader、Xfermode（圖層融合）

* Gradient（漸變）

詳細(xì)過程：

圖層疊加需要通過Xfermode，Xfermode主要是讓不同圖層融合，但是有個前提，就是不同圖層需要由相同的畫筆（Paint）繪制而成。這里就拋出了幾個問題：

1. 如何獲取RecyclerView上每個Item的圖層？

2. 獲取到圖層，如何讓該圖層的畫筆和漸變圖層的畫筆保持一致？

3. 融合方式，參見Xfermode的參數(shù)？

解決方案

1. 查找資料之后，可以通過RecyclerView的ItemDecoration抽象類獲知，繪制圖層前后的事件。 onDraw：繪制Item開始的事件回調(diào)，onDrawOver：繪制Item結(jié)束的事件回調(diào)。可以通過Parent計算獲取相應(yīng)的Item或Canvas面板。

2. Canvas的saveLayer方法，將當(dāng)前的Canvas存入Paint中，然后用該P(yáng)aint繪制漸變圖層，就實現(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，渲染之后每次都會回調(diào)這個方法，就在這里進(jìn)行融合
   @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，有興趣的可以去下載。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: