Android自定义控件实现一个带文本与数字的圆形进度条
2016-05-09 22:02
726 查看
实现的效果图如下所示:
第一步:绘制下方有缺口的空心圆,称为外围大弧吧
第二步:计算绘制圆弧进度条时的起始角度,设置为外围大弧的左端点为进度值得起点,扫过的角度所占外围大弧的百分比就是进度值
第三步:绘制数字、文字、百分号
第四步:使用Handler Runnable 和DecelerateInterpolator是进度条和数字动起来
测试代码:
完成代码如下:
public class CustomCircleBar extends View {
private Context context;
/*进度值*/
private int percent;
/*颜色值*/
private int mProgessColor;
/*下边的文字名称*/
private String mCustomText;
/*外圈圆环的画笔*/
private Paint paintBar = new Paint();
/*下边文字的画笔*/
private Paint paintText = new Paint();
/*动态获取属性值*/
private TypedValue typedValue;
/*先加速后减速*/
DecelerateInterpolator mDecelerateInterpolator = new DecelerateInterpolator();
/*动画持续时间*/
private int duration = 10;
private int curTime = 0;
public CustomCircleBar(Context context) {
super(context);
this.context=context;
init();
}
public CustomCircleBar(Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
init();
}
public CustomCircleBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context=context;
init();
}
public void setPercent(int percent) {
this.percent = percent;
/*isShown():Returns the visibility of this view and all of its ancestors*/
if (isShown()) {
/*设置进度后重新开始一次动画*/
curTime=0;
this.invalidate();
}
}
public void setProgessColor(int mProgessColor) {
this.mProgessColor = mProgessColor;
if (isShown()) {
this.invalidate();
}
}
public void setCustomText(String mCustomText) {
this.mCustomText = mCustomText;
}
private Handler mHandler = new Handler();
private Runnable mAnimation = new Runnable() {
@Override
public void run() {
if (curTime < duration) {
curTime++;
/*导致重绘,调用onDraw,onDraw最后调用
* mHandler.postDelayed(mAnimation, 20);更新进度条,界面重绘
* 每次20毫秒,绘制10次,因此动画时间200毫秒*/
CustomCircleBar.this.invalidate();
}
}
};
private void init() {
/*数据初始化,没有设置属性时候的默认值*/
percent = 0;
mProgessColor=Color.rgb(95,112,72);
mCustomText="Home";
typedValue=new TypedValue();
context.getTheme().resolveAttribute(R.attr.maintextclor,typedValue,true);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float mWidth = getWidth();
float mHeight = getHeight();
/*下边是进度条画笔的设置*/
/** Restores the paint to its default settings. */
paintBar.reset();
/*圆环宽度4个像素*/
paintBar.setStrokeWidth(4);
/*空心圆环而非填充的额扇形*/
paintBar.setStyle(Paint.Style.STROKE);
paintBar.setAntiAlias(true);
paintBar.setColor(mProgessColor);
/*调整下不透明度,使边框弧和进度条区分开*/
paintBar.setAlpha(80);
/*接下来是文字画笔的设置*/
paintText.setTextSize(20);
paintText.setColor(getResources().getColor(typedValue.resourceId));
paintText.setStyle(Paint.Style.STROKE);
paintText.setAntiAlias(true);
/*从中间开始绘制文本*/
paintText.setTextAlign(Paint.Align.CENTER);
/*测量文字大小*/
Paint.FontMetrics fontMetrics = paintText.getFontMetrics();
/*计算文字高度*/
float textHeight = fontMetrics.bottom - fontMetrics.top;
/*计算圆的半径*/
float radius = Math.min(mWidth, mHeight) / 2 - 10;
/* ❑ save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
❑ restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。*/
/*保存画布,绘制进度条*/
canvas.save();
/*clipRect:该方法用于裁剪画布,也就是设置画布的显示区域
调用clipRect()方法后,只会显示被裁剪的区域,之外的区域将不会显示 */
canvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4);
/*因为clipRect的原因,外边的圆环下边留个缺口绘制文字*/
canvas.drawCircle(mWidth / 2, mHeight / 2, radius, paintBar);
/*三角函数计算,下方缺口扇形的角度的一半*/
float theta_offset = (float) Math.acos((radius - textHeight / 2) / radius);
/*大弧围成的扇形的角度*/
float theta_full = 360 - 2 * theta_offset;
/*进度值围成的弧对应的角度*/
float thetaProcess = mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration) * percent * theta_full / 100;
/*设置进度值颜色完全不透明*/
paintBar.setAlpha(255);
paintBar.setColor(mProgessColor);
/*注意弧形的起始角度,下边因显示文字导致圆环断开成一条弧,弧有左右两个端点,从左端点开始画弧*/
canvas.drawArc(new RectF(mWidth / 2 - radius, mHeight / 2 - radius, mWidth / 2 + radius, mHeight / 2 + radius), theta_offset+90, thetaProcess, false, paintBar);
/*恢复画布*/
canvas.restore();
/*开始绘制文字*/
paintText.setTextSize(20);
fontMetrics = paintText.getFontMetrics();
float textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
canvas.drawText(mCustomText, mWidth / 2, mHeight / 2 + radius - textHeight / 2 + textBaseLineOffset, paintText);
/*绘制百分号*/
paintText.setTextSize(mHeight * 1 / 8);
fontMetrics = paintText.getFontMetrics();
textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
canvas.drawText("%", mWidth / 2, mHeight / 2 + radius / 3 + textBaseLineOffset, paintText);
/*绘制百分比*/
paintText.setTextSize(mHeight * 3 / 8);
canvas.drawText("" + (int)(percent*mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration)), mWidth / 2, mHeight / 2, paintText);
/*20毫秒后执行动画*/
mHandler.postDelayed(mAnimation, 20);
}
}
第一步:绘制下方有缺口的空心圆,称为外围大弧吧
anvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4);
第二步:计算绘制圆弧进度条时的起始角度,设置为外围大弧的左端点为进度值得起点,扫过的角度所占外围大弧的百分比就是进度值
第三步:绘制数字、文字、百分号
第四步:使用Handler Runnable 和DecelerateInterpolator是进度条和数字动起来
测试代码:
final CustomCircleBar circle=(CustomCircleBar)findViewById(R.id.win_home); circle.setPercent(10); circle.setCustomText("呵呵"); circle.setProgessColor(getResources().getColor(R.color.blue)); final Random random=new Random(); circle.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v){ circle.setPercent(random.nextInt(100)); } });
完成代码如下:
public class CustomCircleBar extends View {
private Context context;
/*进度值*/
private int percent;
/*颜色值*/
private int mProgessColor;
/*下边的文字名称*/
private String mCustomText;
/*外圈圆环的画笔*/
private Paint paintBar = new Paint();
/*下边文字的画笔*/
private Paint paintText = new Paint();
/*动态获取属性值*/
private TypedValue typedValue;
/*先加速后减速*/
DecelerateInterpolator mDecelerateInterpolator = new DecelerateInterpolator();
/*动画持续时间*/
private int duration = 10;
private int curTime = 0;
public CustomCircleBar(Context context) {
super(context);
this.context=context;
init();
}
public CustomCircleBar(Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
init();
}
public CustomCircleBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context=context;
init();
}
public void setPercent(int percent) {
this.percent = percent;
/*isShown():Returns the visibility of this view and all of its ancestors*/
if (isShown()) {
/*设置进度后重新开始一次动画*/
curTime=0;
this.invalidate();
}
}
public void setProgessColor(int mProgessColor) {
this.mProgessColor = mProgessColor;
if (isShown()) {
this.invalidate();
}
}
public void setCustomText(String mCustomText) {
this.mCustomText = mCustomText;
}
private Handler mHandler = new Handler();
private Runnable mAnimation = new Runnable() {
@Override
public void run() {
if (curTime < duration) {
curTime++;
/*导致重绘,调用onDraw,onDraw最后调用
* mHandler.postDelayed(mAnimation, 20);更新进度条,界面重绘
* 每次20毫秒,绘制10次,因此动画时间200毫秒*/
CustomCircleBar.this.invalidate();
}
}
};
private void init() {
/*数据初始化,没有设置属性时候的默认值*/
percent = 0;
mProgessColor=Color.rgb(95,112,72);
mCustomText="Home";
typedValue=new TypedValue();
context.getTheme().resolveAttribute(R.attr.maintextclor,typedValue,true);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float mWidth = getWidth();
float mHeight = getHeight();
/*下边是进度条画笔的设置*/
/** Restores the paint to its default settings. */
paintBar.reset();
/*圆环宽度4个像素*/
paintBar.setStrokeWidth(4);
/*空心圆环而非填充的额扇形*/
paintBar.setStyle(Paint.Style.STROKE);
paintBar.setAntiAlias(true);
paintBar.setColor(mProgessColor);
/*调整下不透明度,使边框弧和进度条区分开*/
paintBar.setAlpha(80);
/*接下来是文字画笔的设置*/
paintText.setTextSize(20);
paintText.setColor(getResources().getColor(typedValue.resourceId));
paintText.setStyle(Paint.Style.STROKE);
paintText.setAntiAlias(true);
/*从中间开始绘制文本*/
paintText.setTextAlign(Paint.Align.CENTER);
/*测量文字大小*/
Paint.FontMetrics fontMetrics = paintText.getFontMetrics();
/*计算文字高度*/
float textHeight = fontMetrics.bottom - fontMetrics.top;
/*计算圆的半径*/
float radius = Math.min(mWidth, mHeight) / 2 - 10;
/* ❑ save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
❑ restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。*/
/*保存画布,绘制进度条*/
canvas.save();
/*clipRect:该方法用于裁剪画布,也就是设置画布的显示区域
调用clipRect()方法后,只会显示被裁剪的区域,之外的区域将不会显示 */
canvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4);
/*因为clipRect的原因,外边的圆环下边留个缺口绘制文字*/
canvas.drawCircle(mWidth / 2, mHeight / 2, radius, paintBar);
/*三角函数计算,下方缺口扇形的角度的一半*/
float theta_offset = (float) Math.acos((radius - textHeight / 2) / radius);
/*大弧围成的扇形的角度*/
float theta_full = 360 - 2 * theta_offset;
/*进度值围成的弧对应的角度*/
float thetaProcess = mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration) * percent * theta_full / 100;
/*设置进度值颜色完全不透明*/
paintBar.setAlpha(255);
paintBar.setColor(mProgessColor);
/*注意弧形的起始角度,下边因显示文字导致圆环断开成一条弧,弧有左右两个端点,从左端点开始画弧*/
canvas.drawArc(new RectF(mWidth / 2 - radius, mHeight / 2 - radius, mWidth / 2 + radius, mHeight / 2 + radius), theta_offset+90, thetaProcess, false, paintBar);
/*恢复画布*/
canvas.restore();
/*开始绘制文字*/
paintText.setTextSize(20);
fontMetrics = paintText.getFontMetrics();
float textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
canvas.drawText(mCustomText, mWidth / 2, mHeight / 2 + radius - textHeight / 2 + textBaseLineOffset, paintText);
/*绘制百分号*/
paintText.setTextSize(mHeight * 1 / 8);
fontMetrics = paintText.getFontMetrics();
textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
canvas.drawText("%", mWidth / 2, mHeight / 2 + radius / 3 + textBaseLineOffset, paintText);
/*绘制百分比*/
paintText.setTextSize(mHeight * 3 / 8);
canvas.drawText("" + (int)(percent*mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration)), mWidth / 2, mHeight / 2, paintText);
/*20毫秒后执行动画*/
mHandler.postDelayed(mAnimation, 20);
}
}
相关文章推荐
- Android Studio: Missing 32 bit compatbility library
- Android实现信息安全中维吉尼亚密码技术
- 如何在AndroidStudio中导入Module
- Android :修改头像并使用Bmob保存(显示为圆形)
- android从源码解析并实现各种Toast效果合集
- android 中的OnAcitvityResult
- Android中handler引用记录
- 05Android学习从零单排之Androidmultimedia(多媒体)
- Android 点击一个按钮,弹出一个对话框
- Android EditText
- 【Android学习】使用RxJava完成益智翻牌游戏
- 非常全面的 Android Bitmap 知识点梳理
- R文件的编译命名
- Xamarin.Android OOM 思路整理 (BitmapFactory.DecodeByteArray)
- Android之高德地图定位
- Android开发工具之Android Studio---gradle编译报错(一)
- 最全面的AndroidStudio配置指南总结-包括护眼模式
- Android4.4中获取资源路径问题
- 在低版本android系统上实现Material design应用
- Android新增API之AudioEffect中文API与应用实例