Flip through git---Customize view to achieve water level rise effect Waveprogressview

Reprint please indicate the source: Wang 亟亟 of Daniel Road P1 (nonsense part, technical content in P2)

Last week received a number of friends want to try to change the work of the resume, the responsible HR sister has been the phone bombing past, if interested in a small partner can see the http://blog.csdn.net/ddwhan0123/article/details/ 50756745 the bottom part, have the relevant position introduction, resume to QQ mailbox [email protected]

P2 This introduction is a (animation + ideas) pretty good progress to achieve the effect of

Effect:

How do I use?

Gradle

/build.gradle file

jitpack.iorepositories {    maven {        url "https://jitpack.io"    }}

/app/build.gradle file

compile ‘com.github.zeng1990java:WaveProgressView:1.0.5‘

Eclipse:

Copy the circle out of the place, the code content is not much

Let's take a look at the custom label (for initialization and setup)

<?xml version= "1.0" encoding= "Utf-8"?><resources>    <declare-styleable name="Waveprogressview">        <attr name="Wavecolor" format="Color"/>        <attr name="waveborderwidth" format="Dimension"/ >        <attr name="Waveborderradius" format="Dimension"/>        <attr name="waveamplitude" format="Dimension"/>        <attr name="Wavemax" format="integer"/>        <attr name="waveprogress" format="integer"/>    </declare-styleable></Resources>

is roughly set color ah, brush thickness ah, max Ah, progress value ah, external frame body line thickness and so on

So how do you use it?

<com. GitHub. Zeng1990java. Widgets. WaveprogressviewAndroid:id="@+id/wave_progress_view_2"Android:layout_width="120DP"android:layout_height="80DP"Android:layout_alignparentbottom="true"Android:layout_marginbottom="10DP"Android:layout_centerhorizontal="true"app:wavemax=" the"App:wavecolor="#3498db"App:waveamplitude="8DP"App:waveborderwidth="3DP"app:waveborderradius="2DP"/>

A reference to the line does not refer to the words have default values.

Roughly speaking about the implementation, here do not read the code first to obtain a large number of parameters, and then according to the length of the height and the thickness of the brush drawn outside the hollow box, and then the width of the calculation of Y changes to draw the effect of the water wave finally OnDraw in the picture I think 6 is the algorithm of the following method (OK, I dish)

The core path is drawn in the Updatepath () method

    Private void Updatepath() { This. Mpath.reset (); for(inti =0; i < mwavewidth; i++) {intx = i;inty = (int) Clamp (Mamplitude * Math.sin (i* mangularvelocity + mAngle * Math.PI)/180.0f) + (mwaveheight-mwaveprogressheight), Mhaftborderradius, Mwaveheight );if(i = =0) { This. Mpath.moveto (x, y); } This. mpath.quadto (x, y, x +1, y); } This. Mpath.lineto (Mwavewidth, mwaveheight); This. Mpath.lineto (0, mwaveheight); This. Mpath.close (); }

The others are some of the various set plus anim.

Again, how to use it in the activity.

First, get the control object first

   WaveProgressView waveProgressView = (WaveProgressView) findViewById(R.id.wave_progress_view);

Then make some simple settings, you can also set the color Ah, the progress value of what.

    waveProgressView.setMax(100);

In his official presentation, the author is an infinite loop of animations at different durations.

 private void Animwave (Waveprogressview waveprogressview, long duration) {Objectanimat or Progressanim = Objectanimator.ofint  (Waveprogressview, " progress ", 0 , Waveprogressview .getmax  ())  Progressanim.setduration  (duration)  Progressanim.setrepeatcount  (objectanimator ) ;  Progressanim.setrepeatmode  (objectanimator ) ;  Progressanim.start  ()  }

Overall, the use of almost no difficulty, if you want to write a similar control completely independent, or to Canvas paint and view of the drawing has a certain amount of good basis to do it.

Git address: Https://github.com/zeng1990java/WaveProgressView

Source: Https://github.com/zeng1990java/WaveProgressView/archive/master.zip

Flip through git---Customize view to achieve water level rise effect Waveprogressview