Android View custom Implementation Dynamic progress bar _android

Android Custom View implementation Dynamic progress bar

Effect Chart:

This is to see the Liangxiao demo, according to his thinking himself wrote a, but I wrote this seemingly computational still some problems, from the above figure can be seen, left, top, right side of the line will be cut off part, there is know hope to say, improve, the process is still a bit tortuous, But I still feel that the harvest is very much. For example, the animation to carry out the dynamic display (before doing is through the handler to update so now a thought is particularly good), as well as the beginning and end of the arc angle, the calculation of the rectangular area! On the drawing we can be step-by-step, such as first draw a circle, and then draw the surrounding lines, and finally set the animation part of it. Not much to say, on the code.

Code

customizing view

public class Colorprogressbar extends view{//below these two lines in this demo is useless, just a few days ago to see someone else's code to learn by a certain size, set the other size of the way, automatically ignore or learn it is also good//privat e int defaultstepindicatornum= (int) typedvalue.applydimension (typedvalue.complex_unit_dip,40,getresources ().
Getdisplaymetrics ());


  int mcircleradius=0.28f*defaultstepindicatornum;
  Layout of the wide-high private int mwidth;
  private int mheight;

  diameter private int mdiameter=500;
  The bottom circle brush private Paint MPAINTBG;
  Top-level round brush private Paint mpaintft;

  The brush around the line is private Paint mpaintline;
  The length of the outer line is private int mlongitem=dip2px (20);
  The spacing between lines and circles is private int mdistanceitem=dip2px (10);

  The maximum width of the progress bar (take the bottom progress bar and the top progress bar width largest) private int mprogresswidth;
  The color of the bottom circle is private int mbackcolor;
  Top-level round color private int mfrontcolor;
  The width of the bottom circle and the top circle is private float mbackwidth;
  private float mfrontwidth;
  Set progress private float currentvalue;
  Through the animation demo Progress Private Valueanimator animator;



  private int curvalue; Public Colorprogressbar {This (Context,null,0);
  Public Colorprogressbar (context, AttributeSet attrs) {This (context, attrs,0); Colorprogressbar (context, AttributeSet attrs, int defstyleattr) {Super (context, Attrs, defstyleat
    TR);
    TypedArray ta=context.obtainstyledattributes (Attrs, R.styleable.colorprogressbar);
    Mbackcolor= Ta.getcolor (R.styleable.colorprogressbar_back_color, Color.Black);
    Mfrontcolor=ta.getcolor (R.styleable.colorprogressbar_front_color,mbackcolor);
    Mbackwidth=ta.getdimension (r.styleable.colorprogressbar_back_width,dip2px (10));
    Mfrontwidth=ta.getdimension (r.styleable.colorprogressbar_front_width,dip2px (10)); Mprogresswidth=mbackwidth>mfrontwidth?
    (int) Mbackwidth: (int) mfrontwidth;
    Pay attention to releasing resources ta.recycle ();
  Init ();
    /** * are brush initialization/private void init () {mpaintbg=new Paint (paint.anti_alias_flag);
    Mpaintbg.setstrokewidth (Mprogresswidth);
    Mpaintbg.setcolor (Mbackcolor); Mpaintbg.setstrokecap (Paint.Cap.ROUND);

    Mpaintbg.setstyle (Paint.Style.STROKE);
    Mpaintft=new Paint (Paint.anti_alias_flag);
    Mpaintft.setcolor (Mfrontcolor);
    Mpaintft.setstyle (Paint.Style.STROKE);
    Mpaintft.setstrokewidth (Mfrontwidth);

    Mpaintft.setstrokecap (Paint.Cap.ROUND);
    Mpaintline=new Paint (Paint.anti_alias_flag);
    Mpaintline.setcolor (Color.Black);

  Mpaintline.setstrokewidth (5); @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onmeasure (widthmeasures
PEC, Heightmeasurespec); width = height = (long pointer + spacing of the pointer and disc + thickness + radius of the progress bar) *2 LOG.E ("Measurement data", "Longitem:" +mlongitem+ "Mdistanceitem:" +mdistanceitem+ "
    Mprogresswidth: "+mprogresswidth+" Mdiameter: "+MDIAMETER/2);"
    mwidth= (int) 2* (MLONGITEM+MDISTANCEITEM+MPROGRESSWIDTH*2+MDIAMETER/2);
    mheight= (int) 2* (MLONGITEM+MDISTANCEITEM+MPROGRESSWIDTH*2+MDIAMETER/2);
    LOG.E ("Custom View", "Height" +mheight+ "width" +mwidth);
  Setmeasureddimension (Mwidth,mheight); } @Override protected void OnDraw (Canvas Canvas) {sUper.ondraw (canvas); Draw the bottom arc, the concrete calculation of the rectangle see picture Canvas.drawarc (New RECTF (mprogresswidth/2+mdistanceitem+mlongitem,mprogresswidth/2+ mdistanceitem+mlongitem,mwidth-mprogresswidth/2-mdistanceitem-mlongitem,mheight-mprogresswidth/2-
Mdistanceitem-mlongitem), 0,360,TRUE,MPAINTBG);
    Sweepgradient gradient=new sweepgradient ();
    Draw Edge Line Canvas.save ();
    Canvas.rotate (144,MWIDTH/2,MHEIGHT/2);
      for (int i=0;i<=30;i++) {canvas.rotate ( -9,MWIDTH/2,MHEIGHT/2);
      if (i%5==0) {canvas.drawline (MWIDTH/2,5,MWIDTH/2,MLONGITEM,MPAINTBG);
      }else {canvas.drawline (mwidth/2,25,mwidth/2,mlongitem,mpaintline);
    } canvas.restore ();
    Sets the gradient sweepgradient sweepgradient=new sweepgradient (mwidth/2,mheight/2,color.red,color.yellow) to the brush;
    Mpaintft.setshader (sweepgradient); Draws the top arc, currentvalue the dynamic effect when it changes Canvas.drawarc (new RECTF (mprogresswidth/2+mdistanceitem+mlongitem,mprogresswidth /2+mdistanceitem+mlongitem,mwidth-mprogresswidth/2-mdistAnceitem-mlongitem,mheight-mprogresswidth/2-mdistanceitem-mlongitem), 135,CURRENTVALUE,FALSE,MPAINTFT);
    Mpaintft.settextsize (100);
    Mpaintft.settextalign (Paint.Align.CENTER);
    Draw Text Canvas.drawtext (String.Format ("%.0f", CurrentValue), MWIDTH/2,MHEIGHT/2+50,MPAINTFT);
  Invalidate ();
    /** * Set Animation * @param value */public void Setcurrentvalue (float value) {//Currentvalue=value;
    Animator=valueanimator.offloat (Currentvalue,value);
    Animator.setduration (3000);
    Animator.settarget (CurrentValue); Animator.addupdatelistener (New Valueanimator.animatorupdatelistener () {@Override public void Onanimationupdat
        E (Valueanimator valueanimator) {currentvalue= (float) valueanimator.getanimatedvalue ();
      CURVALUE=CURVALUE/10;
    }
    });

  Animator.start ();
    private int dip2px (float dip) {float density=getcontext (). Getresources (). Getdisplaymetrics (). density;
  return (int) (dip*density+0.5f); }
}

Rectangle calculation

Activity call

 @Override
  protected void onCreate (@Nullable Bundle savedinstancestate) {
    super.oncreate (savedinstancestate) ;
    Setcontentview (R.layout.colorprogressbar);
    mbtstart1= (Button) Findviewbyid (R.ID.BT1);

    bar1= (Colorprogressbar) Findviewbyid (R.ID.CP1);

    Mbtstart1.setonclicklistener (New View.onclicklistener () {
      @Override public
      void OnClick (view view) {
        Bar1.setcurrentvalue (270);
      }
    );

  

Custom properties

 <declare-styleable name= "Colorprogressbar" >
    <attr name= "back_color" format= "Color" ></attr>
    <attr name= "front_color" format= "color" ></attr>
    <attr name= "Back_width" Dimension "></attr>
    <attr name=" Front_width "format=" Dimension "></attr>
  </ Declare-styleable>

Layout

Note: You need to add one line of code to use a custom property (AS)

xmlns:app=http://schemas.android.com/apk/res-auto

Layout

<linearlayout
 xmlns:android= "http://schemas.android.com/apk/res/android"
  xmlns:app= "http:// Schemas.android.com/apk/res-auto "
    android:layout_width=" match_parent "
    android:layout_height=" Wrap_ Content "
    android:orientation=" vertical ">
    <button
      android:id=" @+id/bt1 "
      android:layout_ Width= "Wrap_content"
      android:layout_height= "wrap_content" android:text= "Start1
      "/>

    < Com.demo.demo.networkdemo.colorprogressbar.widget.ColorProgressBar
      android:id= "@+id/cp1"
      android: Layout_width= "232DP"
      android:layout_height= "match_parent"
      android:layout_gravity= "Center_horizontal"
      app:back_color= "@color/colorprimary"
      app:front_color= "@color/coloraccent"
      android:background= " @mipmap/ic_launcher "/>


  </LinearLayout>

Thank you for reading, I hope to help you, thank you for your support for this site!