Android中制作进度框和环形进度条的简单实例分享

进度框

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View; 

import java.util.Random; 

public class ObliqueProgressbar extends View { 

  private Paint mPaint;
  private float mProgress; 

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

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

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

    mPaint = new Paint();
    mPaint.setAntiAlias(true);
  } 

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas); 

    if (mProgress == 0) return; 

    //碎片雨
    mPaint.setColor(Color.parseColor("#a96ecb"));
    mPaint.setStrokeWidth(3);
    Random random = new Random();
    int sx, sy;
    for (int i = 0; i < 200; i++) {
      sx = random.nextInt(getWidth() + 10);
      sy = random.nextInt(getHeight() + 10);
//      canvas.drawLine(sx, sy, sx+random.nextInt(5), sy+random.nextInt(5), mPaint);
      canvas.drawCircle(sx, sy, random.nextInt(5) + 1, mPaint);
    } 

    //进度
    mPaint.setColor(Color.parseColor("#6AFFFFFF"));
    mPaint.setStrokeWidth(15);
    float x = mProgress * getWidth();
    for (int i = 0; i < x; i += 30) {
      canvas.drawLine(i - 30, -10, i + 30, getHeight() + 10, mPaint);
    } 

  } 

  public void setProgress(float progress) {
    this.mProgress = progress;
    invalidate();
  }
}

环形进度条

先来看一下效果:

下面直接上代码了:

ckage com.stone.circleprogressbar.view; 

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View; 

import com.stone.circleprogressbar.R; 

public class CircleProgressbar extends View { 

 private float mProgress;
 private int mBarColor;
 private int mTextColor;
 private float mTextSize; 

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

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

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

  TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressbar);
  mBarColor = array.getColor(R.styleable.CircleProgressbar_barColor, Color.GRAY);
  mTextColor = array.getColor(R.styleable.CircleProgressbar_textColor, Color.GRAY);
  mProgress = array.getFloat(R.styleable.CircleProgressbar_progress, 0);
 } 

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 } 

 public void setProgress(float count) {
  mProgress = count;
  invalidate();
 } 

 @Override
 protected void onDraw(Canvas canvas) {
  int w = getWidth();
  int h = getHeight();
  int strokeWidth = 20;
  int radius = w / 2 - strokeWidth / 2;//大圆 半径
  Bitmap barBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
  Paint paint = new Paint();
  paint.setAntiAlias(true); //抗锯齿
  paint.setStrokeWidth(strokeWidth); //描边宽
  paint.setDither(true); //防抖动 

  /* 外边框 */
  Canvas circleCanvas = new Canvas(barBitmap);
  RectF rect = new RectF(0, 0, w, h);
  paint.setColor(Color.argb(0x11, 0xcc, 0xcc, 0xcc));
//  circleCanvas.drawRect(rect, paint); //没啥用 只是看外边框的 

  /* 内圆 */
  paint.setColor(Color.CYAN);
  paint.setShader(new LinearGradient(0, 0, w, h, Color.RED, Color.GREEN, Shader.TileMode.CLAMP));
  circleCanvas.drawCircle(w / 2, h / 2, radius - strokeWidth / 2, paint);
  paint.setShader(null); 

  /* 外圆 */
  paint.setColor(mBarColor);
  paint.setStyle(Paint.Style.STROKE);
  circleCanvas.drawCircle(w / 2, h / 2, radius, paint); 

  /* 圆弧 */
  paint.setShader(new LinearGradient(0, 0, w, h,
    new int[]{Color.GREEN, Color.MAGENTA, Color.CYAN, Color.RED},
    new float[]{0.2f, 0.5f, 0.7f, 1.0f}, Shader.TileMode.CLAMP));
  float cur = mProgress * 360 * 0.01f;
  circleCanvas.drawArc(new RectF(strokeWidth / 2, strokeWidth / 2, w - strokeWidth / 2, h - strokeWidth / 2),
    360 - 45, cur, false, paint);
  paint.setShader(null); 

  /* 文本 */
  paint.setColor(mTextColor);
  if (mTextSize == 0) {
   calcTextSize(paint, w, strokeWidth);
  } else {
   paint.setTextSize(mTextSize);
  }
  paint.setTextAlign(Paint.Align.LEFT);//default
  String percent = mProgress + "%";
  paint.setStyle(Paint.Style.FILL);
  circleCanvas.drawText(percent, w / 2 - paint.measureText(percent) / 2, h / 2 + paint.getTextSize() / 2, paint); 

  canvas.drawBitmap(barBitmap, 0, 0, paint);
 } 

 /**
  * 计算并设置最适合的textSize
  *
  * @param paint
  * @param max 最大宽度
  * @param offset 偏移
  */
 private void calcTextSize(Paint paint, int max, int offset) {
  float width = paint.measureText("99.99%");
  while (width < max * 3 / 5) {
   paint.setTextSize(paint.getTextSize() + 5);
   width = paint.measureText("92.88%") + offset / 2;
  }
  mTextSize = paint.getTextSize();
 } 

}

设置进度刷新显示  调用  setProgress()即可。

时间: 2016-03-28

Android实现环形进度条代码

本文参考借鉴:http://www.jb51.net/article/102983.htm 先上效果图: 自定义控件:AttendanceProgressBar 代码如下: public class AttendanceProgressBar extends View { // 画圆环底部的画笔 private Paint mCirclePaint; // 画圆环的画笔 private Paint mRingPaint; // 画字体的画笔 private Paint mTextPaint; /

Android实现环形进度条的实例

Android实现环形进度条的效果图如下: 自定义控件:AttendanceProgressBar 代码如下: public class AttendanceProgressBar extends View { // 画圆环底部的画笔 private Paint mCirclePaint; // 画圆环的画笔 private Paint mRingPaint; // 画字体的画笔 private Paint mTextPaint; // 圆形颜色 private int mCircleColor

Android项目实战手把手教你画圆形水波纹loadingview

本文实例讲解的是如何画一个满满圆形水波纹loadingview,这类效果应用场景很多,比如内存占用百分比之类的,分享给大家供大家参考,具体内容如下 效果图如下: 预备的知识: 1.贝塞尔曲线    如果你不了解,可以来这里进行基础知识储备:神奇的贝塞尔曲线 2.Paint.setXfermode()  以及PorterDuffXfermode 千万不要被这个b的名字吓到,不熟悉看到可能会认为很难记,其实 只要站在巨人的丁丁上 还是很简单的. 好了 废话不多说 ,跟我一步步来做一个炫酷的view吧

Android应用中炫酷的横向和环形进度条的实例分享

一.概述 最近需要用进度条,秉着不重复造轮子的原则,上github上搜索了一番,看了几个觉得比较好看的ProgressBar,比如:daimajia的等.简单看了下代码,基本都是继承自View,彻彻底底的自定义了一个进度条.盯着那绚丽滚动条,忽然觉得,为什么要通过View去写一个滚动条,系统已经提供了ProgressBar以及属于它的特性,我们没必要重新去构建一个,但是系统的又比较丑,不同版本变现还不一定一样.那么得出我们的目标:改变系统ProgressBar的样子. 对没错,我们没有必要去从0

Android实现计步进度的环形Progress

项目中需要实现一个计步进度的环形Progress,当未达到设定目标时,绘制特定弧度((已实现步数/目标步数)*360°)的圆弧.当已实现步数大于等于目标步数时绘制整个360°圆环. 效果图: 代码实现: 设置已完成步数和目标步数: public void setStep(int stepDone, int stepGoal) { this.stepDone = stepDone; this.stepGoal = stepGoal; int progess = (stepDone * 100) /

Android环形进度条(安卓默认形式)实例代码

Android开发中,有很多的功能在实际应用中都起了很大的作用,比如android进度条的实现方式,下面给大家介绍Android环形进度条(安卓默认形式),具体内容如下所示: .xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_widt

Android 自定义通用的loadingview实现代码

功能 1.显示加载视图,加载失败的时候显示加载失败视图,数据为空时显示数据为空视图,支持为失败视图设置点击事件重新加载数据. 2.支持个性化设置,自定义设置 加载.失败.空数据视图. 先放一张效果图压压惊 实现 实现思路其实就是一个FrameLayout里添加三个布局做处理显示隐藏,自定义视图其实就是替换里面的view ,代码比较简单,如果直接看过我的自定义view系列文章,或者对自定义view有所了解,都很容易看懂,所有直接上代码了. 具体代码 Java 代码 public class Com

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

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

Android实现创意LoadingView动画效果

Android上的热火锅煮萝卜蔬菜的Loading动画效果. 这是一个锅煮萝卜的Loading动画,效果仿照自之前IOS上看到的一个效果,觉得挺有意思,就移植过来了,在此完成了Dialog的样式,方便使用者作为LoadingView去使用. 关键性代码: package yellow5a5.demo.boilingloadingview.View; import android.animation.Animator; import android.animation.AnimatorListen

Android自定义环形LoadingView效果

最近项目有要用到环形的进度条,Github上有一个类似的DashedCircularProgress控件,但是他画的进度是通过设置画笔的虚线效果来实现间隔的:progressPaint.setPathEffect(new DashPathEffect(new float[]{dashWith, dashSpace}, dashSpace));如果内层还有一层圆环,在动态设置时,内层和外层有细微的偏差.于是我在原有基础上改了一个,实现了我要的效果(设置进度时可以选择加动画或者不加动画): 控件实现

android自定义环形对比图效果

本文实例为大家分享了android自定义环形对比图的具体代码,供大家参考,具体内容如下 1.首先在res/values里创建一个attr.xml的文件. <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="AnswerChartView"> <attr name="radius" for

Android自定义滑动删除效果的实现代码

先给大家展示下效果图,如果感觉不错,请参考实现代码: 序言 最近项目中需要用到滑动删除,然后去网上搜了一下,发现现有网上的各种解决办法各式各样,但是还是找不到一个能将所有细节和逻辑处理好的,至于滑动删除部分,我觉得处理的相对比较好的是 QQ(包括处理各种逻辑和细节);最终,苦寻无果,于是决定自己动手,丰衣足食 这篇文章将从现有 Android 滑动删除的痛点,到搭建好一个基本的框架,到最终提供一份完整的 Demo为止,争取为读者提供最大的可定制化 正文 一. 滑动删除的痛点 (1). 现有资料中

android 自定义圆角button效果的实例代码(自定义view Demo)

概述 在平时开发过程中经常会碰到需要使用圆角button的情况,一般也会包括很多其他小功能,比如要在里面添加img,设置不同的圆角大小等. 针对这样的场景,直接使用创建多个shape,定义多个xml文件也是可以实现的.但是如果使用非常频繁,那么直接自定义一个就会来的非常方便. 甚至在一些情况下,不是可以用shape定义的规则图形,比如需要用到贝塞尔曲线等. 如果全局需要这样风格的view,那么自定义一个View是非常必要的. 本文主要是个demo记录,如有需要的读者可以借鉴学习. Demo 主要

Android自定义进度条效果

最近项目中需要在一个功能模块中使用进度条,效果图如下: 上面图片从左到右分别是效果一,效果二,效果三 需求: 以下四点需要实现 1: 当没有没完成进度的时候,显示效果一 2:当进度完成了一部分,显示图二 3:当进度全部完成之后,显示效果三 4:当进度1到进度2需要动画,进度2到进度3需要动画: 同样进度3到进度2或者进度1也需要动画. 刚开始拿到这个东西的时候,考虑了老长时间,觉得还是有技巧的,先说一下思路吧 首先我们,写一个一模一样的底部布局,如下图1: 图一也就是效果一的全部显示, 图三不是

Android自定义View多种效果解析

最近项目里涉及到自定义View的东西还是挺多的,所以打算在自定义View上多花点时间,也顺便分享给大家. 先总结下自定义View的步骤: 1.自定义View的属性 2.在View的构造方法中获得我们自定义的属性 [3.重写onMeasure] 4.重写onDraw 1.首先在我们的res/values/目录下建立一个attrs.xml文件,然后在里面声明我们我们需要的自定义属性 我们定义了矩形的颜色,矩形的高度,矩形的宽度3个属性,format是指该属性的取值类型: 一共有:string,col

Android自定义Dialog内部透明、外部遮罩效果

本文实例为大家分享了Android自定义Dialog遮罩效果的具体代码,供大家参考,具体内容如下 图例: 代码 1.自定义dialog:引入样式和代码指定样式 package com.gxjl.pe.gxjlpesdk.view; import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.support.annotation.NonNull; import

Android自定义ViewGroup实现绚丽的仿支付宝咻一咻雷达脉冲效果

去年春节的时候支付宝推行的集福娃活动着实火的不能再火了,更给力的是春晚又可以全民参与咻一咻集福娃活动,集齐五福就可平分亿元大红包,只可惜没有敬业福--那时候在家没事写了个咻一咻插件,只要到了咻一咻的时间点插件就可以自动的点击咻一咻来咻红包,当时只是纯粹练习这部分技术代码没有公开,后续计划写篇关于插件这方面的文章,扯远了(*^__^*) --我们知道在支付宝的咻一咻页面有个雷达扩散的动画效果,当时感觉动画效果非常棒,于是私下尝试着实现了类似的效果,后来在github发现有大神也写有类似效果,于是读

android自定义view仿今日头条加载文字变色效果

本文实例为大家分享了android自定义view加载文字变色效果的具体代码,供大家参考,具体内容如下 不分析了,很简单,直接贴代码: package com.loading; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import

Android编程实现自定义渐变颜色效果详解

本文实例讲述了Android编程实现自定义渐变颜色效果.分享给大家供大家参考,具体如下: 你是否已经厌恶了纯色的背景呢?那好,Android提供给程序员自定义渐变颜色的接口,让我们的界面炫起来吧. xml定义渐变颜色 首先,你在drawable目录下写一个xml,代码如下 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.