Android custom view to achieve line chart effect

The following is the result diagram (each state is represented by an expression picture):

1、 The layout file of the main page is as follows:

Linecharview is a custom view, and app: XX is the various properties of the view.

2、 Add the following XML to the attrs file of values to define various attributes of linecharview:

3、 Next, create a class linecharview to inherit view and declare the following variables:

Read each attribute value in the constructor:

4、 Next, you can override the onlayout method to calculate the width and height of the control and the origin coordinates of the coordinate axis. The X coordinates of the origin of the coordinate axis can be calculated by the width of the y-axis text, the y-axis width, and the horizontal distance from y. here, the y-axis text has only four states (a, B, C, d). You can use the following method to calculate the X coordinates of the origin:

The Y coordinate of the origin can also be calculated in a similar way:

When the amount of data to be displayed is large and cannot be displayed in full, it needs to be displayed through the sliding line chart. We only need to control the X coordinate of the first point, and then we can calculate the coordinates of each subsequent point through the attribute interval. However, in order to prevent all data from sliding out of the boundary, we need to control it during sliding, In fact, it controls the range of the X coordinate of the first point. The minimum value of the X coordinate of the first point can be subtracted from the X coordinate of the origin by the width of the control, and then subtracted from the horizontal distance of all line charts. The code is as follows:

In the default first display of the control, the horizontal distance between the first point and the Y axis is equal to half of the interval. If the first point appears at this position during sliding, it is not allowed to continue sliding to the right, so the maximum value of the X coordinate of the first point is equal to the starting X coordinate.

The code to override the onlayout method is as follows:

5、 Next, you can draw broken lines, small dots on the x-axis and expressions on broken lines

The code is as follows:

The above code first traverses X_ Coords and X_ coord_ The two list sets of values are used to draw coordinate points, polylines and expressions. When sliding to the left, coordinate points and polylines may be drawn to the left of the y-axis, so they need to be intercepted. The getyvalue and getybitmap methods can be used through X_ coord_ The value of values calculates the Y coordinate and the corresponding expression. Two methods, such as:

6、 After drawing the coordinate points, polylines and expressions, you can draw the X-Y axis. As long as the origin coordinates of the X-Y axis are determined, it is very simple. The code is as follows:

7、 Finally, you can draw the coordinate small origin on the Y axis and the text on the Y axis:

8、 After writing the above three methods: you can draw by overriding the OnDraw method.

Nine, in order to carry out horizontal sliding, we need to rewrite the onTouchEvent method of the control. In sliding time, we can calculate the distance of finger slipping in real time to change the X coordinates of the first point, and then call invalidate (); You can refresh the control and redraw to achieve the sliding effect.

10、 Finally, add a method to set the data source and set X_ coords，x_ coord_ Values, the two List collection, calls invalidate () after the settings are completed, and controls the refresh.

summary

The above is all about the line chart effect of Android custom view. I hope it can be helpful for everyone to develop Android.