Let's look at the final effect.
Start to implement
Create a new Clockview integrated view
public class Clockview extends View {
}
Rewrite the Onmeasure method first, here to say the view measurement mode, a total of three kinds:
1, exactly
That is, the exact value pattern, when we specify the Layout_width property or Layout_height property of the control as a specific value, such as android:layout_width= "100DP", or specify Math_ Parent property, the system uses the exactly mode.
2, At_most
The maximum mode, when the control's Layout_width property or Layout_height property is specified as Wrap_content, the size of the control typically changes as the control's child controls or content changes, and the control's dimensions are no more than the maximum size allowed by the parent control.
3, UNSPECIFIED
This property is odd-it does not specify its size measurement mode, how big the view is, and is usually used when drawing a custom view.
Because view's Onmeasure method only supports exactly mode, when Layout_width and Layout_height are wrap_content, view size is strange, as the following figure shows.
So let's rewrite the Onmeasure method to specify the minimum value for view width and height
/**
* When layout is wrap_content set the default height-to-width
* @param widthmeasurespec
* @param heightmeasurespec * * *
@Override
protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {
setmeasureddimension (measure ( WIDTHMEASURESPEC), Measure (Heightmeasurespec));
private int measure (int origin) {
int result = Default_min_width;
int specmode = Measurespec.getmode (origin);
int specsize = Measurespec.getsize (origin);
if (Specmode = = measurespec.exactly) {result
= specsize;
} else{
if (Specmode = = measurespec.at_most) {Result
= Math.min (result, specsize);
}
}
return result;
}
Here is the most important rewrite OnDraw method to draw the dial, scale, pointer ..., the approximate process is as follows
1. Draw a dial with drawcircle to draw a circle as the dial, the center coordinate is (getwidth ()/2, GetHeight ()/2), the radius is math.min (GetHeight ()/2, getwidth ()/2 )。
Draw Outer Circle
float borderwidth = default_border_width;
Paint paintcircle = new Paint ();
Paintcircle.setstyle (Paint.Style.STROKE);
Paintcircle.setantialias (true);
Paintcircle.setstrokewidth (borderwidth);
Canvas.drawcircle (GetWidth ()/2, GetHeight ()/2, Math.min (GetHeight ()/2, getwidth ()/2)-BORDERWIDTH/2, PAINTCIRCL e);
2, Draw tick marks , Here we can use a ' canvas.rotate ' method can not calculate the angle
Draw tick line
float degreelength = 0f;
Paint paintdegree = new Paint ();
Paintdegree.setantialias (true);
for (int i=0;i<60;i++) {
if (i% 5 = 0) {
paintdegree.setstrokewidth (6);
Degreelength = default_long_degree_length;
} else{
Paintdegree.setstrokewidth (3);
Degreelength = default_short_degree_length;
}
Canvas.drawline (GetWidth ()/2, Math.Abs (GetWidth ()/2-getheight ()/2), getwidth ()/2, Math.Abs (GetWidth ()/2-getheight ()/2) + degreelength, paintdegree);
Canvas.rotate (360/60, GetWidth ()/2, GetHeight ()/2);
3, draw the number on the scale
Tick number int degressnumbersize = 30;
Canvas.translate (GetWidth ()/2, GetHeight ()/2);
Paint paintdegreenumber = new Paint ();
Paintdegreenumber.settextalign (Paint.Align.CENTER);
Paintdegreenumber.settextsize (degressnumbersize);
Paintdegreenumber.setfakeboldtext (TRUE); for (int i=0;i<12;i++) {float[] temp = Calculatepoint ((i+1) *30, R-DEFAULT_LONG_DEGREE_LENGTH-DEGRESSNUMBERSIZE/2-
15);
Canvas.drawtext ((i+1) + "", temp[2], temp[3] + degressnumbersize/2-6, paintdegreenumber); /** * Coordinates the start and end points of a segment based on angle and length * @param angle * @param length * @return/private float[] calculatepoint (float angle,
Float length) {float[] points = new Float[4];
if (angle <= 90f) {Points[0] =-(float) Math.sin (angle*math.pi/180) * DEFAULT_POINT_BACK_LENGTH;
Points[1] = (float) math.cos (angle*math.pi/180) * DEFAULT_POINT_BACK_LENGTH;
POINTS[2] = (float) math.sin (angle*math.pi/180) * length;
POINTS[3] =-(float) math.cos (angle*math.pi/180) * length;
}else if (angle <= 180f) { Points[0] =-(float) Math.Cos ((angle-90) *math.pi/180) * DEFAULT_POINT_BACK_LENGTH;
POINTS[1] =-(float) Math.sin ((angle-90) *math.pi/180) * DEFAULT_POINT_BACK_LENGTH;
POINTS[2] = (float) math.cos ((angle-90) *math.pi/180) * length;
POINTS[3] = (float) math.sin ((angle-90) *math.pi/180) * length;
}else if (angle <= 270f) {points[0] = (float) math.sin ((angle-180) *math.pi/180) * DEFAULT_POINT_BACK_LENGTH;
POINTS[1] =-(float) Math.Cos ((angle-180) *math.pi/180) * DEFAULT_POINT_BACK_LENGTH;
POINTS[2] =-(float) Math.sin ((angle-180) *math.pi/180) * length;
POINTS[3] = (float) math.cos ((angle-180) *math.pi/180) * length;
}else if (angle <= 360f) {points[0] = (float) math.cos ((angle-270) *math.pi/180) * DEFAULT_POINT_BACK_LENGTH;
Points[1] = (float) math.sin ((angle-270) *math.pi/180) * DEFAULT_POINT_BACK_LENGTH;
POINTS[2] =-(float) Math.Cos ((angle-270) *math.pi/180) * length;
POINTS[3] =-(float) Math.sin ((angle-270) *math.pi/180) * length; RetUrn points;
}
4, Draw pointer
//Draw pointer Paint painthour = new Paint (); Painthour.setantialias (true); Painthour.setstrokew
Idth (15);
Paint Paintminute = new Paint ();
Paintminute.setantialias (TRUE);
Paintminute.setstrokewidth (10);
Paint Paintsecond = new Paint ();
Paintsecond.setantialias (TRUE);
Paintsecond.setstrokewidth (5);
Calendar now = Calendar.getinstance ();
float[] hourpoints = Calculatepoint (Now.get (calendar.hour_of_day)%12/12f*360, hourpointerlength);
Canvas.drawline (Hourpoints[0], hourpoints[1], hourpoints[2], hourpoints[3], painthour);
float[] minutepoints = Calculatepoint (Now.get (Calendar.minute)/60f*360, minutepointerlength);
Canvas.drawline (Minutepoints[0], minutepoints[1], minutepoints[2], minutepoints[3], paintminute);
float[] secondpoints = Calculatepoint (Now.get (Calendar.second)/60f*360, secondpointerlength);
Canvas.drawline (Secondpoints[0], secondpoints[1], secondpoints[2], secondpoints[3], paintsecond);
5, the center of the painting
Draw Center
Paint paintcenter = new Paint ();
Paintcenter.setcolor (color.white);
Canvas.drawcircle (0, 0, 2, paintcenter);
Finally, just start an infinite loop thread, and every 1 seconds the needle redraw the view to make the pointer move.
private Thread Timethread = new Thread () {
@Override public
Void Run () {
try {while
(true) {
updatehandler.sendemptymessage (0);
Thread.Sleep (1000);
}
catch (Interruptedexception e) {
e.printstacktrace ();}}}
;
Private Handler Updatehandler = new Handler () {
@Override public
void Handlemessage (msg) {
Invalidate ();
}
;
The above is to teach you how to use Android to draw a clock on the detailed steps of the code, I hope to learn about Android software programming help.