Android custom view imitation QQ health interface

Recently, I have been learning about custom view. Today, I bring you the implementation of QQ health interface. Look at the renderings first:

You can set the number color, font color, movement steps, movement ranking and average movement steps. The length of the blue indicator bar below the dotted line will change with the average steps. The overall effect is very similar to QQ sports health interface.

Custom view trilogy, let's see how to implement it.

1. Custom view properties:

Two attributes, font color and line color, are defined successively. Format is the value type of this attribute. Then declare our custom view in the layout file:

We can set the custom view attribute ourselves. Remember to introduce our namespace, xmlns: app = " http://schemas.Android.com/apk/res-auto ”

2. Get the properties of the custom view:

Custom views generally need to implement the following three construction methods, which are called one layer at a time and belong to a progressive relationship. Therefore, we only need to obtain the view property in the last constructor.

The first step is to obtain the theme style array of the custom control through the theme. Obtainstyledattributes () method; The second step is to traverse each attribute to obtain the value of the corresponding attribute, that is, the attribute value we write in the XML layout file; The third step is to remember to call array. Recycle () to recycle resources after the loop ends; The fourth step is to perform the necessary initialization. It is not recommended to instantiate objects in the OnDraw process, because it is a frequently repeated process. New needs to allocate memory space. If a large number of new objects are used in a frequently repeated process, it will cause memory waste.

3. Override the onmeasure method to determine the view size: when you do not override the onmeasure method, the system calls the default onmeasure method:

The purpose of this method is to measure the size of the control. In fact, when the Android system loads the layout, the system measures the size of each child view to tell the parent view how much space I need to occupy, and then the parent view will decide how much space to allocate to the child view according to its own size. There are three specmode modes of measurespec:

Measurespec.actual: the size of the parent view and the desired child view is the size specified in specsize; Generally, a specific value or match is set_ PARENT MeasureSpec.AT_ Most: the size of the subview is at most the size in specsize; Indicates that the sub layout is limited to a maximum value, usually warp_ Content measurespec.unspecified: the parent view does not impose any restrictions on the child view, and the child view can get any desired size; It indicates that the sub layout can be as large as it wants, and it is rarely used.

Want to set up warp_ Content, just override the onmeasure method:

In order not to make the layout appear too small, so warp_ Content takes 1 / 2 of the width and 3 / 4 of the height respectively. The specific situation varies from person to person.

4. Rewrite OnDraw method for painting: the interface is complex. Let's go step by step from top to bottom:

The bottom layer of the whole custom view is a white background with a radian on the top left, a right angle on the bottom left and a right angle on the bottom right. The rectangle realized by canvas.drawroundrect has radians at all four corners, which is not as expected. But the first-order Bessel curve plus the second-order Bessel curve can well realize this special case. Moveto (x, y): it does not draw, but is only used to move the brush and determine the starting point coordinates, which can be used in combination with other methods; Lineto (x, y): the first-order Bezier curve, with the coordinates as the end coordinates, is used for straight-line drawing in combination with the moveto method; Quadto (x1, Y1, X2, Y2): second-order Bezier curve, (x1, Y1) is the control point, (X2, Y2) is the end point, which is used to draw a smooth curve; Finally, call canvas.drawPath (path, paint) to achieve this effect.

To draw an arc, first determine the range of the arc. The four parameters passed in are the coordinates of the circumscribed rectangle of the circle where the arc is located. The five parameters of canvas.drawarc are arc range in turn; Starting angle; The angle of the arc; When the fourth is true, the center of the circle will be included when drawing an arc. It is usually used to draw a sector. We choose false here; Arc brush

It's a little easier to draw text. Just calculate their positions here

Dashpatheffect is used to dashed the line segment of path. The constructor is dashpatheffect (float [] intervals, float offset), where intervals are on and off arrays of dashed lines. The length of the array must be greater than or equal to 2. Float [0], float [1] represents the length of the first solid line and the first dashed line in turn. If there is no data behind the array, repeat the first number to cycle back and forth. Offset is the offset at the time of drawing.

DashPathEffect effects = new DashPathEffect(new float[]{5,5},1);

Then take this instance as the parameter of linepaint. Setpatheffect(). Draw the text below to write a simple loop, and then the length of the vertical line is calculated according to the size of the step array. After changing the average number of steps in the example figure, the length of the vertical line also changes.

The bottom water ripple is realized by using the third-order Bezier curve: cubicto (x1, Y2, X3, Y3): the third-order Bezier curve, (x1, Y2) is the control point and (X3, Y3) is the end point, which is used to draw complex curves.

As for rewriting the OnDraw method, my personal suggestion is to draw the general outline of the user-defined view to be completed in the book, mark the coordinates and positions, and calculate the height and width. Then, according to the custom view drawn, draw step by step from top to bottom and from outside to inside. It's really practical. It's logical and hierarchical. It's very helpful for you to write code.

5. Realization of animation:

Here we have to mention the advantages of attribute animation, which can act not only on the view, but also on an object. Just set the start and end values and add an animation monitor to get the changed values. Then use the postinvalidate () method to call the OnDraw method to change the values. Finally, set up a combined animation - animatorset to make the three animations achieve the effect of synchronization and consistency. Then I use animation. At the beginning, I wrote this method in the init () initialization function, which has not achieved the expected effect. Later, I learned that when the user-defined view is initialized, some values required for the combined Animation: steps, ranking, average steps, etc. have not been passed, so the animation cannot be completed. Finally, I wrote this method behind the onmeasure () method to achieve the effect. Thank you for your reminder.

6. Set the step size and its use in the activity:

The value set is passed through the construction method, and the method of opening animation is finally called. Code of the corresponding activity:

You can set the desired value according to the situation.

After the whole process, you will find that customizing the view is not as difficult as expected. Practice makes perfect. I believe that no matter how complex the interface is, it can't help us.

OK, see you next time.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.