Android Ball Water Percent control code _android

This article is mainly about the percentage of a spherical water wave control, the market has a variety of different percentages of controls, I have always felt that the water wave is the most dazzling, the UI gave me this opportunity, but the internet search a lot, not too complex, too much code (anyway, I am not able to effect), is flawed, so have to write their own, Here open source out, convenient for everyone. If you have any questions or suggestions, please leave a message.

First look at the effect, where the dynamic map is not easy to intercept, put a static

For the water wave percent control implementation method has the following several

• -Draw the bitmap of the water wave shape, and use the attribute animation to translate
• -Using curves to accurately draw target water waves
• -Use large scale curves to intersect with containers
  

The first kind of annoying, online with this kind of thinking to achieve, the amount of code is relatively large. Bitmap move to pay attention to a lot of problems, carelessly on a pile of bugs. The second type of code is small, but requires geometry. It's humiliating to say that I've had a long time. To calculate the formula (age, forgotten), but this method of calculation is large, the point of traversal when drawing less. The third method, with very little code and almost no computation, traverses the point twice times more than the second method. Taking into account the traversal of the consumption and computational complexity, select the third type.

Here we choose the sine and the circle to do the intersection.

 for (int i = left; i < length; i++) {
        int x = i;
        int y = (int) (Math.sin (Math.toradians (x + Mtranx)/2) * MRADIUS/4);
        Path2.lineto (x, MH + y);
      }

Sin function, x horizontal axis, y ordinate, mtranx each offset, waveform fluctuation MRADIUS/4,

Core code

Use the path of the circle to intersect the curve we drew before

Path PC = new Path ();
      Pc.addcircle (Mcentrepoint.x, Mcentrepoint.y, Mradius, Path.Direction.CCW);
      Canvas.clippath (PC, Region.Op.INTERSECT);
      Canvas.drawpath (path2, mwavepaint);
      Canvas.restore ();

Water level rise and wave fluctuation

while (Isdraw) {
        if (Mwaterlevel > Mnowheight) {
          mnowheight = mnowheight + mupspeed;
        }
        if (mstart) {
          if (Mtranx > Mradius) {
            Mtranx = 0;
          }
          Mtranx = mtranx-mwavespeed;
        }
        Drawui ();
      }

Here because the animation effect is more exquisite, the update UI interface is more ordinary, so we use Surfaceview to realize (with view to realize that there are cotton, affect the experience)

Complete code

Reference in a Waveview class direct layout

The notes should be more clearly written. If you have any questions, you can leave a message.

Package com.aibaide.test;
Import Android.content.Context;
Import Android.graphics.Canvas;
Import Android.graphics.Color;
Import Android.graphics.Paint;
Import Android.graphics.Path;
Import Android.graphics.PixelFormat;
Import Android.graphics.Point;
Import android.graphics.Region;
Import Android.util.AttributeSet;
Import Android.view.SurfaceHolder;

Import Android.view.SurfaceView; /** * Gengqiquan * June 2, 2016 16:16:48 * Water wave display percent control */public class Waveview extends Surfaceview implements Surfaceholder .
  Callback {point mcentrepoint;
  int mnowheight = 0;//current water level int Mradius = 0;
  Boolean mstart = false;//whether to start float mtextsise = 60;//text size context Mcontext;
  int Mtranx = 0;//Wave Translational Volume private Paint mcirclepaint;
  Private Paint Moutcirclepaint;
  Private Paint Mwavepaint;
  Private Paint Mtextpaint;
  Private Surfaceholder holder;
  Private Renderthread Renderthread; Private Boolean Isdraw = false;//control drawn switch private int mcirclecolor = Color.parsecolor ("#ff6600");/background inner circle color private int moutcirclecolor = Color.parsecolor ("#f5e6dc");/background outer circle color private int mwavecolor = Color.parsecolor ("#ff944d");
  Wave color private int mwaterlevel;//water target height private int flownum = 60;//Water target% Here is the whole number. private int mwavespeed = 5;//wave fluctuation speed private int mupspeed = 2;//surface rise Speed/** * @param context */public Waveview (Context context)
    {Super (context);
    TODO auto-generated constructor stub mcontext = context;
  Init (Mcontext); /** * @param context * @param attrs/Public Waveview (context, AttributeSet attrs) {Super (CO
    ntext, attrs);
    TODO auto-generated constructor stub mcontext = context;
  Init (Mcontext); /** * @param context * @param attrs * @param defstyleattr/Public Waveview
    Set attrs, int defstyleattr) {Super (context, attrs, defstyleattr);
    TODO auto-generated constructor stub mcontext = context;
  Init (Mcontext); } private void Init (ContexT context) {Mcontext = context;
    Setzorderontop (TRUE);
    Holder = This.getholder ();
    Holder.addcallback (this);
    Holder.setformat (pixelformat.translucent);

    Renderthread = new Renderthread ();
    Mcirclepaint = new Paint ();
    Mcirclepaint.setcolor (Mcirclecolor);
    Mcirclepaint.setstyle (Paint.Style.FILL);

    Mcirclepaint.setantialias (TRUE);
    Moutcirclepaint = new Paint ();
    Moutcirclepaint.setcolor (Moutcirclecolor);
    Moutcirclepaint.setstyle (Paint.Style.FILL);

    Moutcirclepaint.setantialias (TRUE);
    Mwavepaint = new Paint ();
    Mwavepaint.setstrokewidth (1.0F);
    Mwavepaint.setcolor (Mwavecolor);
    Mwavepaint.setstyle (Paint.Style.FILL);

    Mwavepaint.setantialias (TRUE);
    Mtextpaint = new Paint ();
    Mtextpaint.setstrokewidth (1.0F);
    Mtextpaint.setcolor (Color.White);
    Mtextpaint.settextsize (mtextsise);
    Mtextpaint.settextalign (Paint.Align.CENTER);
    Mtextpaint.setstyle (Paint.Style.FILL);


  Mtextpaint.setantialias (TRUE);


}  @Override public void surfacechanged (surfaceholder holder, int format, int width, int height) {Mradius = (int) (0
    .5 * Width * 0.92);
    Mcentrepoint = new Point (WIDTH/2, HEIGHT/2); Mwaterlevel = (int) (2 * Mradius * flownum/100f)//calculated target water level} @Override public void surfacecreated (Surfaceholder
    Holder) {Isdraw = true;

  if (renderthread!= null &&!renderthread.isalive ()) Renderthread.start ();

  @Override public void surfacedestroyed (Surfaceholder holder) {Isdraw = false;
    /** * Draw the interface thread * * @author Administrator/Private class Renderthread extends thread {@Override  public void Run () {//drawing interface, which is asynchronous drawing, does not use external notification to open the drawing, the water wave will start to grow according to the data update while (Isdraw) {if mwaterlevel
        > mnowheight) {mnowheight = Mnowheight + mupspeed;
          } if (Mstart) {if (Mtranx > Mradius) {mtranx = 0;
      } Mtranx = Mtranx-mwavespeed;  } Drawui ();
    } super.run ();
    }/** * Interface drawing/public void Drawui () {Canvas Canvas = Holder.lockcanvas ();
    try {Drawcanvas (canvas);
    catch (Exception e) {e.printstacktrace ();
    finally {if (canvas!= null) holder.unlockcanvasandpost (canvas); } private void Drawcanvas (Canvas Canvas) {//Draw background Circle Canvas.drawcircle (Mcentrepoint.x, Mcentrepoint.y, Mradiu
    S/0.92F, Moutcirclepaint);
    Canvas.drawcircle (Mcentrepoint.x, Mcentrepoint.y, Mradius, Mcirclepaint);
      if (Mstart) {//the path of the sine curve int mH = Mcentrepoint.y + mradius-mnowheight;
      int left =-MRADIUS/2;
      int length = 4 * Mradius;
      Path path2 = new Path ();

      Path2.moveto (left, MH);
        for (int i = left; i < length; i++) {int x = i;
        int y = (int) (Math.sin (Math.toradians (x + Mtranx)/2) * MRADIUS/4);
      Path2.lineto (x, MH + y);
      } path2.lineto (length, MH); PAth2.lineto (length, Mcentrepoint.y + Mradius);
      Path2.lineto (0, Mcentrepoint.y + mradius);

      Path2.lineto (0, MH);
      Canvas.save ();
      This intersection with the circle, remove the sine curve of the more-painted part of the path PC = new Path ();
      Pc.addcircle (Mcentrepoint.x, Mcentrepoint.y, Mradius, Path.Direction.CCW);
      Canvas.clippath (PC, Region.Op.INTERSECT);
      Canvas.drawpath (path2, mwavepaint);
      Canvas.restore ();
    Draw Text Canvas.drawtext (Flownum + "%", Mcentrepoint.x, Mcentrepoint.y, Mtextpaint);
    } public void setflownum (int num) {flownum = num;
  Mstart = true;
    public void Settextsise (float s) {mtextsise = s;
  Mtextpaint.settextsize (s);
  //Set the wave fluctuation speed public void setwavespeed (int speed) {mwavespeed = speed;
  //Set water surface rise speed public void setupspeed (int speed) {mupspeed = speed;
    public void SetColor (int wavecolor, int circlecolor, int outcirclecolor) {mwavecolor = Wavecolor;
    Mcirclecolor = Circlecolor; Moutcirclecolor = OutcircLecolor;
    Mwavepaint.setcolor (Mwavecolor);
    Mcirclepaint.setcolor (Mcirclecolor);
  Moutcirclepaint.setcolor (Moutcirclecolor);
}//exact algorithm, each sinusoidal curve starts at the intersection of the curves and circles/private int GetX (double h) {//int x = 0;//int R = Mradius;//if (H < R) {
Double T = 2 * R * h-h * H;
x = (int) (R-math.abs (MATH.SQRT (t)));  else {//Double t =-2 * R * H + H * H;//x = (int) (R-math.abs (MATH.SQRT (t)));////Return
X

 //  }
}

Finally, the source code of this article: source download

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.