自定义view之圆形进度条

本节介绍自定义view-圆形进度条
思路:
根据前面介绍的自定义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;
	//总进度值,默认为100
	private 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;
	}
	@Override
	protected 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);
		//画text
		final 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;
	@Override
	protected 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);
				}
			}
		};
	};

}

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-05 13:38:12

自定义view之圆形进度条的相关文章

【Android 应用开发】 自定义 View 组件 -- 圆形进度条

转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://download.csdn.net/detail/han1202012/8069497 ; -- GitHub 地址 : https://github.com/han1202012/CircleProcess.git ; -- 工程示例 : 一. 相关知识点解析 1. 自定义 View 组件构造方法 构造方

Android 自定义漂亮的圆形进度条

这几天对Android中实现画圆弧及圆弧效果中所实现的效果进行了修改,改为进度圆心进度条,效果如图所示 TasksCompletedView.java 代码如下 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.RectF; impo

Android自定义View——圆形进度条式按钮

介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图. 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态.而且他说圆形进度的功能已经实现了.那么我们只需要对中间的两个状态做处理就行了. 先来看看实现的效果图: 上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj623565791/article/details/43371299 下面开始具体实现. 具体实

Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)

转载请注明地址:http://blog.csdn.net/xiaanming/article/details/10298163 很多的时候,系统自带的View满足不了我们功能的需求,那么我们就需要自己来自定义一个能满足我们需求的View,自定义View我们需要先继承View,添加类的构造方法,重写父类View的一些方法,例如onDraw,为了我们自定义的View在一个项目中能够重用,有时候我们需要自定义其属性,举个很简单的例子,我在项目中的多个界面使用我自定义的View,每个界面该自定义View

自定义VIew——漂亮的圆形进度条

package com.example.firstapp; import java.text.DecimalFormat; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphic

自定义圆形进度条

关于控件呢,我想大家应该都很熟悉了吧,android应用开发MVC架构中,控件担任着至关重要的作用,感觉可以说是基于控件的事件模型人机交互的基础吧.这种特性感觉在wpf开发中体现得更为直接,感兴趣的同学可以去了解一下.而android框架自身就已经给我们提供了很多控件.那么问题来了?为什么有那么多控件可以用,你还要去屑自定义控件呢?是因为大家闲的蛋疼吗?显然不是.个人认为只要有两方面吧,要么是觉得有些原生控件是在是丑得难以忍受(即使是在你已经自定义了他的shape,圆角,selector等一系列

android自定义圆形进度条,实现动态画圆效果

自定义圆形进度条效果图如下:应用场景如动态显示分数等. view的自定义属性如下attr.xml <?xml version="1.0" encoding="UTF-8"?> <resources> <declare-styleable name="ArcProgressbar">         <!-- 圆环起始角度-->         <attr name="startAng

【Android进度条】三种方式实现自定义圆形进度条ProgressBar

一.通过动画实现 定义res/anim/loading.xml如下: [html] view plaincopyprint? <?xml version="1.0" encoding="UTF-8"?> <animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android"> &

自定义圆形进度条 自定义倒计时进度条

自定义圆形进度条 自定义倒计时进度条 版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 此控件源码已开源到Github:https://github.com/yanzhenjie/CircleTextProgressbar,欢迎Star. 欢迎加入我博客左侧的QQ交流群一起探讨. 效果预览 源代码传送门:https://github.com/yanzhenjie/CircleTextProgressbar 实现与原理 这个文字圆