如何画气泡:
在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值, 那就会在底部和右侧进行倾斜.
网友评论