android 自定义控件之QQ气泡

最新推荐文章于 2025-06-27 13:22:10 发布

huangResplendent

最新推荐文章于 2025-06-27 13:22:10 发布

阅读量935

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android 移动开发文章标签： android 仿QQ气泡

本文链接：https://blog.youkuaiyun.com/u013209460/article/details/83305761

本篇文章主要是一个对贝塞尔曲线以及Path的一个应用，仿照QQ做了一个气泡的效果，效果如下：

首先实现这个效果的主要步骤

（1）绘制出QQ气泡静止时候的样式

（2）绘制出当手指拖动时候相连接的样式

（3）超过一定距离气泡炸裂的样式

下面进行详细的讲解，首先第一步我们通过Canvas.drawCircle()以及drawText()方法绘制出气泡和气泡上的文字

  canvas.drawCircle(moveBubbleCenter.x, moveBubbleCenter.y, bubbleRadius, bPaint);
            textPaint.getTextBounds(bubbleText, 0, bubbleText.length(), textRect);
            canvas.drawText(bubbleText, moveBubbleCenter.x - textRect.width() / 2, moveBubbleCenter.y + textRect.height() / 2, textPaint);

这一步较简单就是简单的API的使用。接下来我们进行手指拖动的时候相连接的绘制，通过观察我们可以知道在拖动的时候View主要可以分为三部分，一、原地不动的随距离不断变小的气泡，二、可以移动的大气泡，三、与气泡相连接的弧形。在这三部分中其中大小两个气泡实现方式主要也是通过Canvas.drawCircle()实现的，随着invalidate()的不断调用，更改小圆的绘制的半径和大圆的位置即可，随着手指移动大圆的位置和小圆的半径计算如下：