Android custom view implementation polygon statistical chart example code

preface

    I recently learned some knowledge about user-defined view in my spare time. In order to consolidate, I wrote a little thing and shared it. I won't say much below. Let's take a look at the detailed introduction together.

brief introduction

  a polygon statistical chart. The number of edges, the value of each direction, the text of each point, and so on can be set.

Let's analyze this custom view

This view consists of the following parts

Let's explain it step by step

draw a polygon

  path is mainly used to draw polygons. The specific idea is to calculate the position of each point, connect it with the lineto method of path, and then draw.

  my method is to calculate the maximum radius first (it will be used later, and it is recommended to store it separately), then calculate the radius of each layer according to the number of layers, and calculate the position of each vertex of each layer by using cos function and sin function.

Calculate the maximum radius and save the vertices

   note: COS and sin are calculated in radian system and should be converted.

    here's an explanation of what to subtract 90 degrees for currentangle

    according to the Android coordinate system, if you do not subtract 90 degrees and multiply cos directly, the first vertex will default to the right of the center, while the general cognition is that the first point is directly above, so subtract 90 degrees

Draw polygons according to scale and number of layers and edges

  the code is still very easy. If you don't understand it, you can calculate it yourself. It's easy to calculate the position of each point.

Draw line

   this is easy because the coordinates of the vertices have been saved before

Draw coverage area

  this principle is actually the same as drawing polygons, that is, the ratio of vertex coordinates multiplied has changed. The value of each direction is passed in by the user.

Draw text

  to be honest, there are no difficulties in the front, but there are many troubles in drawing text. The main reason is that the text is from left to right by default. The text on the top and first face is nothing. There will be problems with the text on the left and right. The text will be drawn on the polygon, which looks particularly uncomfortable. My solution here is to let the word rotate with the vertex position of the polygon as seen in the previous figure.

At this point, the whole component is drawn

Additional properties

If you just want to draw this component, it's not difficult. We can add something else to make it more practical.

Animation effect

  using the knowledge of attribute animation, we can make the filled area in the middle spread out slowly. The principle is also simple, that is, take 0 to 1 as an evolutionary proportion, multiply the values in all directions by this value, and draw an area smaller than the original coverage area.

Define XML attributes

  when we normally use system components, we will write a lot of XML to control the properties of our components. You can also try these for custom views

  first create the ATTS file under value

  then specify the attribute name and type you want

  then let ATTS contact our view. This is also simple. Carefully observe the parameters in the view construction method. There is such a thing as attributeset attrs

  it is the link between XML and view

This thing can't be forgotten

Quick use

  thank you for seeing here. If you want to use this component but don't want to write it yourself, welcome to visit

The project GitHub talks about how to add dependencies and import components

It would be a great honor if I could help you!!!

summary

The above is the whole content of this article. I hope the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.