該文章同步發(fā)布到CSDN，轉(zhuǎn)載請(qǐng)注明出處
簡(jiǎn)書：http://blog.csdn.net/ling9400/article/details/70182583
這篇博客應(yīng)該算是博主真正意義上的第一篇自定義控件的博客魔熏，所以寫出這個(gè)控件之后第一時(shí)間進(jìn)行記錄，廢話不多說(shuō)钩杰，先上效果圖：
這里寫圖片描述
這個(gè)圖在我CSDN博客的上一篇文章中已經(jīng)上過(guò)了的逝慧，在上篇文章中就說(shuō)明要做出這個(gè)效果。
自定義控件無(wú)非就是那幾個(gè)步驟：
- onMeasure
- onLayout(ViewGroup中會(huì)重寫苔严，這里直接集成View甩恼，所以不會(huì)重寫)
- onDraw（所有自定義View的重要步驟）
現(xiàn)在根據(jù)上面的幾個(gè)步驟簡(jiǎn)要說(shuō)明一下：
首先蟀瞧，看下屬性：
這里寫圖片描述
然后是控件的構(gòu)造方法以及初始化操作和自定義屬性的取值：
這里寫圖片描述
自定義屬性在這：
這里寫圖片描述
然后在是重點(diǎn)步驟————onMeasure
這里寫圖片描述
onLayout這里就不需要重寫了沉颂，所以直接來(lái)到onDraw，直接上代碼
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//先畫兩個(gè)外圓
mPaint.setStrokeWidth(1);
mPaint.setColor(Color.BLUE);
canvas.drawCircle(mWidth/2, mHeight/2, wRadius, mPaint);
canvas.drawCircle(mWidth/2, mHeight/2, nRadius, mPaint);
//背景圖片
Bitmap bgMap = BitmapFactory.decodeResource(getResources(), mapBg);
float scaleWidth = (float) (nRadius*2 - 80)/bgMap.getWidth();
float scaleHeight = (float) (nRadius*2 - 50)/bgMap.getHeight();
//縮放圖片
Matrix mMatrix = new Matrix();
mMatrix.postScale(scaleWidth, scaleHeight);
Bitmap bgNew = Bitmap.createBitmap(bgMap, 0,0, bgMap.getWidth(), bgMap.getHeight(), mMatrix, true);
canvas.drawBitmap(bgNew, mWidth/2 - bgNew.getWidth()/2 , mHeight/2 - bgNew.getHeight()/2 , mPaint);
//縮放掃描的背景圖片
Matrix scanMa = new Matrix();
Bitmap scaningMap = BitmapFactory.decodeResource(getResources(), mapScaning);
scanMa.postScale(0.8f, 0.8f);
Bitmap newScan = Bitmap.createBitmap(scaningMap,0,0,scaningMap.getWidth(),scaningMap.getHeight(),scanMa, true);`
//滾動(dòng)圓滾動(dòng)的矩形
mPaint.setStrokeWidth(gWidth);
loadingRectF = new RectF(mWidth/2 - gRadius, mWidth/2 -gRadius,
mWidth/2 +gRadius, mWidth/2 + gRadius);
//掃描bitmap
if(!isFirst){
isFirst = true;
scanRect = new Rect(mWidth/2 - gRadius + 20, mWidth/2 - gRadius + 20,
mWidth/2 +gRadius - 20, mWidth/2 + gRadius - 20);
}
//開(kāi)始掃描
if(isStart && !isEnd){
canvas.drawBitmap(newScan, mWidth/2 - newScan.getWidth()/2, mHeight/2 - newScan.getHeight()/2, mPaint);
mPaint.setColor(Color.RED);
//畫三個(gè)滾動(dòng)的圓弧
canvas.drawArc(loadingRectF, topDegree, arc, false, mPaint);
canvas.drawArc(loadingRectF, bottomDegree, arc, false, mPaint);
canvas.drawArc(loadingRectF, thirdDegree, arc, false, mPaint);
mPaint.setColor(Color.GRAY);
//畫掃描線 -- 通過(guò)修改top值來(lái)實(shí)現(xiàn)一直往下掃描效果
canvas.drawRect(scanRect.left, scanRect.top, scanRect.right, scanRect.top + 1, mPaint);
scanRect.top += scanDis;
if(scanRect.top >= scanRect.bottom){
scanRect.top = (int) loadingRectF.top + 20;
}
//圓弧滾動(dòng) -- 通過(guò)修改圓弧的初始值來(lái)實(shí)現(xiàn)滾動(dòng)
startRotating();
}else{//結(jié)束掃描 完成掃描
Bitmap downMap = BitmapFactory.decodeResource(getResources(), mapDown);
Matrix downMatrix = new Matrix();
downMatrix.postScale(2.0f, 2.0f);
Bitmap newDownMap = Bitmap.createBitmap(downMap, 0,0, downMap.getWidth(), downMap.getHeight(),
downMatrix, true);
canvas.drawBitmap(newDownMap, mWidth/2 - newDownMap.getWidth()/2, mHeight/2 - newDownMap.getHeight()/2, mPaint);
}
}
代碼里面都注釋的很清楚了悦污，我想不需要另外在說(shuō)明了铸屉。還有幾個(gè)方法就是圓弧滾動(dòng)的實(shí)現(xiàn)以及開(kāi)始掃描和完成掃描
這里寫圖片描述
這里寫圖片描述
最后，通過(guò)調(diào)用startScan方法即可執(zhí)行掃描切端，調(diào)用stopScan完成掃描彻坛。
PS：最后說(shuō)明一句，由于開(kāi)始掃描和完成掃描沒(méi)有實(shí)現(xiàn)動(dòng)畫效果感覺(jué)有點(diǎn)突兀踏枣，希望懂的朋友可以指點(diǎn)或者幫忙實(shí)現(xiàn)下也是可以滴昌屉，哈哈···
