Android  view自定义实现动态进度条

Android  自定义view实现动态进度条

效果图:

这个是看了梁肖的demo,根据他的思路自己写了一个,但是我写的这个貌似计算还是有些问题,从上面的图就可以看出来,左侧、顶部、右侧的线会有被截掉的部分,有懂得希望能给说一下,改进一下,这个过程还是有点曲折的,不过还是觉得收获挺多的。比如通动画来进行动态的展示(之前做的都是通过Handler进行更新的所以现在换一种思路觉得特别好),还有圆弧的起止角度,矩形区域的计算等!关于绘制我们可以循序渐进,比如最开始先画圆,然后再画周围的线,最后设置动画部分就可以了。不多说了,上代码了。

代码

自定义View

public class ColorProgressBar extends View{
  //下面这两行在本demo中没什么用,只是前几天看别人的代码时学到的按一定尺寸,设置其他尺寸的方式,自动忽略或者学习一下也不错
//  private int defaultStepIndicatorNum= (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,40,getResources().getDisplayMetrics());
//  int mCircleRadius=0.28f*defaultStepIndicatorNum;

  //布局的宽高
  private int mWidth;
  private int mHeight;
  //直径
  private int mDiameter=500;

  //底层圆画笔
  private Paint mPaintbg;
  //顶层圆的画笔
  private Paint mPaintft;
  //周围线的画笔
  private Paint mPaintLine;

  //外层线条的长度
  private int mLongItem=dip2px(20);
  //线条与圆的间距
  private int mDistanceItem=dip2px(10);
  //进度条的最大宽度(取底层进度条与顶层进度条宽度最大的)
  private int mProgressWidth;

  //底层圆的颜色
  private int mBackColor;
  //顶层圆的颜色
  private int mFrontColor;
  //底层圆、顶层圆的宽度
  private float mBackWidth;
  private float mFrontWidth;
  //设置进度
  private float currentvalue;
  //通过动画演示进度
  private ValueAnimator animator;
  private int curvalue;

  public ColorProgressBar(Context context) {
    this(context,null,0);
  }

  public ColorProgressBar(Context context, AttributeSet attrs) {
    this(context, attrs,0);
  }

  public ColorProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.ColorProgressBar);
    mBackColor= ta.getColor(R.styleable.ColorProgressBar_back_color, Color.BLACK);
    mFrontColor=ta.getColor(R.styleable.ColorProgressBar_front_color,mBackColor);
    mBackWidth=ta.getDimension(R.styleable.ColorProgressBar_back_width,dip2px(10));
    mFrontWidth=ta.getDimension(R.styleable.ColorProgressBar_front_width,dip2px(10));
    mProgressWidth=mBackWidth>mFrontWidth?(int)mBackWidth:(int)mFrontWidth;
    //注意释放资源
    ta.recycle();
    init();
  }

  /**
   * 都是画笔初始化
   */
  private void init() {
    mPaintbg=new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaintbg.setStrokeWidth(mProgressWidth);
    mPaintbg.setColor(mBackColor);
    mPaintbg.setStrokeCap(Paint.Cap.ROUND);
    mPaintbg.setStyle(Paint.Style.STROKE);

    mPaintft=new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaintft.setColor(mFrontColor);
    mPaintft.setStyle(Paint.Style.STROKE);
    mPaintft.setStrokeWidth(mFrontWidth);
    mPaintft.setStrokeCap(Paint.Cap.ROUND);

    mPaintLine=new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaintLine.setColor(Color.BLACK);
    mPaintLine.setStrokeWidth(5);

  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//   宽度=高度=(长指针+指针与圆盘的间距+进度条的粗细+半径)*2
    Log.e("测量数据","LongItem:"+mLongItem+"mDistanceItem:"+mDistanceItem+"mProgressWidth:"+mProgressWidth+"mDiameter:"+mDiameter/2);
    mWidth=(int)2*(mLongItem+mDistanceItem+mProgressWidth*2+mDiameter/2);
    mHeight=(int)2*(mLongItem+mDistanceItem+mProgressWidth*2+mDiameter/2);
    Log.e("自定义View","高度"+mHeight+"宽度"+mWidth);
    setMeasuredDimension(mWidth,mHeight);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //绘制底层圆弧,矩形的具体计算见图片
    canvas.drawArc(new RectF(mProgressWidth/2+mDistanceItem+mLongItem,mProgressWidth/2+mDistanceItem+mLongItem,mWidth-mProgressWidth/2-mDistanceItem-mLongItem,mHeight-mProgressWidth/2-mDistanceItem-mLongItem),0,360,true,mPaintbg);
//    SweepGradient gradient=new SweepGradient();
    //绘制边缘线
    canvas.save();
    canvas.rotate(144,mWidth/2,mHeight/2);
    for(int i=0;i<=30;i++){
      canvas.rotate(-9,mWidth/2,mHeight/2);
      if(i%5==0){
        canvas.drawLine(mWidth/2,5,mWidth/2,mLongItem,mPaintbg);
      }else {
        canvas.drawLine(mWidth/2,25,mWidth/2,mLongItem,mPaintLine);
      }
    }

    canvas.restore();
    //给画笔设置渐变
    SweepGradient sweepGradient=new SweepGradient(mWidth/2,mHeight/2,Color.RED,Color.YELLOW);
    mPaintft.setShader(sweepGradient);
    //绘制顶层圆弧,currentvalue在改变时呈现动态效果
    canvas.drawArc(new RectF(mProgressWidth/2+mDistanceItem+mLongItem,mProgressWidth/2+mDistanceItem+mLongItem,mWidth-mProgressWidth/2-mDistanceItem-mLongItem,mHeight-mProgressWidth/2-mDistanceItem-mLongItem),135,currentvalue,false,mPaintft);
    mPaintft.setTextSize(100);
    mPaintft.setTextAlign(Paint.Align.CENTER);
    //绘制文本
    canvas.drawText(String.format("%.0f",currentvalue),mWidth/2,mHeight/2+50,mPaintft);
    invalidate();
  }

  /**
   * 设置动画
   * @param value
   */
  public void setCurrentValue(float value){
//    currentvalue=value;
    animator=ValueAnimator.ofFloat(currentvalue,value);
    animator.setDuration(3000);
    animator.setTarget(currentvalue);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator valueAnimator) {
        currentvalue= (float) valueAnimator.getAnimatedValue();
        curvalue=curvalue/10;
      }
    });
    animator.start();

  }
  private int dip2px(float dip){
    float density=getContext().getResources().getDisplayMetrics().density;
    return (int)(dip*density+0.5f);
  }
}

矩形计算

Activity调用

 @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.colorprogressbar);
    mBtStart1= (Button) findViewById(R.id.bt1);

    bar1= (ColorProgressBar) findViewById(R.id.cp1);

    mBtStart1.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        bar1.setCurrentValue(270);
      }
    });

  }

自定义属性

 <declare-styleable name="ColorProgressBar">
    <attr name="back_color" format="color"></attr>
    <attr name="front_color" format="color"></attr>
    <attr name="back_width" format="dimension"></attr>
    <attr name="front_width" format="dimension"></attr>
  </declare-styleable>

布局

注意:为了使用自定义属性需要添加一行代码(AS)

xmlns:app=http://schemas.android.com/apk/res-auto

布局

<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <Button
      android:id="@+id/bt1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="start1"/>

    <com.demo.demo.networkdemo.colorprogressbar.widget.ColorProgressBar
      android:id="@+id/cp1"
      android:layout_width="232dp"
      android:layout_height="match_parent"
      android:layout_gravity="center_horizontal"
      app:back_color="@color/colorPrimary"
      app:front_color="@color/colorAccent"
      android:background="@mipmap/ic_launcher"/>

  </LinearLayout>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

(0)

相关推荐

  • Android自定义View实现水平带数字百分比进度条

    这个进度条可以反映真实进度,并且完成百分比的文字时随着进度增加而移动的,所在位置也恰好是真实完成的百分比位置,效果如下: 思路如下:第一部分是左侧的蓝色直线,代表已经完成的进度:第二部分是右侧灰色的直线,代表未完成的进度:第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度. 最关键的部分就是要确定百分比文本的确切位置,这里用了paint的getTextBounds方法,得到文本的宽高,然后再精确确定它的位置. view代码如下: public class NumberProgress

  • Android自定义View实现渐变色进度条

    在网上看到一个进度条效果图,非常美观,如下: 进行效果分解: 1.渐变色,看起来颜色变化并不复杂,使用LinearGradient应该可以实现. 2.圆头,无非是画两个圆,外圆使用渐变色的颜色,内圆固定为白色. 3.灰底,还没有走到的进度部分为灰色. 4.进度值,使用文本来显示: 5.弧形的头部,考虑使用直线进行连接,或者使用曲线,例如贝塞尔曲线: 我首先初步实现了进度条的模样,发现样子有了,却不太美观. 反思了一下,我只是个写代码的,对于哪种比例比较美观,是没有清晰的认识的,所以,还是参考原图

  • Android自定义View基础开发之图片加载进度条

    学会了Paint,Canvas的基本用法之后,我们就可以动手开始实践了,先写个简单的图片加载进度条看看. 按照惯例,先看效果图,再决定要不要往下看: 既然看到这里了,应该是想了解这个图片加载进度条了,我们先看具体用法,再看自定义View的实现: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.co

  • Android 自定义view和属性动画实现充电进度条效果

    近期项目中需要使用到一种类似手机电池充电进度的动画效果,以前没学属性动画的时候,是用图片+定时器的方式来完成的,最近一直在学习动画这一块,再加上复习一下自定义view的相关知识点,所以打算用属性动画和自定义view的方式来完成这个功能,将它开源出来,供有需要的人了解一下相关的内容. 本次实现的功能类似下面的效果: 接下来便详细解析一下如何完成这个功能,了解其中的原理,这样就能举一反三,实现其他类似的动画效果了. 详细代码请看大屏幕 https://github.com/crazyandcoder

  • Android自定义View实现环形进度条的思路与实例

    前言 前段时间看到了豆瓣FM的音乐播放界面,有一个环形的进度条,非常的好看,于是想了想,为什么不自己做一个呢,于是就开始了自定义的过程 豆瓣FM的播放界面如下图: 功能分析 虽然功能比较简单,但是仍然需要仔细分析 1.图标外还有一圈圆圈,可以设置宽度 2.圆形进度条和进度条底部,可以设置宽度,颜色等 3.内部有一个圆形图片,可旋转 实现思路分析 1.可以设置宽度的圆圈 这个比较容易,直接在onDraw方法中使用canvas绘制即可,当然,在间距和半径的处理上需要仔细,控件本体其实还是一个长方形,

  • Android自定义View仿华为圆形加载进度条

    View仿华为圆形加载进度条效果图 实现思路 可以看出该View可分为三个部分来实现 最外围的圆,该部分需要区分进度圆和底部的刻度圆,进度部分的刻度需要和底色刻度区分开来 中间显示的文字进度,需要让文字在View中居中显示 旋转的小圆点,小圆点需要模拟小球下落运动时的加速度效果,开始下落的时候慢,到最底部时最快,上来时速度再逐渐减慢 具体实现 先具体细分讲解,博客最后面给出全部源码 (1)首先为View创建自定义的xml属性 在工程的values目录下新建attrs.xml文件 <resourc

  • Android自定义View实现带数字的进度条实例代码

    第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

  • Android如何自定义View实现横向的双水波纹进度条

    目录 思路分析 功能实现 1.绘制圆角背景和圆角矩形边框 2.通过贝塞尔曲线实现双水波 3.设置动画使进度和水波纹变化 结语 网上垂直的水波纹进度条很多,但横向的很少,将垂直的水波纹改为水平的还遇到了些麻烦,现在完善后发布出来,希望遇到的人少躺点坑. 思路分析 整体效果可分为三个,绘制圆角背景和圆角矩形,绘制第一条和第二条水波浪,根据自定义进度变化效果. 功能实现 1.绘制圆角背景和圆角矩形边框 圆角矩形边框: private RectF rectBorder; if (rectBorder =

  • android自定义进度条渐变色View的实例代码

    最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自定义的view,完全脱离了android自带的ProgressView,并且没使用一张图片,这样就能更好的降低程序代码上的耦合性! 下面我贴出代码  ,大概讲解一下实现思路吧! 复制代码 代码如下: package com.spring.progressview; import android.conten

  • Android自定义View实现加载进度条效果

    上一篇文章总结了下自定义View的几个步骤,如果还有不清楚的同学可以先去看看Android自定义View(一),这篇文章和大家分享一下自定义加载进度条,效果如下 下面就以水平的进度条为列进行讲解: 1.首先还是在attrs.xml文件中自定义我们需要的属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="GradientP

随机推荐