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

Source: Internet
Author: User
Tags getcolor


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)


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.