Android实现自定义圆形进度条

 更新时间:2016年03月29日 14:31:25   投稿:lijiao  
这篇文章主要介绍了Android自定义圆形进度条实现代码,进度条在Android中教程经常使用到,本文向大家分享了Android实现自定义圆形进度条的代码,感兴趣的小伙伴们可以参考一下

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

基本思路是这样的:

1.首先绘制一个实心圆

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

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

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

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

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

首先看看自定义的属性

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

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

<?xml version="1.0" encoding="utf-8"?>
<resources>

  <attr name="circlecolor" format="color"></attr>
  <attr name="half" format="dimension"></attr>

  <declare-styleable name="myCircleImage">
    <attr name="circlecolor"></attr>
    <attr name="half"></attr>
  </declare-styleable>

</resources>


自定义视图

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内容如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  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" >

  <com.example.androidcirclepro.CirclePro
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    liu:half="90dp"
    liu:circlecolor="#fff0f0"
    />

</RelativeLayout>


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

相关文章

  • Android实现平滑翻动效果

    Android实现平滑翻动效果

    这篇文章主要为大家详细介绍了Android实现平滑翻动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 详解Flutter Image组件如何处理图片加载过程中的错误

    详解Flutter Image组件如何处理图片加载过程中的错误

    在Flutter中,Image组件可以通过监听加载过程中的错误来处理图片加载过程中的错误,本文小编将给大家详细介绍了Flutter Image组件是如何处理图片加载过程中的错误,文中有详细的代码示例供大家参考,需要的朋友可以参下
    2023-10-10
  • Android面向单Activity开发示例解析

    Android面向单Activity开发示例解析

    这篇文章主要为大家介绍了Android面向单Activity开发示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Android通过交互实现贝塞尔曲线的绘制

    Android通过交互实现贝塞尔曲线的绘制

    本篇我们将介绍简单的交互式绘图,通过获取触控位置来设定贝塞尔曲线的控制点,从而实现交互式绘制曲线,感兴趣的小伙伴可以了解一下
    2022-05-05
  • Android 圆角边框的实现方式汇总

    Android 圆角边框的实现方式汇总

    这篇文章主要介绍了Android 圆角边框的实现方式汇总的相关资料,需要的朋友可以参考下
    2016-03-03
  • android基于ListView和CheckBox实现多选和全选记录的功能

    android基于ListView和CheckBox实现多选和全选记录的功能

    本篇文章主要介绍了android基于ListView和CheckBox实现多选和全选记录的功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • Android控件SeekBar仿淘宝滑动验证效果

    Android控件SeekBar仿淘宝滑动验证效果

    这篇文章主要为大家详细介绍了Android控件SeekBar仿淘宝滑动验证效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • android打开应用所在的市场页面进行评分操作的方法

    android打开应用所在的市场页面进行评分操作的方法

    这篇文章主要介绍了android打开应用所在的市场页面进行评分操作的方法,涉及Android操作市场页面评分效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • Android开发中Intent.Action各种常见的作用汇总

    Android开发中Intent.Action各种常见的作用汇总

    今天小编就为大家分享一篇关于Android开发中Intent.Action各种常见的作用汇总,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • Android单选按钮RadioButton的使用详解

    Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03

最新评论