Android creates its own time clock

1. Overview

This article mainly explains how to customize a time clock. Through simple exercises, you can simply learn some common drawing skills of customizing view in Android and optimize Android drawing operations. To get back to business, let's first look at the effects we need to achieve:

When we see this effect, we should have some ideas in our mind. We should decompose it into the following steps: 1. Instrument panel (circle) 2, scale line (long, medium and short) 3, scale value (1-12) 4, pointer (hour, minute and second) 5. Move the pointer and calculate the pointer position. Now we know our ideas very well, so let's do it one by one.

Step 1: 1. Customize the view attributes. First, create an attrs.xml under RES / values / to define our attributes and declare our entire style.

We define the radius of the clock, the background color, the color of the scale value (large, medium and small) and the color and width of the pointer (hour, minute and second).

Then customize a class class as clockview and reference it in the layout of mainactivity:

2. In the construction method of custom view, obtain our custom style

3. We rewrite OnDraw and onmesure to call the system provided:

Onmeere method

OnDraw method

The core code is these three methods:

First, let's talk about the first method:

This method is actually very simple. After setting our custom style for our brush, take the center as the center of the circle and draw a circle with the radius we set. Here, a solid paint.style.fill is set. You can also set a hollow. Let's see the effect of this method:

Second method:

This method code doesn't seem to have anything. It mainly divides a circle into 60 parts, because our clock has 60 scales, of which 4 large scales are set as 0, 15, 30 and 45. They correspond to 12:00, 3:00, 6:00 and 9:00 in the clock respectively. If you have any doubts in this place, you can see it by looking at your watch or clock, At the same time, there are also 8 medium scales, which are 5, 10, 20, 25, 35, 40, 50 and 55 respectively. In fact, they correspond to 1, 2, 4, 5, 7, 8, 10 and 11 points. It's mainly because you think it's so clear and beautiful. If you don't have OCD, you can directly set it to large scale. The others are small scales. Just set the brush paint according to the color and size set in attr. Let's see what our effect looks like:

The third method is to draw the pointer:

In fact, my notes on this method have been written in great detail. First, we need to obtain the current time. This is often written by everyone. There is no problem. The key is how to set the position of the hour, minute and second pointer. Here I use a very clever method to make drawing easier. First look at the drawing hour hand:

The first three lines of code will not be described in detail. The canvas.save method is used to save all the previously drawn pictures. Operate on a new layer for subsequent operations. And Photoshop have a little meaning. Everyone knows that when we get the current hour, should we directly point the hour hand to the corresponding hour? Definitely not. For example, it's 3:30, which refers to the position between 3 and 4, right. Therefore, we need to get the current minutes plus the hours to get the real current hours (the second hand also needs to be calculated here, but it is ignored here. If you are more OCD than me, you can add it). When we know the current actual hours, it's very simple, because we know that a circle of 360 degrees has an average of 12 hours. Don't tell me that I don't know. If you don't know this common sense, go to the wall, so as long as 360 / 12 * real hours is the angle of rotation. Isn't it easy to think so. After calculating the angle, rotate the angle to draw a straight line. Hahaha, is it so esey? The other minute hand and second hand are the same. I won't say much here. I can understand it directly by reading the code.

One of them drew a circle in the middle because of my obsessive-compulsive disorder. I think it's better to add a circle in the middle. After implementing this method, our effect is like this:

Ha ha, the last step is to make the pointer move. Yes, it is. In fact, we also care that when we draw the pointer, we directly obtain the current time and set the position of the pointer in the method. Therefore, as long as we make a timer and brush the UI in one second, we will be done. Here we will make a handler and send an empty message.

It has the following effect:

Is it simple? Attach GitHub: https://github.com/dalong982242260/CustomViewStudy

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.