热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

android实现圆形渐变进度条

这篇文章主要为大家详细介绍了android实现圆形渐变进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近项目中使用到了渐变效果的圆形进度条,网上找了很多渐变效果不够圆滑,两个渐变颜色之间有明显的过渡,或者有些代码画出来的效果过渡不美观,于是自己参照写了一个,喜欢的朋友可以参考或者直接使用。

先上一张效果图,视频录制不太好,不过不影响效果

下面开始介绍实现代码,比较简单,直接贴代码吧

1、声明自定义属性

在项目的valuse文件夹下新建attrs.xml,在里面定义自定义控件需要的属性


    
    
    
    
    
    
    

2、自定义一个进度条RoundProgres继承view类

package com.blankj.progressring;

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.LinearInterpolator;

import org.jetbrains.annotations.Nullable;

/**
 * 类描述:渐变的圆形进度条
 *
 * @author:lusy
 * @date :2018/10/17
 */
public class RoundProgress extends View {
  private static final String TAG = "roundProgress";
  /**
   * 背景圆环画笔
   */
  private Paint bgPaint;
  /**
   * 白色标记画笔
   */
  private Paint iconPaint;
  /**
   * 进度画笔
   */
  private Paint progressPaint;
  /**
   * 进度文本画笔
   */
  private Paint textPaint;
  /**
   * 背景圆环的颜色
   */
  private int bgColor;
  /**
   * 线条进度的颜色
   */
  private int iconColor;

  private int[] progressColor;
  /**
   * 中间进度百分比的字符串的颜色
   */
  private int textColor;
  /**
   * 中间进度百分比的字符串的字体大小
   */
  private float textSize;
  /**
   * 圆环的宽度
   */
  private float roundWidth;
  /**
   * 最大进度
   */
  private int max;
  /**
   * 当前进度
   */
  private float progress;
  /**
   * 是否显示中间的进度
   */
  private boolean textIsDisplayable;
  /**
   * 圆环半径
   */
  private int mRadius;
  private int center;

  private float startAngle = -90;
  private float currentAngle;
  private float currentProgress;

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

  public RoundProgress(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgress);

    //获取自定义属性和默认值
    bgColor = mTypedArray.getColor(R.styleable.RoundProgress_bgColor, Color.parseColor("#2d2d2d"));
    icOnColor= mTypedArray.getColor(R.styleable.RoundProgress_lineColor, Color.parseColor("#ffffff"));
    textColor = mTypedArray.getColor(R.styleable.RoundProgress_textColor, Color.parseColor("#ffffff"));
    textSize = mTypedArray.getDimension(R.styleable.RoundProgress_textSize, 15);
    roundWidth = mTypedArray.getDimension(R.styleable.RoundProgress_roundWidth, 5);
    max = mTypedArray.getInteger(R.styleable.RoundProgress_maxProgress, 100);
    textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgress_textIsDisplayable, true);
    progressColor = new int[]{Color.parseColor("#747eff"), Color.parseColor("#0018ff"), Color.TRANSPARENT};
    mTypedArray.recycle();
    initPaint();
  }

  public RoundProgress(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }


  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    //测量控件应占的宽高大小,此处非必需,只是为了确保布局中设置的宽高不一致时仍显示完整的圆
    int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
    int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
    setMeasuredDimension(Math.min(measureWidth, measureHeight), Math.min(measureWidth, measureHeight));
  }

  private void initPaint() {

    bgPaint = new Paint();
    bgPaint.setStyle(Paint.Style.STROKE);
    bgPaint.setAntiAlias(true);
    bgPaint.setColor(bgColor);
    bgPaint.setStrokeWidth(roundWidth);

    icOnPaint= new Paint();
    iconPaint.setStyle(Paint.Style.STROKE);
    iconPaint.setAntiAlias(true);
    iconPaint.setColor(iconColor);
    iconPaint.setStrokeWidth(roundWidth);

    progressPaint = new Paint();
    progressPaint.setStyle(Paint.Style.STROKE);
    progressPaint.setAntiAlias(true);
    progressPaint.setStrokeWidth(roundWidth);

    textPaint = new Paint();
    textPaint.setStyle(Paint.Style.STROKE);
    textPaint.setTypeface(Typeface.DEFAULT_BOLD);
    textPaint.setAntiAlias(true);
    textPaint.setColor(textColor);
    textPaint.setTextSize(textSize);
    textPaint.setStrokeWidth(0);


  }

  @Override
  protected void onDraw(Canvas canvas) {
    /**
     * 画最外层的大圆环
     */
    //获取圆心的x坐标
    center = Math.min(getWidth(), getHeight()) / 2;
    // 圆环的半径
    mRadius = (int) (center - roundWidth / 2);

    RectF oval = new RectF(center - mRadius, center - mRadius, center + mRadius, center + mRadius);
    //画背景圆环
    canvas.drawArc(oval, startAngle, 360, false, bgPaint);
    //画进度圆环
    drawProgress(canvas, oval);

    canvas.drawArc(oval, startAngle, currentAngle, false, progressPaint);
    //画白色圆环
    float start = startAngle + currentAngle - 1;
    canvas.drawArc(oval, start, 3, false, iconPaint);

    //百分比文字
    int percent = (int) (((float) progress / (float) max) * 100);
    //测量字体宽度,我们需要根据字体的宽度设置在圆环中间
    String text = String.valueOf(percent)+"%";
    Rect textRect = new Rect();
    textPaint.getTextBounds(text, 0, text.length(), textRect);
    if (textIsDisplayable && percent >= 0) {
      //画出进度百分比文字
      float x = (getWidth() - textRect.width()) / 2;
      float y = (getHeight() + textRect.height()) / 2;
      canvas.drawText(text, x, y, textPaint);
    }
    if (currentProgress  100) {
      percent = 100;
    }
    //使用动画
    if (useAnima) {
      ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, percent);
      valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
          progress = (float) animation.getAnimatedValue();
          postInvalidate();
        }
      });
      valueAnimator.setInterpolator(new LinearInterpolator());
      valueAnimator.setDuration(1500);
      valueAnimator.start();
    } else {
      this.progress = percent;
      postInvalidate();
    }
  }


  public int getTextColor() {
    return textColor;
  }

  public void setTextColor(int textColor) {
    this.textColor = textColor;
  }

  public float getTextSize() {
    return textSize;
  }

  public void setTextSize(float textSize) {
    this.textSize = textSize;
  }

  public float getRoundWidth() {
    return roundWidth;
  }

  public void setRoundWidth(float roundWidth) {
    this.roundWidth = roundWidth;
  }

  public int[] getProgressColor() {
    return progressColor;
  }

  public void setProgressColor(int[] progressColor) {
    this.progressColor = progressColor;
    postInvalidate();
  }

  public int getBgColor() {
    return bgColor;
  }

  public void setBgColor(int bgColor) {
    this.bgColor = bgColor;
  }

  public int getIconColor() {
    return iconColor;
  }

  public void setIconColor(int iconColor) {
    this.icOnColor= iconColor;
  }

  public boolean isTextIsDisplayable() {
    return textIsDisplayable;
  }

  public void setTextIsDisplayable(boolean textIsDisplayable) {
    this.textIsDisplayable = textIsDisplayable;
  }

  public int getmRadius() {
    return mRadius;
  }

  public void setmRadius(int mRadius) {
    this.mRadius = mRadius;
  }

  public int getCenter() {
    return center;
  }

  public void setCenter(int center) {
    this.center = center;
  }

  public float getStartAngle() {
    return startAngle;
  }

  public void setStartAngle(float startAngle) {
    this.startAngle = startAngle;
  }
}

3、使用自定义进度条view

activity布局文件使用如下,为了方便测试效果,新增进度加、进度减,修改进度条颜色的按钮

<&#63;xml version="1.0" encoding="utf-8"&#63;>



  

    

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


推荐阅读
  • Android 九宫格布局详解及实现:人人网应用示例
    本文深入探讨了人人网Android应用中独特的九宫格布局设计,解析其背后的GridView实现原理,并提供详细的代码示例。这种布局方式不仅美观大方,而且在现代Android应用中较为少见,值得开发者借鉴。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文详细介绍了如何使用PHP检测AJAX请求,通过分析预定义服务器变量来判断请求是否来自XMLHttpRequest。此方法简单实用,适用于各种Web开发场景。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 本文将详细介绍如何使用剪映应用中的镜像功能,帮助用户轻松实现视频的镜像效果。通过简单的步骤,您可以快速掌握这一实用技巧。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
author-avatar
可乐加冰2502937787
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有