Android custom view implements submitting active forms imitating GitHub

explain

This article may need some basic knowledge points, such as the basic use of canvas, paint, path, rect and other classes. It is suggested that unfamiliar students can learn gcssloop Android custom view tutorial directory, which will be very helpful.

The above figure is the submission form of GitHub. Visually, it can be drawn in several parts:

(1) The small square grid of each month, and the color changes from light to deep according to the submission times. (2) we can align the color mark at the bottom right right; (3) the week on the left, the original picture is drawn from Sunday to Saturday, and we draw from Monday to Sunday (4). We only draw the submission of the day from January to December (5), It consists of a small triangle and a rounded rectangle

Calculation problems to be solved:

(1) Generate all days of any year, including month, day, week, submission times, color block color, coordinates (1) all small square grid coordinates of the year (2) color mark coordinates at the lower right (3) week coordinates on the left (4) month coordinates above (5) click the pop-up prompt box and text coordinates

Generate all days of a year

The daily information needs to be encapsulated into a class, and the code is as follows:

To draw the table first, we need to calculate all the days. Here we calculate all the days of the year. We calculate from January 1 to December 31 of the current year. Because weeks are continuous, we need to provide the day of the week on January 1 of a year. For example, January 1, 2016 is week 5. The necessary parameters here are 2016 and week 5. Then we use a class to implement this method, The code is as follows:

The specific calculation logic can look at the code. It's not very difficult, so we can get all the days of a year.

Draw days grid

Because the view is relatively long, it needs to be displayed in a horizontal screen. For convenience, we will no longer measure and calculate the view, nor do we customize the attributes, but only focus on its core logic.

First, we need to define the required member variables:

These extracted variables increase slowly. You can write them first when you don't think about them completely during customization, and extract them when you use some variables. Then we initialize the data:

Let's take 2016 as an example. Mdays is to obtain the collection of all days in 2016 (parameters can be extracted as user-defined attributes), and the related paint has been initialized. Next, you need to draw in the OnDraw method. First draw all squares and month marks:

Here, we mainly pay attention to the change of the number of downlink series and the calculation of month coordinates. The grid is drawn.

Draw week text

Let's draw the week text on the left:

Draw color depth flag

Then draw the color depth mark at the bottom right according to the height of the table:

In this way, the whole table body is drawn.

Handle click events

Next, you need to process the click event and judge the click coordinates. If they are in the box, the text box for the will pop up. First process the click event:

Judge whether it is in the grid:

Draw pop-up text box

Then look at the drawing of the pop-up text box:

In this way, the main logic is completed, but the method of setting the submission times of a day needs to be opened:

Well, all logic is completed, mainly involving some calculations. The complete code is as follows:

Make a layout test like this:

Get some data at random:

effect

GIF is not recorded well. Look at the picture effect:

View source code

The above is the Android custom view introduced by Xiaobian to you, which realizes the submission active form imitating GitHub. I hope it will be helpful to you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!