Android custom controls implement temperature rotation button effect _android

First look at the effect chart

Temperature Rotation button

Realize the idea

1. Initialize some of the parameters
2. Draw Dial Panel
3. Draw an arc under a dial
4. Draw title and temperature identification
5. Draw the Rotate button
6. Drawing temperature
7. Handling Sliding Events
8. Provides some interface methods
   

Implementation methods

Initialize some of the parameters

public class Tempcontrolview extends View {//control wide private int width;
 Control high private int height;
 Dial radius private int dialradius;
 Circular radius private int arcradius;
 Scale high private int scaleheight = DP2PX (10);
 Dial Brush private Paint dialpaint;
 ARC Brush Private Paint arcpaint;
 Title Brush private Paint Titlepaint;
 Temperature identification Brush private Paint tempflagpaint;
 Rotate button Brush private Paint buttonpaint;
 Temperature display Brush private Paint temppaint;
 Text hint private String title = "Maximum temperature setting";
 temperature private int temperature;
 Minimum temperature private int mintemp = 15;
 Maximum temperature private int maxtemp = 30;
 Sig (4.5 degrees per grid, 18 degrees) on behalf of the temperature of 1 degrees private int anglerate = 4;
 Button Picture Private Bitmap buttonimage = Bitmapfactory.decoderesource (Getresources (), r.mipmap.btn_rotate); Button Picture Shadow private Bitmap Buttonimageshadow = Bitmapfactory.decoderesource (Getresources (), R.mipmap.btn_rotate_shadow)
 ;
 Anti-aliasing private paintflagsdrawfilter paintflagsdrawfilter;

 Temperature change monitoring private ontempchangelistener ontempchangelistener;The following is the angle of the rotation button related//current button rotation private float rotateangle;

 Current angle private float currentangle; 
  @Override protected void onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, H, OLDW, OLDH);
  Control wide, high width = height = math.min (h, W);
  Dial radius Dialradius = WIDTH/2-dp2px (20);
 Arc radius Arcradius = dialradius-dp2px (20); }

 ...
}

Draw Dial Panel

Draws an unchecked and checked dial with the center of the screen as the canvas origin and the arc angle as 270°.

The 2° of the rotation method is the later adjustment of the income, do not care.

/** *
 Draw dial *
 *
 @param canvas canvas/
private void Drawscale (canvas canvas) {
 canvas.save ();
 Canvas.translate (GetWidth ()/2, GetHeight ()/2);
 Rotate counterclockwise 135-2 degrees
 canvas.rotate ( -133);
 Dialpaint.setcolor (Color.parsecolor ("#3CB7EA"));
 for (int i = 0; i < i++) {
  canvas.drawline (0,-dialradius, 0,-dialradius + scaleheight, dialpaint);
  Canvas.rotate (4.5f);
 }

 Canvas.rotate (m);
 Dialpaint.setcolor (Color.parsecolor ("#E37364"));
 for (int i = 0; i < (temperature-mintemp) * Anglerate i++) {
  canvas.drawline (0,-dialradius, 0,-dialradius + s) Caleheight, dialpaint);
  Canvas.rotate (4.5f);
 }
 Canvas.restore ();
}

Draw an arc under a dial

/**
 * Draw the arc under the dial
 *
 * @param canvas canvas
 /
private void DrawArc (canvas canvas) {
 canvas.save ();
 Canvas.translate (GetWidth ()/2, GetHeight ()/2);
 Canvas.rotate (135 + 2);
 RECTF RECTF = new RECTF (-arcradius,-arcradius, Arcradius, Arcradius);
 Canvas.drawarc (RECTF, 0, 265, false, arcpaint);
 Canvas.restore ();
}

Draw title and temperature identification

 /**
  * Draw title and temperature identification
  *
  * @param canvas canvas
  /
 private void DrawText (canvas canvas) {
  canvas.save (); c7/>//Draw title
  float titlewidth = titlepaint.measuretext (title);
  Canvas.drawtext (title, (width-titlewidth)/2, Dialradius * 2 + dp2px (), titlepaint);

  Draw minimum temperature mark
  //minimum temperature if less than 10, display as 0x
  String Mintempflag = mintemp < 10? "0" + mintemp:mintemp + "";
  float tempflagwidth = titlepaint.measuretext (Maxtemp + "");
  Canvas.rotate (WIDTH/2, HEIGHT/2);
  Canvas.drawtext (Mintempflag, (width-tempflagwidth)/2, Height + dp2px (5), tempflagpaint);

  Draw maximum temperature identification
  canvas.rotate ( -105, WIDTH/2, HEIGHT/2);
  Canvas.drawtext (Maxtemp + "", (Width-tempflagwidth)/2, Height + dp2px (5), tempflagpaint);
  Canvas.restore ();
 }

Draw the Rotate button

/**
 * Draw rotation button
 *
 * @param canvas canvas
/private void DrawButton (canvas canvas) {
 //button width high
 int Buttonwidth = Buttonimage.getwidth ();
 int buttonheight = Buttonimage.getheight ();
 Button shadow width high
 int buttonshadowwidth = Buttonimageshadow.getwidth ();
 int buttonshadowheight = Buttonimageshadow.getheight ();

 Draw button Shadow
 Canvas.drawbitmap (Buttonimageshadow, (width-buttonshadowwidth)/2,
   (height-buttonshadowheight )/2, buttonpaint);

 Matrix matrix = new Matrix ();
 Set button position
 matrix.settranslate (BUTTONWIDTH/2, BUTTONHEIGHT/2);
 Set Rotation angle
 matrix.prerotate (+ rotateangle);
 button position restore, at this point the button position in the upper left corner
 matrix.pretranslate (-BUTTONWIDTH/2,-BUTTONHEIGHT/2);
 Move the button to the center position
 matrix.posttranslate (width-buttonwidth)/2, (Height-buttonheight)/2);

 Set anti-aliasing
 canvas.setdrawfilter (paintflagsdrawfilter);
 Canvas.drawbitmap (Buttonimage, Matrix, buttonpaint);
}

Drawing temperature

/**
 * Drawing Temperature
 *
 * @param canvas canvas
/private void drawtemp (canvas canvas) {
 canvas.save ();
 Canvas.translate (GetWidth ()/2, GetHeight ()/2);

 float tempwidth = temppaint.measuretext (temperature + "");
 float Tempheight = (temppaint.ascent () + temppaint.descent ())/2;
 Canvas.drawtext (temperature + "°",-tempwidth/2-dp2px (5),-tempheight, temppaint);
 Canvas.restore ();
}

Handling Sliding Events

Private Boolean Isdown;

Private Boolean ismove;
   @Override public boolean ontouchevent (Motionevent event) {switch (event.getaction ()) {case Motionevent.action_down:
   Isdown = true;
   float Downx = Event.getx ();
   float DownY = event.gety ();
   Currentangle = Calcangle (Downx, DownY);

  Break
   Case MotionEvent.ACTION_MOVE:isMove = true;
   float Targetx;
   float targety;
   Downx = Targetx = Event.getx ();
   DownY = Targety = Event.gety ();

   float angle = Calcangle (Targetx, targety);

   Sliding angle increment float angleincreased = angle-currentangle;
   Prevent Cross-border if (angleincreased < -270) {angleincreased = angleincreased + 360;
   else if (angleincreased > 270) {angleincreased = angleIncreased-360;
   } increaseangle (angleincreased);
   Currentangle = angle;
   Invalidate ();

  Break Case MotionEvent.ACTION_CANCEL:case motionevent.action_up: {if (Isdown && ismove) {//correct pointer position Rotat Eangle = (float) (Temperature-mintemP) * Anglerate * 4.5);
    Invalidate ();
    The callback temperature changes the listening ontempchangelistener.change (temperature);
    Isdown = false;
   Ismove = false;
  } break;
} return true; /** * takes the center of the button as the coordinate dot, establishes the coordinate system, and targetx the angle between the coordinates (TARGETY) and the x axis * @param targetx x coordinate * @param targety y coordinate * @return (targetx
 , targety) coordinates with the x-axis angle/private float calcangle (float targetx, float targety) {float x = TARGETX-WIDTH/2;
 Float y = targety-height/2;

 Double Radian;
  if (x!= 0) {Float tan = math.abs (y/x);
   if (x > 0) {if (y >= 0) {radian = Math.atan (tan);
   else {radian = 2 * Math.pi-math.atan (TAN);
   } else {if (y >= 0) {radian = Math.pi-math.atan (tan);
   else {radian = Math.PI + Math.atan (tan);
  }} else {if (Y > 0) {radian = MATH.PI/2;
  else {radian =-MATH.PI/2;
} return (float) ((radian * 180)/Math.PI); /** * Increase Rotation angle * * @param angle Increased angle * * private void Increaseangle (float angle) {RotatEangle + = angle;
 if (Rotateangle < 0) {rotateangle = 0;
 else if (Rotateangle > 270) {rotateangle = 270;
} temperature = (int) (rotateangle/4.5)/anglerate + mintemp; }

Provides some interface methods

/**
 * Set temperature
 *
 * @param mintemp minimum temperature
 * @param maximum temperature *
 @param temp Set temperature/public
void SE ttemp (int mintemp, int maxtemp, int temp) {
 this.mintemp = mintemp;
 This.maxtemp = maxtemp;
 This.temperature = temp;
 This.anglerate =/(maxtemp-mintemp);
 Rotateangle = (float) ((temp-mintemp) * anglerate * 4.5);
 Invalidate ();
}

/**
 * Set temperature change monitor
 *
 * @param ontempchangelistener Monitor Interface * * Public
void Setontempchangelistener ( Ontempchangelistener ontempchangelistener) {
 this.ontempchangelistener = Ontempchangelistener;
}

/**
 * Temperature change monitor interface/public
interface Ontempchangelistener {
 /**
  * Callback Method
  *
  * @param Temp temperature
 /void change (int temp);
}

Summarize

This is the full content of this article, I hope the content of this article for your Android developers can help, if you have questions you can message exchange.