android 進(jìn)階之路－自定義view－水波紋進(jìn)度球
如果你是老司機(jī)咒循，一看標(biāo)題就會(huì)就return吧，嘻嘻棒口。
<br />
在我們的日常開發(fā)中自定義控件還是用的挺多的狡逢，設(shè)計(jì)師或者產(chǎn)品為了更好的漂亮倔约，美觀，交互都會(huì)做一些牛逼的ui效果圖腮猖，但是最后實(shí)現(xiàn)的還是我們程序員啊税稼。
所以說 自定義view你還是得會(huì)的。<br />
要開車了哦狞贱，請刷卡...<br />
滴刻获，老司機(jī)卡<br />
滴，學(xué)生卡<br />
滴瞎嬉，...<br />
今天我們要實(shí)現(xiàn)的這個(gè)view沒有太多交互性的view蝎毡，所以就繼承view<br />
自定義view的套路，套路很深
- 獲取我們自定義屬性attrs（可省略）
- 重寫onMeasure方法氧枣，計(jì)算控件的寬和高
- 重寫onDraw方法沐兵，繪制我們的控件
這么看來，自定義view的套路很清晰嘛便监。
我們看下今天的效果圖扎谎，其中一個(gè)是放慢的效果（時(shí)間調(diào)的長）
我們按照套路來。
一.自定義屬性
<declare-styleable name="WaveProgressView">
<attr name="radius" format="dimension|reference" />
<attr name="radius_color" format="color|reference" />
<attr name="progress_text_color" format="color|reference" />
<attr name="progress_text_size" format="dimension|reference" />
<attr name="progress_color" format="color|reference" />
<attr name="progress" format="float" />
<attr name="maxProgress" format="float" />
</declare-styleable>
看下效果圖我們就知道因該需要哪些屬性烧董。就不說了毁靶。
然后就是獲取我們的這些屬性，就是用TypedArray來獲取解藻。當(dāng)然是在構(gòu)造中獲取老充，一般我們會(huì)復(fù)寫構(gòu)造方法，少參數(shù)調(diào)用參數(shù)多的螟左，然后走到參數(shù)最多的那個(gè)啡浊。
下面是獲取自定義屬性的代碼：
TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.WaveProgressView, defStyleAttr, R.style.WaveProgressViewDefault);
radius = (int) a.getDimension(R.styleable.WaveProgressView_radius, radius);
textColor = a.getColor(R.styleable.WaveProgressView_progress_text_color, 0);
textSize = a.getDimensionPixelSize(R.styleable.WaveProgressView_progress_text_size, 0);
progressColor = a.getColor(R.styleable.WaveProgressView_progress_color, 0);
radiusColor = a.getColor(R.styleable.WaveProgressView_radius_color, 0);
progress = a.getFloat(R.styleable.WaveProgressView_progress, 0);
maxProgress = a.getFloat(R.styleable.WaveProgressView_maxProgress, 100);
a.recycle();
注： R.style.WaveProgressViewDefault是這個(gè)控件的默認(rèn)樣式觅够。
二.onMeasure測量
我們重寫這個(gè)方法主要是根據(jù)父控件的寬和高來設(shè)置自己的寬和高。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//計(jì)算寬和高
int exceptW = getPaddingLeft() + getPaddingRight() + 2 * radius;
int exceptH = getPaddingTop() + getPaddingBottom() + 2 * radius;
int width = resolveSize(exceptW, widthMeasureSpec);
int height = resolveSize(exceptH, heightMeasureSpec);
int min = Math.min(width, height);
this.width = this.height = min;
//計(jì)算半徑,減去padding的最小值
int minLR = Math.min(getPaddingLeft(), getPaddingRight());
int minTB = Math.min(getPaddingTop(), getPaddingBottom());
minPadding = Math.min(minLR, minTB);
radius = (min - minPadding * 2) / 2;
setMeasuredDimension(min, min);
}
首先該控件的寬和高肯定是一樣的巷嚣，因?yàn)槭莻€(gè)圓嘛喘先。其實(shí)是寬和高與半徑和內(nèi)邊距（padding）有關(guān)，這里的內(nèi)邊距廷粒，我們?nèi)∩舷伦笥易钚〉囊粋€(gè)窘拯。寬和高也選擇取最小的。
this.width = this.height = min; 包含左右邊距坝茎。
resolveSize這個(gè)方法很好的為我們實(shí)現(xiàn)了我們想要的寬和高我慢看下源碼涤姊。
public static int resolveSizeAndState(int size, int measureSpec, int childMeasuredState) {
final int specMode = MeasureSpec.getMode(measureSpec);
final int specSize = MeasureSpec.getSize(measureSpec);
final int result;
switch (specMode) {
case MeasureSpec.AT_MOST:
if (specSize < size) {
result = specSize | MEASURED_STATE_TOO_SMALL;
} else {
result = size;
}
break;
case MeasureSpec.EXACTLY:
result = specSize;
break;
case MeasureSpec.UNSPECIFIED:
default:
result = size;
}
return result | (childMeasuredState & MEASURED_STATE_MASK);
}
如果我們自己寫也是這樣寫。
最后通過setMeasuredDimension設(shè)置寬和高嗤放。
三.onDraw繪制
關(guān)于繪制有很多android 提供了很多API思喊，這里就不多說了。
繪制首先就是一些畫筆的初始化次酌。
需要提一下繪制path路徑的畫筆設(shè)置為PorterDuff.Mode.SRC_IN模式恨课，這個(gè)模式只顯示重疊的部分。
pathPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
pathPaint.setColor(progressColor);
pathPaint.setDither(true);
pathPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
我們要將所有的繪制 繪制到一個(gè)透明的bitmap上岳服，然后將這個(gè)bitmap繪制到canvas上剂公。
if (bitmap == null) {
bitmap = Bitmap.createBitmap(this.width, this.height, Bitmap.Config.ARGB_8888);
bitmapCanvas = new Canvas(bitmap);
}
為了方便計(jì)算和繪制，我將坐標(biāo)系平移padding的距離
bitmapCanvas.save();
//移動(dòng)坐標(biāo)系
bitmapCanvas.translate(minPadding, minPadding);
// .... some thing
bitmapCanvas.restore();
3.1繪制圓
bitmapCanvas.drawCircle(radius, radius, radius, circlePaint);
3.2繪制PATH 路徑.
一是要實(shí)現(xiàn)波紋的左右飄吊宋，和上下的振幅慢慢的減小
繪制這個(gè)之前我們需要知道二階貝塞爾曲線的大致原理纲辽。
簡單的說就是知道：P1起始點(diǎn),P2是終點(diǎn)，P1是控制點(diǎn).利用塞爾曲線的公式就可以得道沿途的一些點(diǎn)贫母，最后把點(diǎn)連起來就是嘍文兑。
下面這個(gè)圖片來于網(wǎng)絡(luò)：
在android－sdk里提供了繪制貝塞爾曲線的函數(shù)rQuadTo方法
public void rQuadTo(float dx1, float dy1, float dx2, float dy2)
- dx1:控制點(diǎn)X坐標(biāo)，表示相對上一個(gè)終點(diǎn)X坐標(biāo)的位移坐標(biāo)腺劣，可為負(fù)值，正值表示相加因块，負(fù)值表示相減橘原；
- dy1:控制點(diǎn)Y坐標(biāo)，相對上一個(gè)終點(diǎn)Y坐標(biāo)的位移坐標(biāo)涡上。同樣可為負(fù)值趾断，正值表示相加，負(fù)值表示相減吩愧；
- dx2:終點(diǎn)X坐標(biāo)芋酌，同樣是一個(gè)相對坐標(biāo)，相對上一個(gè)終點(diǎn)X坐標(biāo)的位移值雁佳，可為負(fù)值脐帝，正值表示相加同云，負(fù)值表示相減；
- dy2:終點(diǎn)Y坐標(biāo)堵腹，同樣是一個(gè)相對炸站，相對上一個(gè)終點(diǎn)Y坐標(biāo)的位移值【吻辏可為負(fù)值旱易，正值表示相加，負(fù)值表示相減腿堤；
這四個(gè)參數(shù)都是傳遞的都是相對值阀坏，相對上一個(gè)終點(diǎn)的位移值。
要實(shí)現(xiàn)振幅慢慢的減小我們可以調(diào)節(jié)控制點(diǎn)的y坐標(biāo)即可笆檀，即：
float percent=progress * 1.0f / maxProgress;
就可以得到［0忌堂，1］的
一個(gè)閉區(qū)間，［0误债，1］這貨好啊浸船，我喜歡，可以來做很多事情寝蹈。
這樣我們就可以根據(jù)percent來調(diào)節(jié)控制點(diǎn)的y坐標(biāo)了李命。
//根據(jù)直徑計(jì)算繪制貝賽爾曲線的次數(shù)
int count = radius * 4 / 60;
//控制-控制點(diǎn)y的坐標(biāo)
float point = (1 - percent) * 15;
for (int i = 0; i < count; i++) {
path.rQuadTo(15, -point, 30, 0);
path.rQuadTo(15, point, 30, 0);
}
這里給出一個(gè)振幅的原理圖：
然后就是根據(jù)寬來循環(huán)周期就可以了
要實(shí)現(xiàn)左右波紋只需要控制閉合路徑的左上角的x坐標(biāo)即可，當(dāng)然也是根據(jù)percent嘍箫老。
大家可以結(jié)合下面這個(gè)圖來理解下上面的話封字。
path繪制的完整代碼片段。
//繪制PATH
//重置繪制路線
path.reset();
float percent=progress * 1.0f / maxProgress;
float y = (1 - percent) * radius * 2;
//移動(dòng)到右上邊
path.moveTo(radius * 2, y);
//移動(dòng)到最右下方
path.lineTo(radius * 2, radius * 2);
//移動(dòng)到最左下邊
path.lineTo(0, radius * 2);
//移動(dòng)到左上邊
// path.lineTo(0, y);
//實(shí)現(xiàn)左右波動(dòng),根據(jù)progress來平移
path.lineTo(-(1 -percent) * radius*2, y);
if (progress != 0.0f) {
//根據(jù)直徑計(jì)算繪制貝賽爾曲線的次數(shù)
int count = radius * 4 / 60;
//控制-控制點(diǎn)y的坐標(biāo)
float point = (1 - percent) * 15;
for (int i = 0; i < count; i++) {
path.rQuadTo(15, -point, 30, 0);
path.rQuadTo(15, point, 30, 0);
}
}
//閉合
path.close();
bitmapCanvas.drawPath(path, pathPaint);
3.3繪制進(jìn)度的文字
這個(gè)就比較簡單了耍鬓，繪制在控件的中間即可阔籽。關(guān)于文字的坐標(biāo)計(jì)算還是很好理解的。
//繪制文字
String text = progress + "%";
float textW = textPaint.measureText(text);
Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
float baseLine = radius - (fontMetrics.ascent + fontMetrics.descent) / 2;
bitmapCanvas.drawText(text, radius - textW / 2, baseLine, textPaint);
最后別忘了把我們的bitmap繪制到canvas上牲蜀。
canvas.drawBitmap(bitmap, 0, 0, null);
哦笆制，最后是實(shí)用方法，這里我們不用thread＋handler涣达，我們用屬性動(dòng)畫在辆。
你懂的！６忍Α匆篓！，like
ObjectAnimator objectAnimator0 = ObjectAnimator.ofFloat(waveProgressView_0, "progress", 0f, 100f);
objectAnimator0.setDuration(3300);
objectAnimator0.setInterpolator(new LinearInterpolator());
objectAnimator0.start();
至此寇窑，也就實(shí)現(xiàn)了我們的效果鸦概。
最后給出源碼的下載地址：
star了不迷路哦。
https://github.com/ta893115871/WaveProgressView
