自定义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.graphics.Paint.FontMetrics;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * 自定义圆形进度条思路
 *
 * 1.先画外圆,再画弧度,
 * 2.然后在画内圆
 * 3.画文本信息
 * 形成一个叠加的效果
 */
public class MyProgressBar extends View {
	private FontMetrics fm;
	private Paint paint;
	/**内圆半径*/
	private int inRadius;
	/**外圆半径*/
	private int outRadius;
	/**文字的颜色*/
	private int textColor=Color.rgb(20,131,214);
	/**内圆的颜色*/
	private int inRdColor=Color.WHITE;
	/**外圆的颜色*/
	private int outRdColor=Color.LTGRAY;
	/**进度条的颜色*/
	private int proColor=Color.rgb(20,131,214);
	/**进度的最大值*/
	private int max;
	/**当前进度条的值*/
	private int progress;
	/**文字的大小*/
	private int textSize=50;

	public MyProgressBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	private void init() {
		paint = new Paint();
	}

	/***
	 * 设置内圆的半径
	 *
	 * @param radius
	 */
	public void setInRadius(int radius) {
		this.inRadius = radius;
	}

	/***
	 * 设置外圆的半径
	 *
	 * @param radius
	 */
	public void setOutRadius(int radius) {
		this.outRadius = radius;
	}

	/**
	 * 设置进度条的颜色 默认蓝色
	 *
	 * @param color
	 */
	public void setColor(int color) {
		this.textColor=color;
	}

	/***
	 * 设置文字的颜色值 默认蓝色
	 *
	 * @param color
	 */
	public void setTextColor(int color) {
		this.textColor=color;
	}

	/***
	 * 设置进度条的最大值
	 * @param max
	 */
	public void setMax(int max) {
		this.max = max;
	}

	/***
	 * 设置当前进度条的进度值
	 * @param progress
	 */
	public void setProgress(int progress) {
		this.progress=progress;
		//设置进度之后,要求UI强制进行重绘
		postInvalidate();
	}

	/**
	 * 设置文字的大小
	 * @param size
	 */
	public void setTextSize(int size){
		this.textSize=size;
	}

	@SuppressLint("DrawAllocation")
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		// 获取控件的中心点
		int cx = getWidth() / 2;
		int cy = getHeight() / 2;

		/***
		 * 1.画外圆
		 */
		paint.setAntiAlias(true);// 设置画笔抗锯齿效果
		paint.setColor(this.outRdColor);
		canvas.drawCircle(cx, cy, this.outRadius, paint);

		/***
		 * 2.画弧度
		 */
		paint.setColor(this.proColor);
//		paint.setARGB(0, 25, 63, 155);
		// 圆形进度条的宽度就是外圆的半径减去内圆的半径
		paint.setStrokeWidth(outRadius - inRadius);
		paint.setStyle(Paint.Style.STROKE);//设置弧度外填充

		/**
		 * 用于定义的圆弧的形状和大小的界限, 界限的计算:就是以外圆的正切圆的方式计算出,左上,右下的坐标值
		 * 有了中心点的坐标值cx,cy,也有了半径r那么
		 *
		 * left=cx-外圆的半径
		 * top=cy-外圆的半径
		 * right=cx+外圆的半径
		 * bottom=cy+外圆的半径
		 *
		 * 但这里要考虑一个问题是画笔有他本身的宽度,根据上面的思路把画笔的宽度问题,重新计算出圆弧的范围
		 */

		int middle = (int) (paint.getStrokeWidth() / 2);
		RectF oval = new RectF(cx - outRadius + middle, cy - outRadius + middle, cx + outRadius - middle, cy
				+ outRadius - middle);
		canvas.drawArc(oval, 0, 360 * this.progress / this.max, false, paint); // 根据进度画圆弧

		/***
		 * 3.画内圆
		 */
		paint.setStyle(Paint.Style.FILL);
		paint.setColor(this.inRdColor);
		canvas.drawCircle(cx, cy, this.inRadius, paint);

		/***
		 *4. 绘制文本
		 */
		paint.setColor(this.textColor);
		paint.setStrokeWidth(5);
		paint.setTextSize(this.textSize);
		fm = paint.getFontMetrics();

		//保留两位小数
		DecimalFormat df = new DecimalFormat("#.00");
		String numText=df.format(this.progress*1.0/max*100);
		// 测量文本的宽度
		float textWidth = paint.measureText(numText) / 2;
		Log.d("progress", progress+"");
		float textCenterVerticalBaselineY = getHeight() / 2 - fm.descent + (fm.descent - fm.ascent) / 2;

		canvas.drawText(numText, cx - textWidth, textCenterVerticalBaselineY, paint);
	}

}


  

时间: 2024-11-08 17:02:59

自定义VIew——漂亮的圆形进度条的相关文章

基于jQuery漂亮的圆形进度条倒计时插件

jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件.该倒计时插件可以显示倒计时的秒.分钟.小时和天数.它采用圆形进度条来作为倒计时的动画,非常的时尚大方. 在线预览   源码下载 使用方法 该倒计时插件依赖于jQuery和KineticJS-一个HTML5 Canvas库.使用是要将它们引入. <script type="text/javascript" src="js/jquery.min.js"></

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

自定义View实现钟摆效果进度条PendulumView

在网上看到了一个IOS组件PendulumView,实现了钟摆的动画效果.由于原生的进度条确实是不好看,所以想可以自定义View实现这样的效果,以后也可以用于加载页面的进度条. 废话不多说,先上效果图 底部黑边是录制时不小心录上的,可以忽略. 既然是自定义View我们就按标准的流程来,第一步,自定义属性自定义属性 建立属性文件 在Android项目的res->values目录下新建一个attrs.xml文件,文件内容如下: [html] view plain copy <?xml versio

自定义View之绘制交替进度条

一.attrs.xml 这进度条交替,涉及到一些属性,例如:进度条的颜色和速度等,这些属性是View里面没有的,所以需要自定义. <?xml version="1.0" encoding="utf-8"?> <resources> <attr name="firstColor" format="color" /> <attr name="secondColor" f

(三)自定义不断转圈的圆形进度条的实现(主要在网络访问时候,提示用户在获取数据)

1.要实现的转圈进度条的效果图如下所示: 2.view_loading.xml中代码如下所示: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/loading_view_layout" androi

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

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