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

转载著名出处 : 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 组件构造方法

构造方法 : 自定义的 View 组件, 一般需要实现 三个构造方法, 分别有 一个, 两个, 三个参数;

-- 一个参数 : public CircleProcess(Context context);

-- 两个参数 : public CircleProcess(Context context, AttributeSet attrs);

-- 三个参数 : public CircleProcess(Context context, AttributeSet attrs, int defStyle);

构造方法注意点 :

-- 调用上级方法 : 每个构造方法中必须调用 super() 方法, 方法中的参数与该构造方法参数一样;

-- 常用构造方法 : 一般在2参数构造方法中实现逻辑;

构造方法示例 :

/** 画笔 */
private Paint mPaint;
/** 上下文对象 */
private Context mContext;
/** 进度条的值 */
private int mProcessValue;

public CircleProcess(Context context, AttributeSet attrs) {
super(context, attrs);
// 初始化成员变量 Context
mContext = context;
// 创建画笔, 并设置画笔属性
mPaint = new Paint();
// 消除绘制时产生的锯齿
mPaint.setAntiAlias(true);
// 绘制空心圆形需要设置该样式
mPaint.setStyle(Style.STROKE);
}

/**
* 自定义布局实现的 只有 Context 参数的构造方法
* @param context
*/
public CircleProcess(Context context) {
super(context);
}

/**
* 自定义布局实现的 三个参数的构造方法
* @param context
* @param attrs
* @param defStyle
*/
public CircleProcess(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

2. dip 和 px 单位转换

(1) dip 转 px

公式 :

-- 基本公式 : px / dip = dpi / 160;

-- 计算公式 : px = dpi / 160 * dip;

一些概念解析 :

-- dpi 概念 : dpi (dot per inch), 每英寸像素数 归一化的值 120 160 240 320 480;

-- 区分 dpi 和 density : dpi 是归一化的值, density 是实际的值, 可能不是整数;

代码示例 :

/**
* 将手机的 设备独立像素 转为 像素值
*
* 		公式 : px / dip = dpi / 160
* 			   px = dip * dpi / 160;
* @param context
* 				上下文对象
* @param dpValue
* 				设备独立像素值
* @return
* 				转化后的 像素值
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}

(2) px 转 dip

公式 :

-- 基本公式 : px / dip = dpi / 160;

-- 计算公式 : dip = 160 / dpi * px;

代码 :

/**
* 将手机的 像素值 转为 设备独立像素
* 		公式 : px/dip = dpi/160
* 			   dip = px * 160 / dpi
* 			   dpi (dot per inch) : 每英寸像素数 归一化的值 120 160 240 320 480;
* 			   density : 每英寸的像素数, 精准的像素数, 可以用来计算准确的值
* 			   从 DisplayMetics 中获取的
* @param context
* 				上下文对象
* @param pxValue
* 				像素值
* @return
* 				转化后的 设备独立像素值
*/
public static int px2dip(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}

3. 关于 组件 宽 和 高 计算

(1) MesureSpec 简介

MeasureSpec 组成 : 每个 MeasureSpec 都代表一个 int 类型数值, 共 32 位, 前两位是模式位, 后 30 位 是数值位;

-- 模式 : int 类型的前 2 位, 共有三种模式, 通过 MeasureSpec.getMode(int) 方法获取, 下面会详细介绍模式;

-- 大小 : int 类型的后 30 位, 通过 MeasureSpec.getSize(int) 方法获取大小;

MeasureSpec 模式简介 : 注意下面的数字是二进制的

-- 00 : MeasureSpec.UNSPECIFIED, 未指定模式;
-- 01 : MeasureSpec.EXACTLY, 精准模式;
-- 11 : MeasureSpec.AT_MOST, 最大模式;

MeasureSpec 常用方法介绍 :

-- MeasureSpec.getMode(int) : 获取模式;
-- MeasureSpec.getSize(int) : 获取大小;
-- MeasureSpec.makeMeasureSpec(int size, int mode) : 创建一个 MeasureSpec;
-- MeasureSpec.toString(int) : 模式 + 大小 字符串;

(2) 通过 MeasureSpec 计算组件大小

计算方法 :

-- 精准模式 : 该模式下 长度的大小 就是 从 MeasureSpec 中获取的 size 大小;

-- 最大模式 : 获取 默认大小 和 size 中的较小的那个;

-- 未定义模式 : 默认大小;

通用计算方法代码 :

/**
* 获取组件宽度
*
* MeasureSpec : 该 int 类型有 32 位, 前两位是状态位, 后面 30 位是大小值;
* 		常用方法 :
* 		-- MeasureSpec.getMode(int) : 获取模式
*      -- MeasureSpec.getSize(int) : 获取大小
*      -- MeasureSpec.makeMeasureSpec(int size, int mode) : 创建一个 MeasureSpec;
*      -- MeasureSpec.toString(int) : 模式 + 大小 字符串
*
*      模式介绍 : 注意下面的数字是二进制的
*      -- 00 : MeasureSpec.UNSPECIFIED, 未指定模式;
*      -- 01 : MeasureSpec.EXACTLY, 精准模式;
*      -- 11 : MeasureSpec.AT_MOST, 最大模式;
*
*      注意 : 这个 MeasureSpec 模式是在 onMeasure 方法中自动生成的, 一般不用去创建这个对象
*
* @param widthMeasureSpec
* 				MeasureSpec 数值
* @return
* 				组件的宽度
*/
private int measure(int measureSpec) {
//返回的结果, 即组件宽度
int result = 0;
//获取组件的宽度模式
int mode = MeasureSpec.getMode(measureSpec);
//获取组件的宽度大小 单位px
int size = MeasureSpec.getSize(measureSpec);

if(mode == MeasureSpec.EXACTLY){//精准模式
result = size;
}else{//未定义模式 或者 最大模式
//注意 200 是默认大小, 在 warp_content 时使用这个值, 如果组件中定义了大小, 就不使用该值
result = dip2px(mContext, 200);
if(mode == MeasureSpec.AT_MOST){//最大模式
//最大模式下获取一个稍小的值
result = Math.min(result, size);
}
}

return result;
}

(3) 设置 组件大小方法

setMeasuredDimension() 方法 : 该方法决定 View 组件的大小;

-- 使用场所 : 在 onMeasure() 方法中调用该方法, 就设置了组件的宽 和 高, 然后在其它位置调用 getWidth() 和 getHeight() 方法时, 获取的就是 该方法设置的值;

-- 代码示例 :

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
/*
* setMeasuredDimension 方法 : 该方法决定当前的 View 的大小
* 根据 View 在布局中的显示, 动态获取 View 的宽高
*
* 当布局组件 warp_content 时 :
* 从 MeasureSpec 获取的宽度 : 492 高度 836 ,
* 默认 宽高 都是 120dip转化完毕后 180px
*
* 当将布局组件 的宽高设置为 240 dp :
* 宽度 和 高度 MeasureSpec 获取的都是 360, 此时 MeasureSpec 属于精准模式
*
*/
setMeasuredDimension(measure(widthMeasureSpec), measure(heightMeasureSpec));
}

4. 图形绘制

(1) 设置画笔

画笔相关方法 :

-- 消除锯齿 : setAntiAlias(boolean);

// 消除绘制时产生的锯齿
mPaint.setAntiAlias(true);

-- 绘制空心圆设置的样式 : setStyle(Style.STROKE);

// 绘制空心圆形需要设置该样式
mPaint.setStyle(Style.STROKE);

-- 绘制实心图形文字需要设置的样式 : mPaint.setStrokeWidth(0);

-- 设置画笔颜色 : setColor(Color.BLUE);

-- 设置文字大小 : setTextSize(float);

//设置数字的大小, 注意要根据 内圆半径设置
mPaint.setTextSize(innerRadius / 2);

(2) 绘制图形

绘制圆 : canvas.drawCircle(float cx, float cy, float radius, Paint paint);

-- cx 参数 : 圆心的 x 轴距离;

-- cy 参数 : 圆心的 y 轴距离;

-- radius 参数 : 半径;

-- paint : 画笔;

绘制圆弧 :

-- 创建圆弧 : RectF rectf = new RectF(left, top, right, bottom);

-- 绘制 : canvas.drawArc(rectf, 270, mProcessValue, false, mPaint);

-- 示例 :

//创建圆弧对象
RectF rectf = new RectF(left, top, right, bottom);
//绘制圆弧 参数介绍 : 圆弧, 开始度数, 累加度数, 是否闭合圆弧, 画笔
canvas.drawArc(rectf, 270, mProcessValue, false, mPaint);

绘制文字 : canvas.drawText(str, textX, textY, mPaint);

二. 代码示例

1. 自定义 View 代码

package cn.org.octopus.circle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.ImageView;

public class CircleProcess extends ImageView {

/** 画笔 */
private Paint mPaint;
/** 上下文对象 */
private Context mContext;
/** 进度条的值 */
private int mProcessValue;

public CircleProcess(Context context, AttributeSet attrs) {
super(context, attrs);
// 初始化成员变量 Context
mContext = context;
// 创建画笔, 并设置画笔属性
mPaint = new Paint();
// 消除绘制时产生的锯齿
mPaint.setAntiAlias(true);
// 绘制空心圆形需要设置该样式
mPaint.setStyle(Style.STROKE);
}

/**
* 自定义布局实现的 只有 Context 参数的构造方法
* @param context
*/
public CircleProcess(Context context) {
super(context);
}

/**
* 自定义布局实现的 三个参数的构造方法
* @param context
* @param attrs
* @param defStyle
*/
public CircleProcess(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

//获取圆心的 x 轴位置
int center = getWidth() / 2;
/*
* 中间位置 x 减去左侧位置 的绝对值就是圆半径,
* 注意 : 由于 padding 属性存在, |left - right| 可能与 width 不同
*/
int outerRadius = Math.abs(getLeft() - center);
//计算内圆半径大小, 内圆半径 是 外圆半径的一般
int innerRadius = outerRadius / 2;

//设置画笔颜色
mPaint.setColor(Color.BLUE);
//设置画笔宽度
mPaint.setStrokeWidth(2);
//绘制内圆方法 前两个参数是 x, y 轴坐标, 第三个是内圆半径, 第四个参数是 画笔
canvas.drawCircle(center, center, innerRadius, mPaint);

/*
* 绘制进度条的圆弧
*
* 绘制图形需要 left top right bottom 坐标, 下面需要计算这个坐标
*/

//计算圆弧宽度
int width = outerRadius - innerRadius;
//将圆弧的宽度设置给 画笔
mPaint.setStrokeWidth(width);
/*
* 计算画布绘制圆弧填入的 top left bottom right 值,
* 这里注意给的值要在圆弧的一半位置, 绘制的时候参数是从中间开始绘制
*/
int top = center - (innerRadius + width/2);
int left = top;
int bottom = center + (innerRadius + width/2);
int right = bottom;

//创建圆弧对象
RectF rectf = new RectF(left, top, right, bottom);
//绘制圆弧 参数介绍 : 圆弧, 开始度数, 累加度数, 是否闭合圆弧, 画笔
canvas.drawArc(rectf, 270, mProcessValue, false, mPaint);

//绘制外圆
mPaint.setStrokeWidth(2);
canvas.drawCircle(center, center, innerRadius + width, mPaint);

/*
* 在内部正中央绘制一个数字
*/
//生成百分比数字
String str = (int)(mProcessValue * 1.0 / 360 * 100) + "%";
/*
* 测量这个数字的宽 和 高
*/
//创建数字的边界对象
Rect textRect = new Rect();
//设置数字的大小, 注意要根据 内圆半径设置
mPaint.setTextSize(innerRadius / 2);
mPaint.setStrokeWidth(0);
//获取数字边界
mPaint.getTextBounds(str, 0, str.length(), textRect);
int textWidth = textRect.width();
int textHeight = textRect.height();

//根据数字大小获取绘制位置, 以便数字能够在正中央绘制出来
int textX = center - textWidth / 2;
int textY = center + textHeight / 2;

//正式开始绘制数字
canvas.drawText(str, textX, textY, mPaint);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
/*
* setMeasuredDimension 方法 : 该方法决定当前的 View 的大小
* 根据 View 在布局中的显示, 动态获取 View 的宽高
*
* 当布局组件 warp_content 时 :
* 从 MeasureSpec 获取的宽度 : 492 高度 836 ,
* 默认 宽高 都是 120dip转化完毕后 180px
*
* 当将布局组件 的宽高设置为 240 dp :
* 宽度 和 高度 MeasureSpec 获取的都是 360, 此时 MeasureSpec 属于精准模式
*
*/
setMeasuredDimension(measure(widthMeasureSpec), measure(heightMeasureSpec));
}

/**
* 获取组件宽度
*
* MeasureSpec : 该 int 类型有 32 位, 前两位是状态位, 后面 30 位是大小值;
* 		常用方法 :
* 		-- MeasureSpec.getMode(int) : 获取模式
*      -- MeasureSpec.getSize(int) : 获取大小
*      -- MeasureSpec.makeMeasureSpec(int size, int mode) : 创建一个 MeasureSpec;
*      -- MeasureSpec.toString(int) : 模式 + 大小 字符串
*
*      模式介绍 : 注意下面的数字是二进制的
*      -- 00 : MeasureSpec.UNSPECIFIED, 未指定模式;
*      -- 01 : MeasureSpec.EXACTLY, 精准模式;
*      -- 11 : MeasureSpec.AT_MOST, 最大模式;
*
*      注意 : 这个 MeasureSpec 模式是在 onMeasure 方法中自动生成的, 一般不用去创建这个对象
*
* @param widthMeasureSpec
* 				MeasureSpec 数值
* @return
* 				组件的宽度
*/
private int measure(int measureSpec) {
//返回的结果, 即组件宽度
int result = 0;
//获取组件的宽度模式
int mode = MeasureSpec.getMode(measureSpec);
//获取组件的宽度大小 单位px
int size = MeasureSpec.getSize(measureSpec);

if(mode == MeasureSpec.EXACTLY){//精准模式
result = size;
}else{//未定义模式 或者 最大模式
//注意 200 是默认大小, 在 warp_content 时使用这个值, 如果组件中定义了大小, 就不使用该值
result = dip2px(mContext, 200);
if(mode == MeasureSpec.AT_MOST){//最大模式
//最大模式下获取一个稍小的值
result = Math.min(result, size);
}
}

return result;
}

/**
* 将手机的 设备独立像素 转为 像素值
*
* 		公式 : px / dip = dpi / 160
* 			   px = dip * dpi / 160;
* @param context
* 				上下文对象
* @param dpValue
* 				设备独立像素值
* @return
* 				转化后的 像素值
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}

/**
* 将手机的 像素值 转为 设备独立像素
* 		公式 : px/dip = dpi/160
* 			   dip = px * 160 / dpi
* 			   dpi (dot per inch) : 每英寸像素数 归一化的值 120 160 240 320 480;
* 			   density : 每英寸的像素数, 精准的像素数, 可以用来计算准确的值
* 			   从 DisplayMetics 中获取的
* @param context
* 				上下文对象
* @param pxValue
* 				像素值
* @return
* 				转化后的 设备独立像素值
*/
public static int px2dip(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}

/**
* 获取当前进度值
* @return
* 				返回当前进度值
*/
public int getmProcessValue() {
return mProcessValue;
}

/**
* 为该组件设置进度值
* @param mProcessValue
* 				设置的进度值参数
*/
public void setmProcessValue(int mProcessValue) {
this.mProcessValue = mProcessValue;
}

}

2. Activity 代码

package cn.org.octopus.circle;

import android.app.Activity;
import android.app.ActionBar;
import android.app.Fragment;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.os.Build;

public class MainActivity extends Activity {

private static CircleProcess circle_process;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//加载 Fragment
if (savedInstanceState == null) {
getFragmentManager().beginTransaction()
.add(R.id.container, new PlaceholderFragment())
.commit();
}

new CircleProcessAnimation().execute();
}

/**
* 设置 异步任务, 在这个任务中 设置 圆形进度条的进度值
* @author octopus
*
*/
class CircleProcessAnimation extends AsyncTask<Void, Integer, Void>{

@Override
protected Void doInBackground(Void... arg0) {
for(int i = 1; i <= 360; i ++){
try {
//激活圆形进度条显示方法
publishProgress(i);
//每隔 50 毫秒更新一次数据
Thread.sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
return null;
}

@Override
protected void onProgressUpdate(Integer... values) {
super.onProgressUpdate(values);

//为圆形进度条组件设置进度值
circle_process.setmProcessValue(values[0]);
//刷新圆形进度条显示
circle_process.invalidate();
}

}

/**
* 界面显示的 Fragment
* @author octopus
*/
public static class PlaceholderFragment extends Fragment {

public PlaceholderFragment() {
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main, container, false);
circle_process = (CircleProcess) rootView.findViewById(R.id.circle_process);
return rootView;
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

3. 布局文件代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="cn.org.octopus.circle.MainActivity$PlaceholderFragment"
android:gravity="center">

<cn.org.octopus.circle.CircleProcess
android:id="@+id/circle_process"
android:layout_width="300dip"
android:layout_height="300dip"/>

</RelativeLayout>

代码下载 :

-- CSDN 下载地址 : http://download.csdn.net/detail/han1202012/8069497 ;

-- GitHub 地址 : https://github.com/han1202012/CircleProcess.git ;

-- 工程示例 :