微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Android自定义圆环倒计时控件

分类：Android作者：编程之家

本文实例为大家分享了Android自定义圆环倒计时控件的具体代码，供大家参考，具体内容如下

先来一张最终效果图:

Android自定义圆环倒计时控件

主要思路: 在画渐变色圆环的时候,设置一个属性动画,根据属性动画的执行时长,来作为倒计时的时长.监听属性动画的进度,来达到 倒计时的目的.

二话不说,直接贴代码.具体实现思路都在注释上.

自定义属性:

<declare-styleable name="CountDownProgressBar">
    <attr name="countDown_circleWidth" format="dimension" />
    <attr name="countDown_centerTextSize" format="dimension" />
    <attr name="countDown_betaAngle" format="integer" />
    <attr name="countDown_firstColor" format="color" />
    <attr name="countDown_secondColor" format="color" />
    <attr name="countDown_centerTextColor" format="color" />
    <attr name="countDown_isShowGradient" format="boolean" />
</declare-styleable>

主要代码:

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Paint.FontMetricsInt;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.animation.LinearInterpolator;

import com.daodaojk.myapplication.R;

public class CountDownProgressBar extends View {
  /**
   * 进度条最大值
   */
  private int maxValue = 200;

  /**
   * 当前进度值
   */
  private int currentValue ;

  /**
   * 每次扫过的角度，用来设置进度条圆弧所对应的圆心角，alphaAngle=(currentValue/maxValue)*360
   */
  private float alphaAngle;

  /**
   * 底部圆弧的颜色，默认为Color.LTGRAY
   */
  private int firstColor;

  /**
   * 进度条圆弧块的颜色
   */
  private int secondColor;
  /**
   * 中间文字颜色(默认蓝色)
   */
  private int centerTextColor = Color.BLUE;
  /**
   * 中间文字的字体大小(默认40dp)
   */
  private int centerTextSize;

  /**
   * 圆环的宽度
   */
  private int circleWidth;

  /**
   * 画圆弧的画笔
   */
  private Paint circlePaint;

  /**
   * 画文字的画笔
   */
  private Paint textPaint;
  /**
   * 是否使用渐变色
   */
  private boolean isShowGradient = false;

  /**
   * 渐变圆周颜色数组
   */
  private int[] colorArray = new int[]{Color.parseColor("#2773FF"),Color.parseColor("#27C0D2"),Color.parseColor("#40C66E")};
  private int duration;
  private OnFinishListener listener;
  private ValueAnimator animator;

  public CountDownProgressBar(Context context) {
    this(context,null);
  }

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

  public CountDownProgressBar(Context context,AttributeSet attrs,int defStyleAttr) {
    super(context,defStyleAttr);

    TypedArray ta = context.getTheme().obtainStyledAttributes(attrs,R.styleable.CountDownProgressBar,defStyleAttr,0);
    int n = ta.getIndexCount();

    for (int i = 0; i < n; i++) {
      int attr = ta.getIndex(i);
      switch (attr) {
        case R.styleable.CountDownProgressBar_countDown_firstColor:
          firstColor = ta.getColor(attr,Color.LTGRAY); // 默认底色为亮灰色
          break;
        case R.styleable.CountDownProgressBar_countDown_secondColor:
          secondColor = ta.getColor(attr,Color.BLUE); // 默认进度条颜色为蓝色
          break;
        case R.styleable.CountDownProgressBar_countDown_centerTextSize:
          centerTextSize = ta.getDimensionPixelSize(attr,(int) dip2px(40)); // 默认中间文字字体大小为40dp
          break;
        case R.styleable.CountDownProgressBar_countDown_circleWidth:
          circleWidth = ta.getDimensionPixelSize(attr,(int) dip2px(6f)); // 默认圆弧宽度为6dp
          break;
        case R.styleable.CountDownProgressBar_countDown_centerTextColor:
          centerTextColor = ta.getColor(attr,Color.BLUE); // 默认中间文字颜色为蓝色
          break;
        case R.styleable.CountDownProgressBar_countDown_isShowGradient:
          isShowGradient = ta.getBoolean(attr,false); // 默认不适用渐变色
          break;
        default:
          break;
      }
    }
    ta.recycle();

    circlePaint = new Paint();
    circlePaint.setAntiAlias(true); // 抗锯齿
    circlePaint.setDither(true); // 防抖动
    circlePaint.setstrokeWidth(circleWidth);//画笔宽度

    textPaint = new Paint();
    textPaint.setAntiAlias(true);
    textPaint.setDither(true);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) {
    // 分别获取期望的宽度和高度，并取其中较小的尺寸作为该控件的宽和高,并且不超过屏幕宽高
    int widthPixels = this.getResources().getdisplayMetrics().widthPixels;//获取屏幕宽
    int heightPixels = this.getResources().getdisplayMetrics().heightPixels;//获取屏幕高
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int hedight = MeasureSpec.getSize(heightMeasureSpec);
    int minWidth = Math.min(widthPixels,width);
    int minHedight = Math.min(heightPixels,hedight);
    setMeasuredDimension(Math.min(minWidth,minHedight),Math.min(minWidth,minHedight));
  }

  @Override
  protected void onDraw(Canvas canvas) {
    int center = this.getWidth() / 2;
    int radius = center - circleWidth / 2;

    drawCircle(canvas,center,radius); // 绘制进度圆弧
    drawText(canvas,center);
  }

  /**
   * 绘制进度圆弧
   *
   * @param canvas 画布对象
   * @param center 圆心的x和y坐标
   * @param radius 圆的半径
   */
  private void drawCircle(Canvas canvas,int center,int radius) {
    circlePaint.setShader(null); // 清除上一次的shader
    circlePaint.setColor(firstColor); // 设置底部圆环的颜色，这里使用第一种颜色
    circlePaint.setStyle(Paint.Style.stroke); // 设置绘制的圆为空心
    canvas.drawCircle(center,radius,circlePaint); // 画底部的空心圆
    RectF oval = new RectF(center - radius,center - radius,center + radius,center + radius); // 圆的外接正方形
    if (isShowGradient) {
      // 绘制颜色渐变圆环
      // shader类是Android在图形变换中非常重要的一个类。Shader在三维软件中我们称之为着色器，其作用是来给图像着色。
      LinearGradient linearGradient = new LinearGradient(circleWidth,circleWidth,getMeasuredWidth()
          - circleWidth,getMeasuredHeight() - circleWidth,colorArray,null,Shader.TileMode.MIRROR);
      circlePaint.setShader(linearGradient);
    }
    circlePaint.setShadowLayer(10,10,Color.BLUE);
    circlePaint.setColor(secondColor); // 设置圆弧的颜色
    circlePaint.setstrokeCap(Paint.Cap.ROUND); // 把每段圆弧改成圆角的

    alphaAngle = currentValue * 360.0f / maxValue * 1.0f; // 计算每次画圆弧时扫过的角度，这里计算要注意分母要转为float类型，否则alphaAngle永远为0
    canvas.drawArc(oval,-90,alphaAngle,false,circlePaint);
  }

  /**
   * 绘制文字
   *
   * @param canvas 画布对象
   * @param center 圆心的x和y坐标
   */
  private void drawText(Canvas canvas,int center) {
    int result = ((maxValue - currentValue) * (duration / 1000) / maxValue); // 计算进度
    String percent;
    if (maxValue == currentValue) {
      percent = "完成";
      textPaint.setTextSize(centerTextSize); // 设置要绘制的文字大小
    } else {
      percent = (result / 60 < 10 ? "0" + result / 60 : result / 60) + ":" + (result % 60 < 10 ? "0" + result % 60 : result % 60);
//      percent = result+"秒";
      textPaint.setTextSize(centerTextSize+centerTextSize/3); // 设置要绘制的文字大小
    }
    textPaint.setTextAlign(Paint.Align.CENTER); // 设置文字居中，文字的x坐标要注意
    textPaint.setColor(centerTextColor); // 设置文字颜色

    textPaint.setstrokeWidth(0); // 注意此处一定要重新设置宽度为0,否则绘制的文字会重叠
    Rect bounds = new Rect(); // 文字边框
    textPaint.getTextBounds(percent,percent.length(),bounds); // 获得绘制文字的边界矩形
    FontMetricsInt fontMetrics = textPaint.getFontMetricsInt(); // 获取绘制Text时的四条线
    int baseline = center + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom; // 计算文字的基线    canvas.drawText(percent,baseline,textPaint); // 绘制表示进度的文字

  }

  /**
   * 设置圆环的宽度
   *
   * @param width
   */
  public void setCircleWidth(int width) {
    this.circleWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,width,getResources()
        .getdisplayMetrics());
    circlePaint.setstrokeWidth(circleWidth);
    //一般只是希望在View发生改变时对UI进行重绘。invalidate()方法系统会自动调用 View的onDraw()方法。
    invalidate();
  }

  /**
   * 设置圆环的底色，默认为亮灰色LTGRAY
   *
   * @param color
   */
  public void setFirstColor(int color) {
    this.firstColor = color;
    circlePaint.setColor(firstColor);
    //一般只是希望在View发生改变时对UI进行重绘。invalidate()方法系统会自动调用 View的onDraw()方法。
    invalidate();
  }

  /**
   * 设置进度条的颜色，默认为蓝色<br>
   *
   * @param color
   */
  public void setSecondColor(int color) {
    this.secondColor = color;
    circlePaint.setColor(secondColor);
    //一般只是希望在View发生改变时对UI进行重绘。invalidate()方法系统会自动调用 View的onDraw()方法。
    invalidate();
  }

  /**
   * 设置进度条渐变色颜色数组
   *
   * @param colors 颜色数组，类型为int[]
   */
  public void setColorArray(int[] colors) {
    this.colorArray = colors;
    //一般只是希望在View发生改变时对UI进行重绘。invalidate()方法系统会自动调用 View的onDraw()方法。
    invalidate();
  }

  /**
   * 按进度显示百分比，可选择是否启用数字动画
   *
   * @param duration 动画时长
   */
  public void setDuration(int duration,OnFinishListener listener) {
     this.listener = listener;
    this.duration = duration + 1000;
    if (animator != null) {
      animator.cancel();
    } else {
      animator = ValueAnimator.ofInt(0,maxValue);
      animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
          currentValue = (int) animation.getAnimatedValue();
          //一般只是希望在View发生改变时对UI进行重绘。invalidate()方法系统会自动调用 View的onDraw()方法。
          invalidate();
          if (maxValue == currentValue && CountDownProgressBar.this.listener != null) {
            CountDownProgressBar.this.listener.onFinish();
          }
        }
      });
      animator.setInterpolator(new LinearInterpolator());
    }
    animator.setDuration(duration);
    animator.start();
  }

  public interface OnFinishListener {
    void onFinish();
  }

  public void setonFinishListener(OnFinishListener listener) {
    this.listener = listener;
  }

  public static int px2dip(int pxValue) {
    final float scale = Resources.getSystem().getdisplayMetrics().density;
    return (int) (pxValue / scale + 0.5f);
  }

  public static float dip2px(float dipValue) {
    final float scale = Resources.getSystem().getdisplayMetrics().density;
    return (dipValue * scale + 0.5f);
  }
}

xml布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:orientation="vertical">
<Button
  android:layout_width="match_parent"
  android:text="开始"
  android:id="@+id/btn_start"
  android:layout_height="wrap_content" />
  <com.daodaojk.myapplication.view.CountDownProgressBar
    android:id="@+id/cpb_countdown"
    android:layout_width="200dp"
    android:layout_marginTop="100dp"
    android:layout_gravity="center_horizontal"
    app:countDown_centerTextSize="25dp"
    app:countDown_circleWidth="4dp"
    app:countDown_firstColor="@color/text_gray_ccc"
    app:countDown_secondColor="@color/text_blue"
    app:countDown_isShowGradient="true"
    app:countDown_centerTextColor="#2395FF"
    android:layout_height="200dp" />
</LinearLayout>

页面调用:

package com.daodaojk.myapplication.ui;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.daodaojk.myapplication.R;
import com.daodaojk.myapplication.view.CountDownProgressBar;

public class CountDownActivity extends AppCompatActivity {

  private CountDownProgressBar cpb_countdown;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_count_down);
    Button btn_start = findViewById(R.id.btn_start);
    cpb_countdown = (CountDownProgressBar) findViewById(R.id.cpb_countdown);
    btn_start.setonClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        cpb_countdown.setDuration(10000,new CountDownProgressBar.OnFinishListener() {
          @Override
          public void onFinish() {
            Toast.makeText(CountDownActivity.this,"完成了",Toast.LENGTH_SHORT).show();
          }
        });
      }
    });
  }
}

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

原文地址：https://www.jb51.cc/android/526126.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

Android

相关推荐

Android 性能优化——之控件的优化
Android性能优化——之控件的优化 前面讲了图像的优化，接下来分享一下控件的性能优化，这里主要是面向自定义View的优化。 1、首先先说一下我们在自定义View中可能会犯的3个错误： 1）UselesscallstoonDraw()：我们知道调用View.invalidate()会触发Vi...
android TextView描边
前言 上一篇已经讲了如何实现textView中粗字体效果，里面主要重写了onDraw方法。 这一边讲一个进阶功能，实现textView的描边效果。 上效果图。 上代码： 原理讲解： 效果实现思路是：因为系统api只给paint设置strokewidth方法，却没有提供设置描边的色值的方法，而且我们通
GreenDao教程1
最近项目重构，涉及到了数据库和文件下载，发现GreenDao这个框架还是不错的。直接面向对象的，可以通过对对象的操作，实现数据的存储。 但是官网上的API是在不敢恭维，文档写的很糙，看了半天，才搞懂一系列的流程。在此进行一下纪念。免得那天需要修改的时候，一脸懵逼。直接上干货 官网地址：http://
WebView加载页面的两种方式——网络页面和本地页面
WebView加载页面的两种方式 一、加载网络页面 加载网络页面，是最简单的一种方式，只需要传入http的URL就可以，实现WebView加载网络页面 代码如下图： 二、加载本地页面 1、加载assets目录下的HTML页面： 加载assets目录的页面，大多数可以用来做页面数据的存储打包，这样可以
Android 全局使用第三方字体
给APP全局设置字体主要分为两个方面来介绍 一、给原生界面设置第三方字体 1、准备工作-下载第三方字体：传送门 将文件放入工程assets目录下。（一般个人习惯单独命名一个文件夹放字体文件，也可直接放入根目录，但记得改引用路径） 2、代码实现 a、自定义application，将第三方的字体，替换当
Android中粗字体
前言 最近UI大牛出了一版新的效果图，按照IOS的效果做的，页面里面有普通字体、中粗字体、加粗字体。对于IOS的小伙伴，分分钟搞定，但是对于Android开发的我，瞬间懵逼了。WTF！ 安卓只有粗和不粗呀，哪有中粗这回事。硬着头皮做出来一版之后，看到UI嫌弃的表情。深深的刺痛了我的完美心。说啥也要搞
TabLayout基本使用
前言 Tablayout继承自HorizontalScrollView，可以用作顶部标签效果、底部导航栏效果。一般多与ViewPager一起使用。 想直接了解如何实现短下滑效果的请看：TabLayout的高级用法 首先上几个效果图。 图： 使用方法 下面我们来看如何使用， 第一步，先在gradle引
AndroidStudio 各种异常情况处理大法
最近使用AndroidStudio出现了.java文件，显示为xml文件等问题，通过各种采坑之后，发现删除本地的缓存文件这个方法最管用，差不多可以根治95%的莫名其妙的问题。解决办法如下； 先将AS关闭，然后找到你电脑的目录C:\Users\用户名\.AndroidStudio3.5\system\
Android文件各种存储路径的比较
1、File cacheDir = context.getCacheDir(); 应用内部存储空间（数据文件私有）文件存储到这个路径下，不需要申请权限，当应用被卸载的时候，目录下的文件会被删除。 需要注意的是，这个文件的目录和应用的存储位置有关， 当应用被移动到外部存储设备的时候，文件的绝对路径也是
汉诺塔问题
汉诺塔问题 最近面试题遇到过汉诺塔的问题，当时竟然懵逼了，不会了！！大学研究的问题竟然都忘光了，于是抓紧捡起来。然而在网上看了看博客，发现非递归算法还真挺多。下面总结了一下。 一、递归算法 1、递归算法优缺点：递归算法算是最易于理解也是最容易实现的，但是对内存的消耗也是巨大的，因为递归需要系统堆栈来
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot