Android自定义view之圆形进度条
生活随笔
收集整理的這篇文章主要介紹了
Android自定义view之圆形进度条
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本節介紹自定義view-圓形進度條
思路:
根據前面介紹的自定義view內容可拓展得之;
1:新建類繼承自View
2:添加自定義view屬性
3:重寫onDraw(Canvas canvas)
4:實現功能
下面上代碼
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.CustomViewxmlns: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"時
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);}}};};}
思路:
根據前面介紹的自定義view內容可拓展得之;
1:新建類繼承自View
2:添加自定義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.CustomViewxmlns: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);}}};};}
當xml文件中circle:style_Type="stroke_and_fill"時
總結
以上是生活随笔為你收集整理的Android自定义view之圆形进度条的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux学习之CentOS(三)---
- 下一篇: 添加文字和水印