Android draw a clock play _android

Source: Internet
Author: User
Tags abs cos sin

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.