Android實現好看的微信聊天氣泡效果

更新時間：2022年06月13日 08:51:58 作者：島上碼農

在聊天類應用中，通常用氣泡作為聊天內容的背景色，比如微信的聊天背景，別人發(fā)過來的是白色的氣泡，自己發(fā)的是綠色的氣泡。本文將用Android實現好看的微信聊天氣泡效果，感興趣的可以了解一下

前言

在聊天類應用中，通常用氣泡作為聊天內容的背景色，比如微信的聊天背景，別人發(fā)過來的是白色的氣泡，自己發(fā)的是綠色的氣泡。

上面這種是比較普通的，這篇我們玩點有趣的，讓聊天氣泡是漸變色的。可能很多人會覺得漸變很簡單，給 Container 來個decoration或者使用 DecoratedBox，使用漸變填充色就可以了，比如下面這種效果：這個感覺也太丑了，本篇我們來一個高級的 —— 整個聊天窗口的氣泡顏色是漸變的，而且隨著滾動還會變化！先看看實現的效果，這里有兩個效果：

整個窗口的聊天氣泡背景色是連續(xù)漸變的，而不是每個氣泡重復的漸變。

滾動的時候，氣泡的背景色會隨著滾動的位置變化。

代碼實現

使用 Container 的 decoration 或 DecoratedBox 只能在渲染之前就確定好背景色，因此沒法在繪制過程中動態(tài)改變氣泡的背景色，要動態(tài)改變氣泡背景色就需要自己繪制背景，那就需要使用到 CustomPaint。

首先，我們來看如何繪制漸變背景色。畫筆 Paint 對象有個shader 屬性，可以配置繪制時的填充行為。來源可以是漸變填充的 Gradient 對象，或是圖片的 Image 對象。比如我們要用線性漸變填充，那就可以使用下面的代碼實現：

final paint = Paint()
  ..shader = LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: colors
  ).createShader(rect);

其中 createShader 函數就是用于將Gradient 轉換為 shader對象。這里需要傳一個矩形，即填充的矩形范圍，這個參數我們可以利用來實現整個窗口的漸變填充，比如滾動的窗口我們可以設置為整個滾動窗口的矩形，這樣填充范圍就可以從當前氣泡繪制的擴大到整個聊天窗口。

接下來是如何讓當前氣泡的填充色跟隨滾動位置變化而變化。這里需要做兩個操作：

獲取滾動過程中氣泡在窗口的位置；
將填充色轉變到氣泡滾動的位置。

獲取滾動過程中氣泡在窗口的位置需要使用滾動狀態(tài)的 ScrollableState 對象，這個可以通過 Scrollable.of(context) 獲取，這個方法會從組件樹中最近的滾動組件中獲取滾動狀態(tài)對象，如果沒有找到滾動組件的話則返回 null。ScrollableState中可以找到當前渲染的滾動組件的窗口矩形，有了這個矩形，我們就可以獲知氣泡在滾動窗口的相對位置了，這個需要使用 localToGlobal 方法實現，代碼如下：

final scrollableBox =
        scrollableState.context.findRenderObject() as RenderBox;
final bubbleBox = context.findRenderObject() as RenderBox;
final origin =
    bubbleBox.localToGlobal(Offset.zero, ancestor: scrollableBox);

有了這個相對位置，那么我們就可以把全部漸變顏色填充找到當前位置氣飽應該要填充的顏色，這里需要使用到 LinearGradient 的一個 transform 參數。transform是一個 GradientTransform對象，實際是通過三維空間的轉變實現的。這里我們自定義一個GradientTransform類為 ScrollGradientTransform，覆蓋了GradientTransform的 transform 方法，實際只是實現了三維的平移而已：

class ScrollGradientTransform extends GradientTransform {
  const ScrollGradientTransform(this.dx, this.dy, this.dz);

  final double dx, dy, dz;

  @override
  Matrix4 transform(Rect bounds, {TextDirection? textDirection}) {
    return Matrix4.identity()..translate(dx, dy, dz);
  }
  
  //...
}

然后我們將ScrollGradientTransform給 LinearGradient 的 transform 參數：

LinearGradient(
  begin: Alignment.topCenter,
  end: Alignment.bottomCenter,
  colors: colors,
  transform: ScrollGradientTransform(
    -origin.dx,
    -origin.dy,
    0.0,
),

這里取負號主要是往上滾的時候 origin.dy 是負數，為保持和設定的漸變色次序一樣，才加上了負號。當然，如果是橫向滾動，就需要根據橫向的方向決定origin.dx要不要加負號了。有了這個之后，我們只需要繪制一個圓角矩形就好了，實際CustomPaint 的 Painter 繪制代碼很簡單，代碼如下：

class BubbleBackgroundPainter extends CustomPainter {
  final List<Color> colors;
  final ScrollableState scrollableState;
  final BuildContext context;
  const BubbleBackgroundPainter({
    Key? key,
    required this.colors,
    required this.scrollableState,
    required this.context,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final scrollableBox =
        scrollableState.context.findRenderObject() as RenderBox;
    final bubbleBox = context.findRenderObject() as RenderBox;
    final origin =
        bubbleBox.localToGlobal(Offset.zero, ancestor: scrollableBox);

    final scrollableRect = Offset.zero & scrollableBox.size;
    final paint = Paint()
      ..shader = LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: colors,
        transform: ScrollGradientTransform(
          -origin.dx,
          -origin.dy,
          0.0,
        ),
      ).createShader(scrollableRect);

    canvas.drawRRect(
        RRect.fromRectAndRadius(
          Offset.zero & size,
          Radius.circular(10.0),
        ),
        paint);
  }

  @override
  bool shouldRepaint(covariant BubbleBackgroundPainter oldDelegate) {
    return oldDelegate.scrollableState != scrollableState ||
        oldDelegate.context != context ||
        oldDelegate.colors != colors;
  }
}

完整代碼已經提交到：繪圖相關代碼，文件名為：gradient_background_bubble.dart。

踩坑記錄

這里調試過程發(fā)現了一個小坑，就是首次加載的時候是有漸變的，結果滾動后漸變效果消失了，當時百思不得其解，折騰了好久。后面才想起來是列表性能優(yōu)化時的繪制緩存機制導致的，需要手動設置 ListView 的addRepaintBoundaries為 false，以讓每次滾動的時候不復用之前的繪制結果，當然這樣會有些性能上的損失。

總結

本篇使用 CustomPaint，通過計算當前繪制的氣泡在滾動過程的中的相對位置實現了聊天氣泡整個窗口漸變的效果，而且氣泡會隨著滾動位置不同的填充顏色也不同。相比之前的單一顏色的聊天氣泡來說，這種氣泡更加有趣，豐富多彩！實際上，對于本篇的漸變繪制我們可以理解為在窗口預先配置了漸變色，只是不會真的渲染，等到繪制氣泡的時候才把窗口的漸變色作為氣泡的背景色，于是就有了本篇的效果。

以上就是Android實現好看的微信聊天氣泡效果的詳細內容，更多關于Android聊天氣泡的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: