ITPub博客

首页 > IT职业 > IT生活 > Android自定义圆形进度条实现代码

Android自定义圆形进度条实现代码

IT生活 作者:jockeyw 时间:2021-09-09 09:37:48 0 删除 编辑

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

图片描述

基本思路是这样的:

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 

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

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

activity_main.xmln内容如下:



    

至此一个自定义的圆形进度条就完成了,是不是很简单。源码下载

原文链接:http://www.codeceo.com/article/android-circle-prograssbar.html

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2063/viewspace-2811041/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-16

  • 博文量
    73
  • 访问量
    554