在上篇內(nèi)容【自定義View_一個(gè)帶懸浮窗的ProgressBar（上）】里携冤，我們已經(jīng)完成了自定義的進(jìn)度條效果归露，那么本篇內(nèi)容我們來(lái)介紹懸浮窗如何實(shí)現(xiàn)，先來(lái)看一下我們今天要實(shí)現(xiàn)的效果：
效果分析
-
懸浮窗有邊框，可以使用Path繪制蒜危。
-
懸浮窗有填充色典尾，可以使用Path繪制，Path填充惩阶。
-
懸浮窗有文字挎狸，進(jìn)度百分比，可以使用drawText繪制断楷。
-
懸浮窗的寬度可以隨文字動(dòng)態(tài)變化锨匆，這里我們就把文字的寬度作為懸浮窗的寬度（不考慮兩端圓弧）冬筒。
-
懸浮窗底部有箭頭恐锣，并且箭頭可以根據(jù)百分比進(jìn)行位置偏移。
經(jīng)過(guò)上面對(duì)效果的拆解分析舞痰，我們已經(jīng)大概有了實(shí)現(xiàn)方案土榴，那就是使用Path進(jìn)行開(kāi)發(fā)。那么Path該如何繪制匀奏？從哪里作為起點(diǎn)開(kāi)始繪制鞭衩，需要繪制那些片段，是我們需要分析重中之重娃善。
Path軌跡
由于懸浮窗底部箭頭的位置是需要根據(jù)百分比動(dòng)態(tài)偏移的论衍，它影響整個(gè)Path軌跡的繪制，也就是說(shuō)它影響著較多的其他變量的變化聚磺，那么我們就把箭頭的位置作為起點(diǎn)開(kāi)始繪制坯台，繪制過(guò)程示意如下：
動(dòng)作分解
我們可以把上面的動(dòng)圖進(jìn)行分解成下面7個(gè)片段：
①、從起點(diǎn)開(kāi)始瘫寝，向左上方畫(huà)一條線段
②蜒蕾、緊接著往左方形畫(huà)一條線段
③稠炬、再繼續(xù)畫(huà)一個(gè)半圓弧
④、往右畫(huà)一條線段
⑤咪啡、再繼續(xù)畫(huà)一個(gè)半圓弧
⑥首启、繼續(xù)往左畫(huà)一條線段
⑦、閉合
如何開(kāi)始撤摸？
下面的箭頭毅桃，我們可以把它當(dāng)成一個(gè)等邊三角形，并且給它一個(gè)初始高度mArrowHeight准夷。
再仔細(xì)看下懸浮窗的動(dòng)效可以發(fā)現(xiàn)钥飞，底部箭頭是需要根據(jù)當(dāng)前的百分比而發(fā)生位置偏移的，如下：
當(dāng)0%的時(shí)候衫嵌，箭頭在最左側(cè)读宙，隨著百分比的增大，箭頭逐漸移動(dòng)到最右邊：
我們需要知道楔绞，整個(gè)過(guò)程中箭頭移動(dòng)的總距離是多少结闸，才能控制其偏移量。
已知箭頭的高度是mArrowHeight墓律，懸浮窗左右兩個(gè)半圓弧的半徑是radius膀估。
假設(shè)底部起點(diǎn)坐標(biāo)是(firstX, firstY)，那么在上面這個(gè)過(guò)程中耻讽，我們需要明確firstX移動(dòng)的范圍察纯，示意圖如下：
根據(jù)示意圖，也就得到了firstX移動(dòng)范圍是：[raidus+c , getWidth() - radius - c]
移動(dòng)的總距離是：
// 箭頭活動(dòng)范圍针肥，對(duì)應(yīng)的距離長(zhǎng)度是：distance
float distance = getWidth() - 2 * radius - 2 * c
上面的計(jì)算中饼记，還需要求出c的值，那么如何求出c可以使用三角函數(shù)公式：
根據(jù)：
tan30° = c / mArrowHeight
可以求出：
c =tan30° * mArrowHeight
即：
double rad = 30 * Math.PI / 180.0; // 角度轉(zhuǎn)成弧度
c = (float) (Math.tan(rad) * mArrowHeight);
計(jì)算坐標(biāo)慰枕，繪制
我們知道具则，起點(diǎn)坐標(biāo)是動(dòng)態(tài)偏移的，是和當(dāng)前百分比（currentPercent）相關(guān)聯(lián)的具帮，那么當(dāng)百分比在某個(gè)數(shù)值時(shí)博肋，我們需要計(jì)算線段②的長(zhǎng)度，即下圖中的②：
上圖中④的長(zhǎng)度是等于文字的寬度的蜂厅，即④=textWidth匪凡，那么②（leftDistance）就等于：
// 箭頭左邊的線段的長(zhǎng)度
float leftDistance = (textWidth - 2 * c) * currentPercent;
其中，文字寬度計(jì)算如下：
// 獲取當(dāng)前文字
private String getText() {
return "進(jìn)度 " + df.format(this.currentPercent* 100) + " %";
}
// 計(jì)算文字的寬度
private float getTextWidth() {
String text = getText();
return paintProgress.measureText(text, 0, text.length());
}
接下來(lái)掘猿，我們就可以逐個(gè)計(jì)算出坐標(biāo)了病游。
第1個(gè)坐標(biāo)，即起點(diǎn)坐標(biāo)：
// 1
float firstX = radius + c + (currentPercent* distance);
float firstY = getHeight();
path.moveTo(firstX, firstY);
第2個(gè)坐標(biāo)：
// 2
float secondX = firstX - c;
float secondY = getHeight() - mArrowHeight;
path.lineTo(secondX, secondY);
第3個(gè)坐標(biāo)：
// 3
float thirdX = firstX - c - leftDistance;
float thirdY = getHeight() - mArrowHeight;
path.lineTo(thirdX, thirdY);
第4個(gè)坐標(biāo)：
// 4
float left = firstX - c - leftDistance - radius;
float top = 0;
float right = firstX - c - leftDistance + radius;
float bottom = getHeight() - mArrowHeight;
leftRect.set(left, top, right, bottom);
path.arcTo(leftRect, 90, 180);
第5個(gè)坐標(biāo)：
// 5
float fourthX = firstX - c - leftDistance + textWidth;
float fourthY = 0;
path.lineTo(fourthX, fourthY);
第6個(gè)坐標(biāo)：
//6
float left2 = firstX - c - leftDistance + textWidth - radius;
float top2 = 0;
float right2 = firstX - c - leftDistance + textWidth + radius;
float bottom2 = getHeight() - mArrowHeight;
rightRect.set(left2, top2, right2, bottom2);
path.arcTo(rightRect, -90, 180);
第7個(gè)坐標(biāo)：
// 7
float fifthX = firstX + c;
float fifthY = getHeight() - mArrowHeight;
path.lineTo(fifthX, fifthY);
path.close();
繪制軌跡和文字：
//繪制軌跡-填充
canvas.drawPath(path, paintFill);
//繪制軌跡-邊框
canvas.drawPath(path, paintStroke);
// 繪制文字稠通，百分比
Paint.FontMetricsInt fontMetricsInt = paintProgress.getFontMetricsInt();
float dy2 = (fontMetricsInt.bottom - fontMetricsInt.top) / 2f - fontMetricsInt.bottom;
float baseLine = (getHeight() - mArrowHeight) / 2f + dy2;
canvas.drawText(getText(), thirdX, baseLine, paintProgress);
加動(dòng)畫(huà)：
/**
* 設(shè)置當(dāng)前進(jìn)度的數(shù)據(jù)衬衬，帶動(dòng)畫(huà)
*
* @param progress 百分比
*/
public void setProgressWithAnim(float progress) {
ValueAnimator animator = ValueAnimator.ofFloat(0, progress).setDuration(ANIMATION_DURATION);
animator.addUpdateListener(animation -> {
currentPercent = (float) animation.getAnimatedValue() / 100.0f;
invalidate();
});
animator.start();
}
至此买猖，我們已經(jīng)完成了今天要實(shí)現(xiàn)的效果。
