Android Custom View (vi)------High imitation Glory 3 C Circular Scale scale chart (Showpercentview)

Why write this article:

Show the current proportion of capacity, performance of the current planned progress, generally will adopt a percentage of the way, and graphic display, with its intuitive and pleasing appearance of the aesthetic form for our choice of course.

In the method of drawing the percentage, we can draw round round progress bar Method <<android Custom View (ii)------Simple progress bar display sample >> also useful for drawing curved progress bars << Android Custom View (iii)------Video volume Control Sample >> Today we see an interface for  Glory 3 C:

Personally think that the scale of the circular scale circle has a small fresh feeling, also feel not difficult, so he realized:

：

Detail code: (1) defining attributes (Res/values/attr.xml)

<?xml version= "1.0" encoding= "Utf-8"?><resources> <declare-styleable      name= "Showpercentview" >        <attr name= "percent" format= "integer" ></attr>        <attr name= "alllinecolor" format= "Color" />          <attr name= "percentlinecolorlow" format= "color"/> <attr          name= "percentlinecolorhight" format = "Color"/>     </declare-styleable></resources>

(2) Custom Circular Scale scale drawing (Showpercentview)

Import Android.content.context;import Android.content.res.typedarray;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.util.attributeset;import Android.view.View; public class Showpercentview extends view{private paint percentpaint;private paint textpaint;private int textSize = 30;pri vate int percent;private int alllinecolor;private int percentlinecolorlow;private int percentlinecolorhight;private int alllinewidth = 2;private int percentlinewidth = 4;private int lineheight = 10;public Showpercentview (context context) {s  Uper (context);  init (null, 0);          } public Showpercentview (context context, AttributeSet Attrs) {Super (context, attrs);      Init (attrs, 0); } public Showpercentview (context context, AttributeSet attrs, int defstyle) {Super (context, Attrs, defsty          Le);      Init (attrs, Defstyle); } private void Init (AttributeSet attrs, int defstyle) {//TODO auto-generated method StubfinAl TypedArray a = GetContext (). Obtainstyledattributes (Attrs, R.styleable.showpercentview, Defstyle, 0); Percent = A.getint (r.styleable.showpercentview_percent, 0); Alllinecolor = A.getcolor (r.styleable.showpercentview_  Alllinecolor, Color.gray); Percentlinecolorlow = A.getcolor (R.styleable.showpercentview_percentlinecolorlow, Color.GREEN);        Percentlinecolorhight = A.getcolor (R.styleable.showpercentview_percentlinecolorhight, Color.RED);                  A.recycle ();        Percentpaint = new Paint ();                                Percentpaint.setantialias (TRUE);          Textpaint = new Paint ();          Textpaint.settextsize (textSize); Textpaint.setantialias (TRUE); } @Overrideprotected void OnDraw (canvas canvas) {//TODO auto-generated method Stubsuper.ondraw (canvas); int width = Getmea          Suredwidth ();          int height = getmeasuredheight ();          int pointx = WIDTH/2; int pointy = HEIGHT/2;   float textWidth = textpaint.measuretext (Percent + "%");       If (Percent <) {//textpaint.setcolor (oxbf3800);          Textpaint.setcolor (Color.Black);              }else{//textpaint.setcolor (New Color (ox6ec705));          Textpaint.setcolor (color.red);                  } canvas.drawtext (percent+ "%", Pointx-textwidth/2,pointy + textpaint.gettextsize ()/2, textpaint);        Percentpaint.setcolor (Alllinecolor);                  Percentpaint.setstrokewidth (Alllinewidth);            float degrees = (float) (320.0/100);    Canvas.save ();     Canvas.translate (0,pointy);          Canvas.rotate ( -70, Pointx, 0);        for (int i = 0;i<100;i++) {canvas.drawline (0, 0, lineheight, 0, Percentpaint);                     Canvas.rotate (degrees, pointx, 0);         } canvas.restore ();        if (percent<60) {percentpaint.setcolor (percentlinecolorlow);        }else{Percentpaint.setcolor (percentlinecolorhight); } percentpaint.setstrokewidth (PerceNtlinewidth);    Canvas.save ();     Canvas.translate (0,pointy);          Canvas.rotate ( -70, Pointx, 0);        for (int i = 0;i<percent;i++) {canvas.drawline (0, 0, lineheight, 0, Percentpaint);                     Canvas.rotate (degrees, pointx, 0); } canvas.restore (); } @Overrideprotected void Onmeasure (int widthmeasurespec, int heightmeasurespec) {//TODO auto-generated method stub//         Super.onmeasure (Widthmeasurespec, Heightmeasurespec);          int width = measurespec.getsize (widthmeasurespec);          int height = measurespec.getsize (heightmeasurespec); int d = (width >= height)?          Height:width;  Setmeasureddimension (D,D); }public void setpercent (int percent) {//TODO auto-generated Method stubthis.percent = Percent;postinvalidate ();}}

(3) Activity_main.xml

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http// Schemas.android.com/tools "xmlns:app=" Http://schemas.android.com/apk/res-auto "android:layout_width=" Match_ Parent "android:layout_height=" match_parent "android:paddingbottom=" @dimen/activity_vertical_margin "Android:padd ingleft= "@dimen/activity_horizontal_margin" android:paddingright= "@dimen/activity_horizontal_margin" Android: paddingtop= "@dimen/activity_vertical_margin" tools:context= ". Mainactivity "> <com.example.showpercentview.showpercentview android:layout_width=" 200DP "Andro id:layout_height= "200DP" android:id= "@+id/myshowpercentview" android:background= "#fdda6f" app:p Ercent= "app:alllinecolor=" #ebebeb "app:percentlinecolorlow=" #8acb55 "app:percentlinecolorhight=" # 8acb55 "/> <button android:layout_width=" wrap_content "android:layout_height=" Wrap_Content "android:text=" set_percent_40 "android:id=" @+id/set_percent_40 "android:layout_below=" @ +id/myshowpercentview "android:layout_alignparentleft=" true "android:layout_alignparentstart=" true "/&gt           ; <button android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:tex t= "set_percent_80" android:id= "@+id/set_percent_80" android:layout_below= "@+id/set_percent_40" a Ndroid:layout_alignparentleft= "true" android:layout_alignparentstart= "true"/> </relativela Yout>

(4) Mainactivity.java

Import Android.os.bundle;import Android.view.view;import Android.view.view.onclicklistener;import Android.widget.button;import Android.app.activity;public class Mainactivity extends Activity implements      Onclicklistener {private Showpercentview myshowpercentview;      Private Button set_percent_40;      Private Button set_percent_80; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview ( R.layout.activity_main); init ();} private void Init () {//TODO auto-generated method Stubmyshowpercentview = (Showpercentview) Findviewbyid (  R.id.myshowpercentview);  Set_percent_40 = (Button) Findviewbyid (r.id.set_percent_40);  Set_percent_40.setonclicklistener (this);  set_percent_80 = (Button) Findviewbyid (r.id.set_percent_80);  Set_percent_80.setonclicklistener (this); } @Overridepublic void OnClick (view view) {//TODO auto-generated Method stub if (view = = set_percent_40) {MYSHOWPERCENTVI   Ew.setpercent (40);  }else if (view = = set_percent_80) { Myshowpercentview.setpercent (80); }  }}

SOURCE Download:

Android Custom View (vi)------High imitation Glory 3 C Circular Scale scale chart (Showpercentview)