android自定义view制作圆形进度条效果

 更新时间:2017年01月21日 14:48:53   作者:rorntuck7  
这篇文章主要为大家详细介绍了android自定义view制作圆形进度条效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

还是我们自定View的那几个步骤:
1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
[ 3、重写onMesure ]
4、重写onDraw

1、自定义属性:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
 <declare-styleable name="CustomTitleView"> 
  <attr name="mSpeed" format="integer" /> 
  <attr name="mFirstColor" format="color" /> 
  <attr name="mSecondColor" format="color" /> 
  <attr name="mCircleWidth" format="dimension"/> 
  <attr name="textSize" format="dimension"/> 
 </declare-styleable> 
</resources> 

2、在View的构造方法中获得我们自定义的属性

/** 
 * 当前进度 
 */ 
 private int mProgress; 
 /** 
 * 第一圈的颜色 
 */ 
 private int mFirstColor; 
 /** 
 * 第二圈的颜色 
 */ 
 private int mSecondColor; 
 /** 
 * 圈的宽度 
 */ 
 private int mCircleWidth; 
 /** 
 * 速度 
 */ 
 private int mSpeed; 
 /** 
 * 中间进度百分比的字符串的字体 
 */ 
 private float textSize; 
 private boolean isNext = false; 
 private Paint mPaint; 
 
 public CustomTitleView(Context context, AttributeSet attrs) { 
  super(context, attrs); 
  TypedArray typearray = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleView); 
  int count= typearray.getIndexCount(); 
  for(int i=0;i<count;i++){ 
   int attr =typearray.getIndex(i); 
   switch(attr){ 
    case R.styleable.CustomTitleView_mFirstColor: 
     mFirstColor=typearray.getColor(attr,Color.BLACK); 
     break; 
    case R.styleable.CustomTitleView_mSecondColor: 
     mSecondColor=typearray.getColor(attr,Color.RED); 
     break; 
    case R.styleable.CustomTitleView_mCircleWidth: 
     mCircleWidth = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension( 
       TypedValue.COMPLEX_UNIT_PX,20,getResources().getDisplayMetrics())); 
     break; 
 
    case R.styleable.CustomTitleView_textSize: 
     textSize = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension( 
       TypedValue.COMPLEX_UNIT_PX,30,getResources().getDisplayMetrics())); 
     break; 
    case R.styleable.CustomTitleView_mSpeed: 
     mSpeed = typearray.getInt(attr,100);// 默认100 
     break; 
   } 
  } 
  Log.v("----",mSpeed+""); 
  typearray.recycle(); 
  mPaint = new Paint(); 
  new Thread() 
  { 
   public void run() 
   { 
    while (true) 
    { 
     mProgress++; 
     if (mProgress == 360) 
     { 
      mProgress = 0; 
      if (!isNext) 
       isNext = true; 
      else 
       isNext = false; 
     } 
     postInvalidate(); 
     try 
     { 
      Thread.sleep(mSpeed); 
     } catch (InterruptedException e) 
     { 
      e.printStackTrace(); 
     } 
    } 
   }; 
  }.start(); 
 } 

3、直接重写onDraw,这不需要重写onMeasure

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){ 
    super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 } 
 protected void onDraw(Canvas canvas) 
 { 
  /** 
  * 画进度百分比 
  */ 
  mPaint.setStrokeWidth(0); 
  mPaint.setColor(Color.BLACK); 
  mPaint.setTextSize(textSize); 
  mPaint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体 
  int percent = (int)(((float)mProgress / (float)360) * 100); 
  int centre = getWidth() / 2; // 获取圆心的x坐标 
  int radius = centre - mCircleWidth / 2;// 半径 
  float textWidth = mPaint.measureText(percent + "%"); //测量字体宽度,我们需要根据字体的宽度设置在圆环中间 
  canvas.drawText(percent + "%",centre-textWidth/ 2,centre+textSize/2, mPaint); //画出进度百分比 
  mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度 
  mPaint.setAntiAlias(true); // 消除锯齿 
  mPaint.setStyle(Paint.Style.STROKE); // 设置空心 
  RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限 
  if(isNext){ 
   mPaint.setColor(mSecondColor); // 设置圆环的颜色 
   canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环 
   mPaint.setColor(mFirstColor); // 设置圆环的颜色 
   canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧 
  }else{ 
   mPaint.setColor(mFirstColor); // 设置圆环的颜色 
   canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环 
   mPaint.setColor(mSecondColor); // 设置圆环的颜色 
   canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧 
  } 
 } 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:custom="http://schemas.android.com/apk/res-auto" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:padding="20dp" 
 > 
 <view.CustomTitleView 
  android:layout_width="200dp" 
  android:layout_height="400dp" 
  custom:mSpeed="50" 
  custom:mFirstColor="#7300e6" 
  custom:mSecondColor="#39ac39" 
  custom:mCircleWidth="10px" 
  custom:textSize="20px" 
  android:id="@+id/one" 
 /> 
 <view.CustomTitleView 
  android:layout_toEndOf="@id/one" 
  android:layout_width="200dp" 
  android:layout_height="400dp" 
  custom:mSpeed="100" 
  custom:mFirstColor="#0040ff" 
  custom:mSecondColor="#40ff00" 
  custom:mCircleWidth="20px" 
  custom:textSize="30px" 
  /> 
</RelativeLayout> 

效果预览

源码下载:http://xiazai.jb51.net/201701/yuanma/AndroidProgressbar(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android ADB超简单的安装教程(推荐)

    Android ADB超简单的安装教程(推荐)

    adb是Android的一个很重要的调试工具,熟练掌握后可实现很多功能,比如有些手机的解锁、ROOT就会用到adb工具。可很多朋友都说不会安装,所以下面这篇文章主要给大家介绍了关于Android ADB超简单的安装教程,安装非常简单,需要的朋友可以参考下
    2018-07-07
  • Flutter开发通用页面Loading组件示例详解

    Flutter开发通用页面Loading组件示例详解

    这篇文章主要为大家介绍了Flutter开发通用页面Loading组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Android fragment 转场动画创建步骤

    Android fragment 转场动画创建步骤

    在 Android 中,可以使用 setCustomAnimations() 方法来绘制自定义的 Fragment 转场动画,本文分步骤给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Flutter改变状态变量是否必须写在setState回调详解

    Flutter改变状态变量是否必须写在setState回调详解

    这篇文章主要为大家介绍了Flutter改变状态变量是否必须写在setState回调里的原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Android开发重写Animation实现下拉图片后弹射回去效果示例

    Android开发重写Animation实现下拉图片后弹射回去效果示例

    这篇文章主要介绍了Android开发重写Animation实现下拉图片后弹射回去效果,结合实例形式分析了Android自定义类继承Animation实现图片弹射效果的相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • 仿饿了吗点餐界面两个ListView联动效果

    仿饿了吗点餐界面两个ListView联动效果

    这篇文章主要介绍了仿饿了点餐界面2个ListView联动效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • android使用ExpandableListView控件实现小说目录效果的例子

    android使用ExpandableListView控件实现小说目录效果的例子

    这篇文章主要介绍了android使用ExpandableListView控件实现小说目录效果的例子,还可以实现二级列表展示效果,需要的朋友可以参考下
    2014-07-07
  • Android实现圆形图片小工具

    Android实现圆形图片小工具

    这篇文章主要为大家详细介绍了Android实现圆形图片小工具,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Android仿知乎悬浮功能按钮FloatingActionButton效果

    Android仿知乎悬浮功能按钮FloatingActionButton效果

    前段时间在看属性动画,恰巧这个按钮的效果可以用属性动画实现,下面通过本文给大家分享adroid仿知乎悬浮功能按钮FloatingActionButton效果,需要的朋友参考下吧
    2017-04-04
  • Android自定义图片选择器简单版

    Android自定义图片选择器简单版

    这篇文章主要为大家详细介绍了Android自定义图片选择器简单版,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02

最新评论