這篇文章主要講解了“Android怎么自定義view實現(xiàn)科技感的儀表盤”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Android怎么自定義view實現(xiàn)科技感的儀表盤”吧!
創(chuàng)新互聯(lián)服務(wù)項目包括潮南網(wǎng)站建設(shè)、潮南網(wǎng)站制作、潮南網(wǎng)頁制作以及潮南網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,潮南網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到潮南省份的部分城市,未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
View 需要用到發(fā)光的效果,我們采用 shader 來實現(xiàn),那么我們需要首先關(guān)閉硬件加速。
// 關(guān)閉硬件加速 setLayerType(LAYER_TYPE_SOFTWARE, null);
1. 繪制一個發(fā)光的弧形
canvas.translate(getPaddingLeft() + radiusDial, getPaddingTop() + radiusDia arcPaint.setShader(null); arcPaint.setStyle(Paint.Style.STROKE); arcPaint.setAntiAlias(true); arcPaint.setAlpha(70); arcPaint.setStyle(Paint.Style.STROKE); arcPaint.setStrokeWidth(strokeWidthDial); arcPaint.setShadowLayer(10, 0, 0, Color.parseColor("#FFFFFF")); arcPaint.setColor(Color.parseColor("#38F9FD")); canvas.drawArc(mRect, 150, (360 - openAngle), false, arcPaint);
2. 繪制刻度和數(shù)字
canvas.rotate(150); for (int i = 0; i < clockPointNum + 1; i++) { pointerPaint.setColor(colorDialMiddle); if (i % 10 == 0) { //長表針 pointerPaint.setStrokeWidth(3); canvas.drawLine(radiusDial - DEFAULT_border - strokeWidthDial, 0, radiusDial - strokeWidthDial - dp2px(15), 0, pointerPaint); drawPointerText(canvas, i); } else if (i % 5 == 0f) { //短表針 pointerPaint.setStrokeWidth(2); canvas.drawLine(radiusDial - DEFAULT_border - strokeWidthDial, 0, radiusDial - strokeWidthDial - dp2px(9), 0, pointerPaint); } canvas.rotate((360 - openAngle) / clockPointNum); } canvas.rotate(-((180 - openAngle) / 2 + ((360 - openAngle) / clockPointNum)));
/** * 繪制刻度數(shù)字 */ private void drawPointerText(Canvas canvas, int i) { canvas.save(); pointerPaint.setColor(getResources().getColor(R.color.white)); int currentCenterX = (int) (radiusDial - strokeWidthDial - dp2px(21) - pointerPaint.measureText(String.valueOf(i)) / 2); canvas.translate(currentCenterX, 0); canvas.rotate(360 - 150 - ((360 - openAngle) / clockPointNum) * i); //坐標(biāo)系總旋轉(zhuǎn)角度為360度 int textBaseLine = (int) (0 + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom); canvas.drawText(String.valueOf(i + clockMinValue), 0, textBaseLine, pointerPaint); }
3. 繪制指針陰影
int currentDegree = (int) ((currentValue - clockMinValue) * ((360 - openAngle) / clockPointNum) + 150); canvas.rotate(currentDegree); int[] colorSweep = {0xAAFFE9EC, 0x0028E9EC, 0xAA28E9EC}; float[] position = {0f, 0.9f, 1f}; SweepGradient mShader = new SweepGradient(0, 0, colorSweep, position); arcPaint.setShader(mShader); arcPaint.setStyle(Paint.Style.STROKE); arcPaint.setStrokeWidth((float) (radiusDial * 0.4)); arcPaint.clearShadowLayer(); RectF mRect = new RectF((float) (-mRealRadius - DEFAULT_border + radiusDial * 0.2), (float) (-mRealRadius - DEFAULT_border + radiusDial * 0.2), (float) (mRealRadius + DEFAULT_border - radiusDial * 0.2), (float) (mRealRadius + DEFAULT_border - radiusDial * 0.2)); canvas.drawArc(mRect, 360 - (currentDegree - 150), (currentDegree - 150), false, arcPaint);
4. 繪制中間黑色圓形背景
canvas.restore(); canvas.translate(getPaddingLeft() + radiusDial, getPaddingTop() + radiusDial); Paint pointerPaint = new Paint(); pointerPaint.setAntiAlias(true); pointerPaint.setStyle(Paint.Style.FILL); pointerPaint.setColor(Color.parseColor("#05002D")); canvas.drawCircle(0, 0, (float) (radiusDial * 0.6), pointerPaint);
5. 繪制表針
canvas.save(); int currentDegree = (int) ((currentValue - clockMinValue) * ((360 - openAngle) / clockPointNum) + 150); canvas.rotate(currentDegree); titlePaint.setColor(Color.WHITE); titlePaint.setAntiAlias(true); pointerPath.moveTo(radiusDial - dp2px(12), 0); pointerPath.lineTo(0, -dp2px(5)); pointerPath.lineTo(-12, 0); pointerPath.lineTo(0, dp2px(5)); pointerPath.close(); canvas.drawPath(pointerPath, titlePaint); canvas.save(); canvas.restore();
6. 繪制深藍(lán)色發(fā)光圓形
canvas.rotate(0); canvas.restore(); Paint pointerPaint = new Paint(); pointerPaint.setAntiAlias(true); pointerPaint.setStyle(Paint.Style.FILL); pointerPaint.setColor(Color.parseColor("#050D3D")); pointerPaint.setShadowLayer(15, 0, 0, Color.parseColor("#006EC6")); canvas.drawCircle(0, 0, (float) (radiusDial * 0.4), pointerPaint);
7. 繪制表盤文字
titlePaint.setColor(Color.WHITE); titlePaint.setColor(titleDialColor); titlePaint.setTextSize(titleDialSize); canvas.drawText(formatData(currentValue), 0, 0, titlePaint); titlePaint.setColor(Color.parseColor("#38F9FD")); titlePaint.setTextSize(sp2px(14)); canvas.drawText("(" + dataUnit + ")", 0, dp2px(18), titlePaint);
8. 添加底部控件
這部分代碼就比較靈活了,儀表盤主體繪制出來以后,可以在布局文件中增加其它底部控件。并設(shè)置相應(yīng)點擊事件等。在此略過不表
感謝各位的閱讀,以上就是“Android怎么自定義view實現(xiàn)科技感的儀表盤”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對Android怎么自定義view實現(xiàn)科技感的儀表盤這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!