Shulou(Shulou.com)06/02 Report--

Android how to imitate Huawei weather to draw the dial, in order to solve this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Effect picture

You can see that this custom control combines color gradients, dynamic painting scales, and dynamic water polo effects. Next let's take a look at how this effect is achieved step by step.

Start customizing controls

Like many custom controls, you need to base some View or some ViewGroup.

What I choose here is View, as follows:

Public class HuaWeiView extends View {/ * is used to initialize brushes, etc. * @ param context * @ param attrs * / public HuaWeiView (Context context, @ Nullable AttributeSet attrs) {super (context, attrs) } / * is used to measure the restriction that view is square * @ param widthMeasureSpec * @ param heightMeasureSpec * / @ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure (widthMeasureSpec, heightMeasureSpec) } / * implement various rendering functions * @ param canvas * / @ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas);}}

The construction method is used in the layout.

The onMeasure () method is used to measure and limit the size of view

The onDraw () method is used to perform specific rendering functions.

1. Use the onMeasure () method to restrict View to a square

Only by determining a rectangle can you draw an ellipse. If the rectangle is square, the ellipse becomes a circle.

@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure (widthMeasureSpec, heightMeasureSpec); int width=MeasureSpec.getSize (widthMeasureSpec); int height = MeasureSpec.getSize (heightMeasureSpec); / / long len=Math.min (width,height) with the minimum square; / / set to measure height and width (must be called, otherwise there is no effect) setMeasuredDimension (len,len);}

Get the width and height set by the user through MeasureSpec, and then take the minimum value and set it to our view, so we have a rectangle.

Now used in layouts:

The parent layout background is blue, the control background is pink, and the width and height are different, but the display effect of the control is still a square, and the small value shall prevail. Our onMeasure () is in effect.

The next step is how to determine a circular area.

2.onDraw () draws a circular area

We need to have an understanding of the coordinate system in Android before drawing

We all know that the upper left corner of the mobile phone screen is the coordinate origin, to the right is the X positive axis, and below is the Y positive axis. In fact, the mobile phone page is not only the display interface of activity, but also a View. Can it be said that all View have their own coordinate system when drawing graphics?

That is, each View has its own coordinate system, such as the current custom View:

Now we need to draw an arc in our custom view, then the radius of this arc is half the length of our custom view, that is:

Radius=len/2

Then the coordinate of the center of the circle happens to be (radius,radius).

Next, start drawing.

@ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas); / / canvas.drawArc (oval, startAngle, sweepAngle, useCenter,paint);}

Introduce the method of drawing arcs:

Parameter-Oval is a RectF object that is a rectangle

Parameter two startAngle is the starting angle of the arc

Parameter 3 sweepAngle is the passing angle of the arc (sweep angle)

Parameter 4 use Center is a Boolean value for arc, arc for true and cut arc for false

Parameter five paint is a brush object

That is to say, as long as a rectangle is determined, an arc can be drawn by determining the angle at which it starts and passes (you can test this with a drawing board).

The next step is to initialize these parameters

Initialize rectangle

@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure (widthMeasureSpec, heightMeasureSpec); int width = MeasureSpec.getSize (widthMeasureSpec); int height = MeasureSpec.getSize (heightMeasureSpec); / / long len = Math.min (width, height) whose minimum value is square; / / instantiated rectangle oval=new RectF (0j0jue Lenlen) / / set measurement height and width (must be called, otherwise there is no effect) setMeasuredDimension (len, len);}

To draw a rectangle, you need to determine the coordinates of the upper left corner and the lower right corner (which can be tested through the artboard). Through the above analysis, the origin of the coordinates is the upper left corner of our view, and the coordinates of the lower right corner is of course len.

The next step is to initialize the start and pass angles

Private float startAngle=120; private float sweepAngle=300

You need to know that the downward axis is the positive Y axis, which is exactly the opposite of what you learned in school, that is, 90 degrees is below and-90 degrees is above.

Initialize the brush

Public HuaWeiView (Context context, @ Nullable AttributeSet attrs) {super (context, attrs); paint = new Paint (); / / set brush color paint.setColor (Color.WHITE); / / set brush anti-aliasing paint.setAntiAlias (true); / / make the drawing hollow (unfilled) paint.setStyle (Paint.Style.STROKE);} useCenter=false

It is not easy to get here, but it is useless to draw an arc. I want a scale line, and there is no way for us to draw a scale line in canvas. At this time, we need to write a method to draw a scale line ourselves.

By looking at the picture, we can see that all the lines draw a straight line in a certain direction from the point on the arc, so how to determine these two points requires us to do two things:

Move coordinate system

@ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas); / / method of drawing arcs canvas.drawArc (oval, startAngle, sweepAngle, useCenter,paint); / / method of drawing scale lines drawViewLine (canvas);} private void drawViewLine (Canvas canvas) {/ / save the contents of previous canvas () / / move canvas (X-axis movement distance, Y-axis movement distance) canvas.translate (radius,radius); / / restore status canvas.restore ();}

We wrote a method to draw tick marks ourselves and called it in the onDraw () method. Before moving the coordinate system, you need to save the previous canvas state, and then the X and Y axes move the distance of the arc radius, as shown in the following figure:

Canvas.translate (radius,radius); the method moves the coordinate system (obtained by actual results and looking up the data)

Canvas.save () and canvas.restore () appear in pairs as if the stream was about to be closed.

* * when something is done, start the second thing, rotate the coordinate system

Just by moving the coordinate system, it is still difficult to determine the coordinates on the arc point and the coordinates of another point. If only these two points were on the coordinate axis, the following is achieved:

Private void drawViewLine (Canvas canvas) {/ / first save the contents of the previous canvas canvas.save (); / / move canvas (X axis movement distance, Y axis movement distance) canvas.translate (radius,radius); / / rotate the coordinate system canvas.rotate (30); / / restore the state canvas.restore () after the operation is completed

The method of drawing scale lines adds a code that rotates 30 degrees. What should be the coordinate system after rotation?

Because the difference between the starting point and 90 degrees is 30, after the rotation, the starting point just falls on the Y axis, so the coordinates of this point can be easily determined, right? it is (0monetary radius). If we are looking for a little bit on the Y axis, we can draw a scale, what are its coordinates? Yes, it should be (0Gravity radiusmury), because we are going to internalize the tick marks, so subtract a value, so try it as soon as possible, the code is as follows:

Private void drawViewLine (Canvas canvas) {/ / Save the contents of the previous canvas canvas.save (); / / move canvas (X axis movement distance, Y axis movement distance) canvas.translate (radius,radius); / / rotate coordinate system canvas.rotate (30); Paint linePatin=new Paint (); / / set brush color linePatin.setColor (Color.WHITE) / / Lineweight linePatin.setStrokeWidth (2); / / set brush anti-aliasing linePatin.setAntiAlias (true); / / draw a tick line canvas.drawLine (0 meme radiusmeme 0 minus mai40 line Patin); / / restore the state canvas.restore () after the operation is completed;}

Draw a white line according to the coordinates of the two points, as shown in the figure:

Of course, these points are all obtained when the moved coordinate system is rotated by 30 degrees. Here is a line drawn. If you draw more than one line, or would it not be better if you just let it rotate a small angle every time and then draw a straight line? how many degrees should it be rotated? for example, here: the total angle sweepAngle=300; scanned requires 100degrees, so the angle rotateAngle=sweepAngle/100 for each rotation is required. The specific code is as follows:

Private void drawViewLine (Canvas canvas) {/ / Save the contents of the previous canvas canvas.save (); / / move canvas (X axis movement distance, Y axis movement distance) canvas.translate (radius,radius); / / rotate coordinate system canvas.rotate (30); Paint linePatin=new Paint (); / / set brush color linePatin.setColor (Color.WHITE) / / Lineweight linePatin.setStrokeWidth (2); / / set brush anti-aliasing linePatin.setAntiAlias (true); / / determine the angle of each rotation float rotateAngle=sweepAngle/99; for (int item0)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.