记录一次android画气泡实现, path和阴影的使用

如何画气泡:

在https://github.com/smuyyh/BubblePopupWindow基础上记性了改动.
动态计算了小三角形的位置.
当弹框超过屏幕底部时, 动态调整了显示位置和小三角形的位置.

具体步骤:
先要生成一个三角形小尾巴的path数据:

image.png

如图, 红色圈住的部分, 实际是一个类似90度的三角形, 先创建这个三角形的path:

private void renderBubbleLegPrototype() {

mBubbleLegPrototype.moveTo(0, 0);

mBubbleLegPrototype.lineTo(x, -y);

mBubbleLegPrototype.lineTo(x, y);

mBubbleLegPrototype.close();

}

其实上面几行代码画出来的是一个正好相反的三角形, 类似:

image.png

有了这个"三角形", 就可以进行选中平移, 拼接到矩形上, 使其开起来像个小气泡.

对于上面截图中的气泡, 需要先选中180度:

matrix.postRotate(180);

注意这里的选中时绕原点旋转的, 所以还需要再调整横向的位置.

matrix.postTranslate(dstX, dstY);

具体值, 需要根据矩形边框的尺寸及阴影大小进行调节.

最后是在onDraw()中画出整个形状

mPath.rewind();

mPath.addRoundRect(new RectF(l,t,r,b), CORNER_RADIUS, CORNER_RADIUS, Direction.CW);

mPath.addPath(mBubbleLegPrototype, renderBubbleLegMatrix(width - PADDING-2, height));

canvas.drawPath(mPath, mPaint);

忽略其中的参数值, 只需要关注调用的这几个方法.

显示rewind()清空path值,

然后通过addRoundRect往path里添加了一个圆角矩形

然后通过addPath()把我们前面创建的三角形path及其需要的变换矩阵添加到整体path中.

最后通过drawPath把整个形状path, 画处理.

这是如何画气泡的简单介绍. 再说下如何使画出来的形状带有阴影.

阴影这个东西, 设计很喜欢, 而且往往都是喜欢四周带阴影, 而不是android默认的只在底部和右侧带阴影. 国内的设计师都好像跟MD有仇一样.

继续说如何在画出的形状四周都加上阴影.

很简单, 只需要在mpaint中添加阴影参数:

if (Build.VERSION.SDK_INT >= 11) {

setLayerType(LAYER_TYPE_SOFTWARE, mFillPaint);

}

mPaint.setShadowLayer(SHADOW_LENGTH, 0, 0, SHADOW_COLOR);

需要注意这里中间两个参数是0,0 如果是非0值, 那就会在底部和右侧进行倾斜.