Android实现好看的微信聊天气泡效果

 更新时间:2022年06月13日 08:51:58   作者:岛上码农  
在聊天类应用中,通常用气泡作为聊天内容的背景色,比如微信的聊天背景,别人发过来的是白色的气泡,自己发的是绿色的气泡。本文将用Android实现好看的微信聊天气泡效果,感兴趣的可以了解一下

前言

在聊天类应用中,通常用气泡作为聊天内容的背景色,比如微信的聊天背景,别人发过来的是白色的气泡,自己发的是绿色的气泡。

上面这种是比较普通的,这篇我们玩点有趣的,让聊天气泡是渐变色的。可能很多人会觉得渐变很简单,给 Container 来个decoration或者使用 DecoratedBox,使用渐变填充色就可以了,比如下面这种效果: 这个感觉也太丑了,本篇我们来一个高级的 —— 整个聊天窗口的气泡颜色是渐变的,而且随着滚动还会变化!先看看实现的效果,这里有两个效果:

整个窗口的聊天气泡背景色是连续渐变的,而不是每个气泡重复的渐变。

滚动的时候,气泡的背景色会随着滚动的位置变化。

代码实现

使用 ContainerdecorationDecoratedBox 只能在渲染之前就确定好背景色,因此没法在绘制过程中动态改变气泡的背景色,要动态改变气泡背景色就需要自己绘制背景,那就需要使用到 CustomPaint

首先,我们来看如何绘制渐变背景色。画笔 Paint 对象有个shader 属性,可以配置绘制时的填充行为。来源可以是渐变填充的 Gradient 对象,或是图片的 Image 对象。比如我们要用线性渐变填充,那就可以使用下面的代码实现:

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

其中 createShader 函数就是用于将Gradient 转换为 shader对象。这里需要传一个矩形,即填充的矩形范围,这个参数我们可以利用来实现整个窗口的渐变填充,比如滚动的窗口我们可以设置为整个滚动窗口的矩形,这样填充范围就可以从当前气泡绘制的扩大到整个聊天窗口。

接下来是如何让当前气泡的填充色跟随滚动位置变化而变化。这里需要做两个操作:

  • 获取滚动过程中气泡在窗口的位置;
  • 将填充色转变到气泡滚动的位置。

获取滚动过程中气泡在窗口的位置需要使用滚动状态的 ScrollableState 对象,这个可以通过 Scrollable.of(context) 获取,这个方法会从组件树中最近的滚动组件中获取滚动状态对象,如果没有找到滚动组件的话则返回 nullScrollableState中可以找到当前渲染的滚动组件的窗口矩形,有了这个矩形,我们就可以获知气泡在滚动窗口的相对位置了,这个需要使用 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,覆盖了GradientTransformtransform 方法,实际只是实现了三维的平移而已:

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);
  }
  
  //...
}

然后我们将ScrollGradientTransformLinearGradienttransform 参数:

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

这里取负号主要是往上滚的时候 origin.dy 是负数,为保持和设定的渐变色次序一样,才加上了负号。当然,如果是 横向滚动,就需要根据横向的方向决定origin.dx要不要加负号了。 有了这个之后,我们只需要绘制一个圆角矩形就好了,实际CustomPaintPainter 绘制代码很简单,代码如下:

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

踩坑记录

这里调试过程发现了一个小坑,就是首次加载的时候是有渐变的,结果滚动后渐变效果消失了,当时百思不得其解,折腾了好久。后面才想起来是列表性能优化时的绘制缓存机制导致的,需要手动设置 ListViewaddRepaintBoundariesfalse,以让每次滚动的时候不复用之前的绘制结果,当然这样会有些性能上的损失。

总结

本篇使用 CustomPaint,通过计算当前绘制的气泡在滚动过程的中的相对位置实现了聊天气泡整个窗口渐变的效果,而且气泡会随着滚动位置不同的填充颜色也不同。相比之前的单一颜色的聊天气泡来说,这种气泡更加有趣,丰富多彩!实际上,对于本篇的渐变绘制我们可以理解为在窗口预先配置了渐变色,只是不会真的渲染,等到绘制气泡的时候才把窗口的渐变色作为气泡的背景色,于是就有了本篇的效果。

以上就是Android实现好看的微信聊天气泡效果的详细内容,更多关于Android聊天气泡的资料请关注脚本之家其它相关文章!

相关文章

  • Android拼图游戏 玩转从基础到应用手势变化

    Android拼图游戏 玩转从基础到应用手势变化

    这篇文章主要介绍了Android拼图游戏的实现方法,教大家玩转从基础到应用手势变化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Android ViewPager自定义轮播图并解决播放冲突

    Android ViewPager自定义轮播图并解决播放冲突

    这篇文章主要为大家详细介绍了Android ViewPager自定义轮播图并解决播放冲突,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • android游戏载入的activity跳转到游戏主菜单的activity具体实现

    android游戏载入的activity跳转到游戏主菜单的activity具体实现

    停止2s后由游戏载入页面再跳转到游戏菜单页面,具体实现代码如下,感兴趣的朋友可以参考下哈
    2013-06-06
  • Android编程实现ListView中item部分区域添加点击事件功能

    Android编程实现ListView中item部分区域添加点击事件功能

    这篇文章主要介绍了Android编程实现ListView中item部分区域添加点击事件功能,涉及Android ListView相关适配器及事件响应操作技巧,需要的朋友可以参考下
    2018-01-01
  • 解决WebView通过URL加载H5界面出现空白的问题

    解决WebView通过URL加载H5界面出现空白的问题

    这篇文章主要介绍了解决WebView通过URL加载H5界面出现空白的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-03-03
  • android中RecyclerView自定义分割线实现

    android中RecyclerView自定义分割线实现

    本篇文章主要介绍了android中RecyclerView自定义分割线实现,由于RecyclerView的布局方式多种多样,所以它的分割线也根据布局的不同有所差异,本文只针对LinearLayoutManager线性布局。
    2017-03-03
  • 捕获与解析Android NativeCrash

    捕获与解析Android NativeCrash

    Android 开发中,NE一直是不可忽略却又异常难解的一个问题,原因是这里面涉及到了跨端开发和分析,需要同时熟悉 Java,C&C++,并且需要熟悉 NDK开发,并且解决起来不像 Java异常那么明了,本文为了解决部分疑惑,将从NE的捕获,解析与还原等三个方面进行探索
    2021-06-06
  • Android中的图片优化完全指南

    Android中的图片优化完全指南

    这篇文章主要给大家介绍了关于Android中图片优化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Android通过访问网页查看网页源码实例详解

    Android通过访问网页查看网页源码实例详解

    这篇文章主要介绍了Android通过访问网页查看网页源码的相关资料,需要的朋友可以参考下
    2017-06-06
  • Android中CountDownTimer类详解

    Android中CountDownTimer类详解

    本文详细讲解了Android中CountDownTimer类,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12

最新评论