How to customize the dashboard of view to realize the sense of science and technology by Android

This article mainly explains "Android how to customize view to achieve the sense of science and technology dashboard", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Android how to customize view to achieve the sense of science and technology dashboard"!

Effect picture

Realize

View needs to use the glowing effect, we use shader to achieve, then we need to turn off hardware acceleration first.

/ / disable hardware acceleration setLayerType (LAYER_TYPE_SOFTWARE, null)

1. Draw a glowing arc

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)

two。 Draw scales and numbers

Canvas.rotate; for (int I = 0; I < clockPointNum + 1; iTunes +) {pointerPaint.setColor (colorDialMiddle); if (I% 10 = = 0) {/ / long watch pointerPaint.setStrokeWidth (3); canvas.drawLine (radiusDial-DEFAULT_border-strokeWidthDial, 0, radiusDial-strokeWidthDial-dp2px (15), 0, pointerPaint); drawPointerText (canvas, I) } else if (I% 5 = = 0f) {/ / short watch hand 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) / * draw scale numbers * / 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 (360150-((360-openAngle) / clockPointNum) * I); / / coordinate system total rotation angle int textBaseLine = (int) (0 + (fontMetrics.bottom-fontMetrics.top) / 2-fontMetrics.bottom); canvas.drawText (String.valueOf (I + clockMinValue), 0, textBaseLine, pointerPaint);}

3. Draw pointer shadow

Int currentDegree = (int) ((currentValue-clockMinValue) * ((currentValue-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. Draw a black round background in the middle

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. Draw the watch hand

Canvas.save (); int currentDegree = (int) ((currentValue-clockMinValue) * (currentValue-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. Draw a dark blue glowing circle

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. Draw dial text

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. Add bottom control

This part of the code is more flexible, after the main body of the dashboard is drawn, you can add other bottom controls to the layout file. And set the corresponding click event and so on. Skip it here.

Thank you for your reading, the above is the content of "Android how to customize view to achieve the sense of science and technology dashboard". After the study of this article, I believe you have a deeper understanding of how to customize the Android view to achieve a sense of science and technology dashboard, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!