如何畫氣泡:
在https://github.com/smuyyh/BubblePopupWindow基礎(chǔ)上記性了改動.
動態(tài)計算了小三角形的位置.
當(dāng)彈框超過屏幕底部時, 動態(tài)調(diào)整了顯示位置和小三角形的位置.
具體步驟:
先要生成一個三角形小尾巴的path數(shù)據(jù):
如圖, 紅色圈住的部分, 實際是一個類似90度的三角形, 先創(chuàng)建這個三角形的path:
private void renderBubbleLegPrototype() {
mBubbleLegPrototype.moveTo(0, 0);
mBubbleLegPrototype.lineTo(x, -y);
mBubbleLegPrototype.lineTo(x, y);
mBubbleLegPrototype.close();
}
其實上面幾行代碼畫出來的是一個正好相反的三角形, 類似:
有了這個"三角形", 就可以進(jìn)行選中平移, 拼接到矩形上, 使其開起來像個小氣泡.
對于上面截圖中的氣泡, 需要先選中180度:
matrix.postRotate(180);
注意這里的選中時繞原點旋轉(zhuǎn)的, 所以還需要再調(diào)整橫向的位置.
matrix.postTranslate(dstX, dstY);
具體值, 需要根據(jù)矩形邊框的尺寸及陰影大小進(jìn)行調(diào)節(jié).
最后是在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);
忽略其中的參數(shù)值, 只需要關(guān)注調(diào)用的這幾個方法.
顯示rewind()清空path值,
然后通過addRoundRect往path里添加了一個圓角矩形
然后通過addPath()把我們前面創(chuàng)建的三角形path及其需要的變換矩陣添加到整體path中.
最后通過drawPath把整個形狀path, 畫處理.
這是如何畫氣泡的簡單介紹. 再說下如何使畫出來的形狀帶有陰影.
陰影這個東西, 設(shè)計很喜歡, 而且往往都是喜歡四周帶陰影, 而不是android默認(rèn)的只在底部和右側(cè)帶陰影. 國內(nèi)的設(shè)計師都好像跟MD有仇一樣.
繼續(xù)說如何在畫出的形狀四周都加上陰影.
很簡單, 只需要在mpaint中添加陰影參數(shù):
if (Build.VERSION.SDK_INT >= 11) {
setLayerType(LAYER_TYPE_SOFTWARE, mFillPaint);
}
mPaint.setShadowLayer(SHADOW_LENGTH, 0, 0, SHADOW_COLOR);
需要注意這里中間兩個參數(shù)是0,0 如果是非0值, 那就會在底部和右側(cè)進(jìn)行傾斜.
