Android custom view to achieve ring waiting and related volume adjustment effect _android

Ring alternating, waiting effect

The effect on this, analyzed a bit, there are probably these attributes, two colors, a speed, the width of a ring.
Several steps to customize view:
1. Customize View Properties
2, in the view of the construction method to get our custom attributes
3. Rewrite onmesure
4. Rewrite OnDraw

1. Custom attributes:

<?xml version= "1.0" encoding= "Utf-8"?> 
<resources> 
 
  <attr name= "firstcolor" format= "Color" > 
  <attr name= "secondcolor" format= "color"/> <attr "name=" Circlewidth "format=" 
  dimension 
  <attr name= "Speed" format= "integer"/> <declare-styleable name= 
 
  "Customprogressbar" > 
    < attr name= "Firstcolor"/> 
    <attr name= "Secondcolor"/> <attr name= 
    "Circlewidth"/> 
    < attr name= "Speed"/> 
  </declare-styleable> 
 
</resources> 

2, in the view of the construction method to get our custom attributes

/** * The color of the first lap * * private int mfirstcolor; 
  /** * The color of the second lap * * private int msecondcolor; 
  /** * The width of the ring * * * private int mcirclewidth; 
  /** * Brush/private Paint mpaint; 
 
  /** * Current Progress * * private int mprogress; 
 
  /** * Speed * * private int mspeed; 
 
  /** * Should start the next */private Boolean isnext = false; 
  Public Customprogressbar (context, AttributeSet attrs) {This (context, attrs, 0); 
  The public Customprogressbar {This (context, NULL); /** * Necessary initialization, get some custom value * * @param context * @param attrs * @param defstyle * * * * * * * * * * * * * * * * * * * * Cus 
    Tomprogressbar (context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle); 
    TypedArray a = Context.gettheme (). Obtainstyledattributes (Attrs, R.styleable.customprogressbar, Defstyle, 0); 
 
    int n = a.getindexcount (); for (int i = 0; i < n; i++) {int atTR = A.getindex (i); Switch (attr) {Case r.styleable.customprogressbar_firstcolor:mfirstcolor = A.getcolor (attr, Color . 
        GREEN); 
      Break 
        Case R.styleable.customprogressbar_secondcolor:msecondcolor = A.getcolor (attr, color.red); 
      Break Case r.styleable.customprogressbar_circlewidth:mcirclewidth = A.getdimensionpixelsize (attr, (int) TypedValue.app 
        Lydimension (TYPEDVALUE.COMPLEX_UNIT_PX, Getresources (). Getdisplaymetrics ()); 
      Break 
      Case r.styleable.customprogressbar_speed:mspeed = A.getint (attr, 20);//default break; 
    } a.recycle (); 
    Mpaint = new Paint (); Drawing thread New Thread () {public void run () {while (true) {mprogress++ 
          ; 
            if (mprogress = = 360) {mprogress = 0; 
            if (!isnext) Isnext = true; 
            Else  Isnext = false; 
          } postinvalidate (); 
          try {thread.sleep (mspeed); 
          catch (Interruptedexception e) {e.printstacktrace (); 
    } 
        } 
      }; 
 
  }.start (); 

 }

3, rewrite OnDraw directly, this does not need to override onmeasure

 @Override protected void OnDraw (Canvas Canvas) {int centre = getwidth ()/2;//Get The x coordinate int radius = centre-mcirclewidth/2;//radius mpaint.setstrokewidth (mcirclewidth); Sets the width of the ring Mpaint.setantialias (true); Anti-aliasing Mpaint.setstyle (Paint.Style.STROKE); Set the hollow RECTF oval = new RECTF (Centre-radius, Centre-radius, centre + RADIUS, centre + radius); The bounds of the shape and size of the arc used for definition if (!isnext) {//The first color circle complete, the second color runs Mpaint.setcolor (mfirstcolor);//Set the color of the ring Canva S.drawcircle (Centre, centre, Radius, mpaint); Draw the Ring Mpaint.setcolor (Msecondcolor); Sets the color of the ring Canvas.drawarc (Oval, -90, mprogress, False, Mpaint); Draw Arc} else {Mpaint.setcolor (Msecondcolor) according to progress;//Set the color of the ring Canvas.drawcircle (centre, Centre, RA Dius, Mpaint); Draw the Ring Mpaint.setcolor (Mfirstcolor); Sets the color of the ring Canvas.drawarc (Oval, -90, mprogress, False, Mpaint); Draw an arc on progress}} 

The achievement is complete, of course, the only more tangled place is two color when switch, how to switch, I use the above method, you can also think how to achieve.

Video Volume Control

Such an effect is implemented using a custom view that is similar to the idea of a circle, so let's look at it together:
1, first the required attributes, two small pieces of color, a picture of the middle, gap size, a number of blocks. Finish analysis, start writing Attr.xml

<?xml version= "1.0" encoding= "Utf-8"?> 
<resources> 
 
  <attr name= "firstcolor" format= "Color" > 
  <attr name= "secondcolor" format= "color"/> <attr "name=" Circlewidth "format=" 
  dimension 
  <attr name= "Dotcount" format= "integer"/> <attr name= 
  "splitsize" format= "integer"/> 
  < attr name= "BG" format= "reference" ></attr> 
 
  <declare-styleable name= "Customvolumcontrolbar" > 
    <attr name= "Firstcolor"/> <attr name= "Secondcolor" 
    /> <attr 
    "Name=" circlewidth 
    <attr name= "Dotcount"/> 
    <attr name= "splitsize"/> <attr name= 
    "bg"/> 
  </ Declare-styleable> 
 
</resources> 

2. Get these properties in construction:

/** * The color of the first lap * * private int mfirstcolor; 
  /** * The color of the second lap * * private int msecondcolor; 
  /** * The width of the ring * * * private int mcirclewidth; 
  /** * Brush/private Paint mpaint; 
 
  /** * Current progress/private int mcurrentcount = 3; 
  /** * In the middle of the picture * * Private Bitmap mimage; 
  /** * The gap between each block * * private int msplitsize; 
 
  /** * Number/private int mcount; 
 
  Private Rect Mrect; 
  Public Customvolumcontrolbar (context, AttributeSet attrs) {This (context, attrs, 0); 
  The public Customvolumcontrolbar {This (context, NULL); /** * Necessary initialization, get some custom value * * @param context * @param attrs * @param defstyle * * * * * * * * * * * * * * * * * * * * Cus 
    Tomvolumcontrolbar (context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle); TypedArray a = Context.gettheme (). Obtainstyledattributes (Attrs, R.styleable.customvolumcontrolbar, DefStyle, 0); 
 
    int n = a.getindexcount (); 
      for (int i = 0; i < n; i++) {int attr = A.getindex (i); Switch (attr) {Case r.styleable.customvolumcontrolbar_firstcolor:mfirstcolor = A.getcolor (attr, C Olor. 
        GREEN); 
      Break 
        Case R.styleable.customvolumcontrolbar_secondcolor:msecondcolor = A.getcolor (attr, Color.cyan); 
      Break Case r.styleable.customvolumcontrolbar_bg:mimage = Bitmapfactory.decoderesource (Getresources (), A.getResourceId ( 
        attr, 0)); 
      Break Case r.styleable.customvolumcontrolbar_circlewidth:mcirclewidth = A.getdimensionpixelsize (attr, (int) TypedValue 
        . Applydimension (Typedvalue.complex_unit_px, Getresources (). Getdisplaymetrics ()); 
      Break 
      Case r.styleable.customvolumcontrolbar_dotcount:mcount = A.getint (attr, 20);//default break; Case r.styleable.customvolumcontrolbar_splitsize:msplitsize = a.geTInt (attr, 20); 
      Break 
    } a.recycle (); 
    Mpaint = new Paint (); 
  Mrect = new Rect (); 

 }

3, overriding OnDraw

@Override protected void OnDraw (Canvas Canvas) {Mpaint.setantialias (true);//Anti-aliasing Mpaint.setstrokewidth (Mcirclewidth); Set the width of the ring mpaint.setstrokecap (Paint.Cap.ROUND); Define segment power off shape is round head mpaint.setantialias (TRUE); Anti-aliasing Mpaint.setstyle (Paint.Style.STROKE); Set Hollow int centre = getwidth ()/2;  Gets the x coordinate int radius = centre-mcirclewidth/2;//radius of the center circle/** * Draw blocks to * * DrawOval (canvas, centre, 
 
    RADIUS); /** * Calculates the position of the inner tangent square/int relradius = radius-mcirclewidth/2;//obtains the radius of the inner circle/** * The distance from the inner tangent square = MC Irclewidth + Relradius-√2/2 * * mrect.left = (int) (RELRADIUS-MATH.SQRT (2) * 1.0F/2 * Relradius) + MCIRC 
    Lewidth; /** * Cut square distance to the left = Mcirclewidth + Relradius-√2/2/mrect.top = (int) (RELRADIUS-MATH.SQRT (2) * 1.0 
    F/2 * Relradius) + mcirclewidth; 
    Mrect.bottom = (int) (Mrect.left + math.sqrt (2) * Relradius); Mrect.right = (int) (Mrect.left + math.sqrt(2) * Relradius); /** * If the picture is relatively small, then put the picture according to the size of the center/if (Mimage.getwidth () < MATH.SQRT (2) * Relradius) {Mrect 
      . left = (int) (Mrect.left + math.sqrt (2) * Relradius * 1.0F/2-mimage.getwidth () * 1.0F/2); 
      Mrect.top = (int) (Mrect.top + math.sqrt (2) * Relradius * 1.0F/2-mimage.getheight () * 1.0F/2); 
      Mrect.right = (int) (Mrect.left + mimage.getwidth ()); 
 
    Mrect.bottom = (int) (Mrect.top + mimage.getheight ()); 
  }//Drawing canvas.drawbitmap (Mimage, NULL, Mrect, mpaint); /** * Draw each small block * * @param canvas * @param centre * @param radius/private void Drawo by parameter Val (Canvas Canvas, int centre, int radius) {/** * Calculates the proportions of each block according to the number of needs drawn and the gap *360/float itemsize 
 
    = (360 * 1.0f-mcount * msplitsize)/mcount; RECTF Oval = new RECTF (Centre-radius, Centre-radius, centre + RADIUS, centre + radius); The Boundary Mpaint.setcolor (Mfirstcolor) for defining the shape and size of the arc; // Sets the color for the ring for (int i = 0; i < Mcount i++) {Canvas.drawarc (oval, I * (ItemSize + msplitsize), itemsize , false, Mpaint); Draw arc} mpaint.setcolor (Msecondcolor) according to the progress;  Sets the color for the ring for (int i = 0; i < Mcurrentcount i++) {Canvas.drawarc (oval, I * (ItemSize + msplitsize), ItemSize, False, Mpaint); 

 Draw Arc} According to progress

Here you need to be aware of:
Draw BLOCK: First, according to the number of blocks and clearance calculation, each block accounted for the proportion.
Drawing: When the figure is larger, direct use of the ring within the size of the cut square to constrain, when the picture is compared to the hour, in the position of the center to draw. Some mathematical operations, the landlord in the draft for a while, not complicated, everyone draw their own, I will not paste a draft.

4. Add Touch Monitor:

/** 
   * Current number +1 
   * 
  /public void up () 
  { 
    mcurrentcount++; 
    Postinvalidate (); 
  } 
 
  /** 
   * Current Quantity-1 
   * 
  /public void Down () 
  { 
    mcurrentcount--; 
    Postinvalidate (); 
  } 
 
  private int Xdown, xup; 
 
  @Override Public 
  Boolean ontouchevent (Motionevent event) 
  { 
 
    switch (event.getaction ()) 
    { 
    Case Motionevent.action_down: 
      xdown = (int) event.gety (); 
      break; 
 
    Case MOTIONEVENT.ACTION_UP: 
      xup = (int) event.gety (); 
      if (Xup > Xdown)//slipping 
      {down 
        (); 
      } else 
      {up 
        (); 
      } 
      break; 
 
    return true; 
  } 

Touch monitoring is also very simple ah, basically can be achieved, we can add a minimum distance acceleration or something, all right.

Finally, the effect chart: