Custom view circular progress bar and view circular progress bar

Custom view circular progress bar and view circular progress bar

This section describes the idea of a custom view-circular progress bar: according to the custom view content described above, it can be expanded. 1: New Class inherits from View2: add custom view attribute 3: override onDraw (Canvas canvas) 4: Code 1 for the implementation function. custom view code: public class CustomView extends View {// background ring color private int circleColor; // progress bar color & font color (for aesthetic purpose, so the design font color and progress bar color values are the same) private int secondCircleColor; // progress bar & background ring width private float stroke_width; // progress value private float progress; // total progress value, default Value: 100 private float totalProgress; // font size: private float textSize; // fill mode: private Int style_type; public CustomView (Context context) {super (context);} public CustomView (Context context, AttributeSet attrs) {super (context, attrs); TypedArray array = context. obtainStyledAttributes (attrs, R. styleable. customView); circleColor = array. getColor (R. styleable. customView_circleColor, Color. BLACK); secondCircleColor = array. getColor (R. styleable. customView_secondCircleColor, Color. RED); stroke_width = Array. getDimension (R. styleable. customView_stroke_width, 2); progress = array. getFloat (R. styleable. customView_progress, 0); totalProgress = array. getFloat (R. styleable. customView_totalProgress, 100); textSize = array. getDimension (R. styleable. customView_textSize, 16); style_type = array. getInt (R. styleable. customView_style_Type, 0);} public CustomView (Context context, AttributeSet attrs, int defStyleAttr) {super (c Ontext, attrs, defStyleAttr);} public void setCircleColor (int color) {circleColor = color;} public int getCircleColor () {return circleColor;} public void setSecondCircleColor (int color) {secondCircleColor = color;} public int getSecondColor () {return secondCircleColor;} public void setStrokeWidth (float width) {stroke_width = width;} public float getStrokeWidth () {return stroke_width ;} public void setProgress (float p Rogress) {this. progress = progress; postInvalidate (); // refresh interface} public float getProgress () {return this. progress;} public void setTotalProgress (float totalProgress) {this. totalProgress = totalProgress;} public float getTotalProgress () {return this. totalProgress;} public void setTextSize (float textSize) {this. textSize = textSize;} public float getTextSize () {return this. textSize ;}@ Overrideprotected void onDraw (Canvas c Anvas) {super. onDraw (canvas); // The First Progress circle final Paint paint_background = new Paint (); trim (true); paint_background.setStrokeWidth (stroke_width); paint_background.setStyle (Style. STROKE); paint_background.setColor (circleColor); // Second Progress circle final Paint paint_progress = new Paint (); Progress (true); paint_progress.setStrokeWidth (stroke_width); if (style_type = 0) {paint_progress.setSt Yle (Style. STROKE);} else if (style_type = 1) {paint_progress.setStyle (Style. FILL_AND_STROKE);} second (secondCircleColor); // draw textfinal Paint paint_text = new Paint (); Second (true); if (style_type = 0) {paint_text.setColor (secondCircleColor );} else if (style_type = 1) {paint_text.setColor (circleColor);} paint_text.setTextSize (textSize); paint_text.setTextAlign (Align. CENTER); if (getWid Th ()! = GetHeight () {throw new IllegalArgumentException ("the height and width must be equal"); // control the width and height} else {RectF circle_background = new RectF (); circle_background.left = getLeft () + stroke_width; circle_background.right = getRight ()-stroke_width; rows = getTop () + stroke_width; rows = getBottom ()-stroke_width; canvas. drawArc (circle_background,-90,360, false, paint_background); RectF circle_progress = new RectF (); Circle_progress.left = getLeft () + stroke_width; circle_progress.right = getRight ()-stroke_width; circle_progress.top = getTop () + stroke_width; rows = getBottom ()-stroke_width; if (progress> totalProgress) {throw new IllegalArgumentException ("the current progress value cannot be greater than the total progress value");} else {if (style_type = 0) {canvas. drawArc (circle_progress,-90, progress/totalProgress * 360, false, paint_progress);} else if (style_type = 1) {ca Nvas. drawArc (circle_progress,-90, progress/totalProgress * 360, true, paint_progress) ;}} canvas. drawText (int) progress + "/" + (int) totalProgress, getLeft () + getWidth ()/2, getTop () + getHeight ()/2 + textSize/4, paint_text) ;}}2: attr attributes <? Xml version = "1.0" encoding = "UTF-8"?> <Resources> <! -- Declare-styleable: Declares the style type; attr name = "" declares the attribute name; format = "attribute type" --> <declare-styleable name = "CustomEditText"> <attr name = "lineColor" format = "color"/> <attr name = "lineHeight" format = "dimension"/> </declare-styleable> <declare-styleable name = "CustomView"> <attr name = "stroke_width" format = "dimension"/> <attr name = "circleColor" format = "color"/> <attr name = "secondCircleColor" format = "color"/> <attr name = "progress" format = "float"/> <attr name = "totalProgress" format = "float"/> <attr name = "textSize" format = "dimension"/> <attr name = "style_Type"> <enum name =" stroke "value =" 0 "/> <enum name =" stroke_and_fill "value =" 1 "/> </attr> </declare-styleable> </resources> 3: xml layout file <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "wrap_content" android: layout_height = "wrap_content"> <com. anqiansong. views. customView xmlns: circle = "http://schemas.android.com/apk/res/com.anqiansong.androidcustomview" android: id = "@ + id/customview" android: layout_width = "50dp" android: layout_height = "50dp" android: layout_centerInParent = "true" circle: circleColor = "#000000" circle: secondCircleColor = "# ff0000" circle: stroke_width = "2dp" circle: totalProgress = "100" circle: progress = "10" circle: style_Type = "stroke"/> </RelativeLayout> When circle: style_Type = "stroke" in the xml file

When circle: style_Type = "stroke_and_fill" in the xml file

4: The activity calls public class MainActivity extends ActionBarActivity {CustomView customView; private float progress = 0; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); customView = (CustomView) findViewById (R. id. customview); handler. sendEmptyMessageDelayed (0, 1000);} Handler handler = new Handler () {public void handleMessage (android. OS. message msg) {if (msg. what = 0) {if (progress> 100) {return;} else {customView. setProgress (progress); progress + = 2; handler. sendEmptyMessageDelayed (0,100 );}}};};}

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.