android 环形时间显示_Android_Android实现自定义圆形进度条，今天无意中发现一个圆形进度 - phpStudy...

Android实现自定义圆形进度条

今天无意中发现一个圆形进度，想想自己实现一个，如下图：

基本思路是这样的：

1.首先绘制一个实心圆

2.绘制一个白色实心的正方形，遮住实心圆

3.在圆的中心动态绘制当前进度的百分比字符

4.绘制一个与之前实心圆相同颜色的空心圆

5.逐渐改变当前的百分比

6.根据百分比，逐渐改变正方形的大小，逐渐减小正方形的底部y轴的坐标，不断重绘，直到达到100%

首先看看自定义的属性

在values目录下新建attrs.xml内容如下：

定义绘制圆形的背景色，和绘制圆形的半径大小

自定义视图

import android.annotation.SuppressLint;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.text.TextPaint;

import android.util.AttributeSet;

import android.util.Log;

import android.view.View;

public class CirclePro extends View {

private Paint paint;

private int circleBack;//圆的背景色

private int mschedual = 0;//用于控制动态变化

float circleHalf; //圆的半径

String percent = "";//绘制百分比的字符串

@SuppressLint("Recycle")

public CirclePro(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

paint = new Paint();

TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.myCircleImage, defStyleAttr,0);

@SuppressWarnings("unused")

int leng = array.length();

//获取自定义的属性，这里注意是R.styleable.myCircleImage_circlecolor而不是R.attr.circlecolor

circleBack = array.getColor(R.styleable.myCircleImage_circlecolor,Color.GREEN);

circleHalf = array.getDimension(R.styleable.myCircleImage_half,200.f);

System.out.println(circleBack);

}

/**

* 这个构造参数，当在布局文件中引用该view的时候，必须重写该构造函数

* @param context

* @param attrs

*/

public CirclePro(Context context, AttributeSet attrs) {

this(context, attrs, 0);//调用自己的构造函数

}

/**

* 根据文本的

* @param text

* @param textSize

* @return

*/

public float getTextWidth(String text,float textSize) {

TextPaint textPaint = new TextPaint();

textPaint.setTextSize(textSize);

return textPaint.measureText(text);

}

@Override

protected void onDraw(Canvas canvas) {

// TODO Auto-generated method stub

super.onDraw(canvas);

float height = getHeight();

float width = getWidth();

// float circleHalf = (float) (width*0.7/2);

paint.setColor(circleBack);

paint.setAntiAlias(true);

paint.setStyle(Paint.Style.FILL);

canvas.drawCircle(width/2,height/2,circleHalf, paint);//画实心圆

if (mschedual <= 100) {//，如果当前进度小于100，画实心矩形

paint.setColor(Color.WHITE);

canvas.drawRect(width/2-circleHalf,height/2-circleHalf,width/2+circleHalf,height/2+circleHalf - mschedual*circleHalf/50, paint);

}

//画当前进度的字符串

paint.setColor(Color.BLACK);

paint.setTextSize(30.f);

percent = mschedual+" %";

canvas.drawText(percent, width/2-getTextWidth(percent,30)/2,height/2+paint.getTextSize()*3/8, paint);//字体的高度=paint.getTextSize()*3/4

//画空心圆

paint.setColor(circleBack);

paint.setStyle(Paint.Style.STROKE);

canvas.drawCircle(width/2,height/2,circleHalf, paint);

if (mschedual < 100) {//更改当前进度值，并重绘

mschedual++;

invalidate();

}

}

}

在activity_main.xml中，需要用到自定义的属性，首先添加命名空间： xmlns:liu=”http://schemas.android.com/apk/res/com.example.androidcirclepro”

其中liu是自定义的一个前缀，随意命名的，com.example.androidcirclepro是我们的应用的包名

activity_main.xmln内容如下：

xmlns:tools="http://schemas.android.com/tools"

xmlns:liu="http://schemas.android.com/apk/res/com.example.androidcirclepro"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity" >

android:layout_width="match_parent"

android:layout_height="match_parent"

liu:half="90dp"

liu:circlecolor="#fff0f0"

/>

至此一个自定义的圆形进度条就完成了，是不是很简单。相关阅读:

详解HTML5中的manifest缓存使用

AngularJS在IE8的不支持的解决方法

Android中的Looper对象详细介绍

为何JS操作的href都是javascript:void(0);呢

探究JavaScript函数式编程的乐趣

Oracle 查看表空间的大小及使用情况sql语句

Android 桌面Widget开发要点解析(时间日期Widget)

java实现小型局域网群聊功能(C/S模式)

jQuery判断当前点击的是第几个li的代码

event对象获取方法总结在google浏览器下测试

在ASP.NET 2.0中操作数据之三：创建母版页和站点导航

win8超级按钮和左上角应用切换窗口怎么关闭？

JS留言功能的简单实现案例(推荐)

SQLSERVER简单创建DBLINK操作远程服务器数据库的方法