自訂view之圓形進度條，view圓形進度條

自訂view之圓形進度條，view圓形進度條

本節介紹自訂view-圓形進度條思路：根據前面介紹的自訂view內容可拓展得之；1：建立類繼承自View2：添加自訂view屬性3：重寫onDraw(Canvas canvas)4：實現功能下面上代碼1.自訂view代碼：public class CustomView extends View {//背景圓環顏色private int circleColor;//進度條顏色&字型顏色(為了美觀，所以設計字型顏色和進度條顏色值一致)private int secondCircleColor;//進度條&背景圓環寬度private float stroke_width;//進度值private float progress;//總進度值，預設為100private float totalProgress;//字型大小private float textSize;//填充模式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(context, 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 progress){this.progress=progress;postInvalidate();//重新整理介面}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 canvas) {super.onDraw(canvas);//第一進度圓final Paint paint_background=new Paint();paint_background.setAntiAlias(true);paint_background.setStrokeWidth(stroke_width);paint_background.setStyle(Style.STROKE);paint_background.setColor(circleColor);//第二進度圓final Paint paint_progress=new Paint();paint_progress.setAntiAlias(true);paint_progress.setStrokeWidth(stroke_width);if(style_type==0){paint_progress.setStyle(Style.STROKE);}else if(style_type==1){paint_progress.setStyle(Style.FILL_AND_STROKE);}paint_progress.setColor(secondCircleColor);//畫textfinal Paint paint_text=new Paint();paint_text.setAntiAlias(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(getWidth()!=getHeight()){throw new IllegalArgumentException("高度和寬度必須相等");//控制寬度和高度}else{RectF circle_background=new RectF();circle_background.left=getLeft()+stroke_width;circle_background.right=getRight()-stroke_width;circle_background.top=getTop()+stroke_width;circle_background.bottom=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;circle_progress.bottom=getBottom()-stroke_width;if(progress>totalProgress){throw new IllegalArgumentException("當前進度值不能大於總進度值");}else{if(style_type==0){canvas.drawArc(circle_progress, -90, progress/totalProgress*360, false, paint_progress);}else if(style_type==1){canvas.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屬性<?xml version="1.0" encoding="utf-8"?><resources> <!--declare-styleable:聲明樣式類型;attr name=""聲明屬性名稱;format="屬性的類型"  -->    <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布局檔案<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>當xml檔案中circle:style_Type="stroke"時

當xml檔案中circle:style_Type="stroke_and_fill"時

4：activity中調用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);}}};};}

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。