Android自定义多节点进度条显示的实现代码(附源码)

亲们里面的线段颜色和节点图标都是可以自定义的。

在没给大家分享实例代码之前,先给大家展示下效果图:

main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/rl_parent"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:background="#ffffff"
 tools:context=".MainActivity" xmlns:app="http://schemas.android.com/apk/res/com.demo.demomutiprogress">
 <com.demo.demomutiprogress.MutiProgress
 android:id="@+id/mp_1"
 android:layout_width="match_parent"
 android:layout_height="100dp"
 app:nodesNum="4"
 app:currNodeState="1"
 app:currNodeNO="2"
 app:nodeRadius="10dp"
 app:processingLineColor="#7B68EE"
 app:unprogressingDrawable="@drawable/ic_round_ddd"
 app:progressingDrawable="@drawable/ic_completed"
 app:progresFailDrawable="@drawable/ic_error"
 app:progresSuccDrawable="@drawable/ic_checked"/>
 <com.demo.demomutiprogress.MutiProgress
 android:id="@+id/mp_2"
 android:layout_below="@+id/mp_1"
 android:layout_marginTop="20dp"
 android:layout_width="match_parent"
 android:layout_height="30dp"
 app:nodesNum="10"
 app:currNodeState="1"
 app:currNodeNO="6"
 app:nodeRadius="6dp"
 app:processingLineColor="#7B68EE"
 app:progressingDrawable="@drawable/ic_completed"
 app:unprogressingDrawable="@drawable/ic_round_ddd"
 app:progresFailDrawable="@drawable/ic_error"
 app:progresSuccDrawable="@drawable/ic_checked"/>
 <com.demo.demomutiprogress.MutiProgress
 android:id="@+id/mp_3"
 android:layout_below="@+id/mp_2"
 android:layout_marginTop="20dp"
 android:layout_width="match_parent"
 android:layout_height="50dp"
 app:nodesNum="15"
 app:currNodeState="0"
 app:currNodeNO="10"
 app:nodeRadius="4dp"
 app:processingLineColor="#FF00FF"
 app:progressingDrawable="@drawable/ic_completed"
 app:unprogressingDrawable="@drawable/ic_round_ddd"
 app:progresFailDrawable="@drawable/ic_error"
 app:progresSuccDrawable="@drawable/ic_checked"/>
</RelativeLayout>

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="MutiProgress">
 <attr name="nodesNum" format="integer"/> <!-- 节点数量 -->
 <attr name="nodeRadius" format="dimension"/>
 <attr name="progressingDrawable" format="reference"></attr>
 <attr name="unprogressingDrawable" format="reference" /> <!-- 未完成的节点图标 -->
 <attr name="progresFailDrawable" format="reference" />
 <attr name="progresSuccDrawable" format="reference" />
 <attr name="processingLineColor" format="color"></attr>
 <attr name="currNodeNO" format="integer"></attr> <!-- 当前所到达的节点编号 0开始计算-->
 <attr name="currNodeState" format="integer"></attr> <!-- 当前所到达的节点状态,0:失败 1:成功 -->
 </declare-styleable>
</resources>

MutiProgress.java

package com.demo.demomutiprogress;
import java.util.ArrayList;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
/**
 * 多节点进度条自定义视图
 * @author huqiang
 *
 */
public class MutiProgress extends View{
 private int nodesNum ; //节点数量
 private Drawable progressingDrawable; //进行中的图标
 private Drawable unprogressingDrawable;
 private Drawable progresFailDrawable; //失败的节点
 private Drawable progresSuccDrawable; //成功的节点
 private int nodeRadius; //节点的半径
 private int processingLineColor; //进度条的颜色
// private int progressLineHeight; //进度条的高度
 private int currNodeNO; //当前进行到的节点编号。从0开始计算
 private int currNodeState; //当前进行到的节点编号所对应的状态 0:失败 1:成功
// private int textSize; //字体大小
 Context mContext;
 int mWidth,mHeight;
 private Paint mPaint;
 private Canvas mCanvas;
 private Bitmap mBitmap; //mCanvas绘制在这上面
 private ArrayList<Node> nodes;
 private int DEFAULT_LINE_COLOR = Color.BLUE;
 public MutiProgress(Context context) {
 this(context,null);
 }
 public MutiProgress(Context context, AttributeSet attrs) {
 this(context,attrs,0);
 }
 public MutiProgress(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 mContext = context;
 TypedArray mTypedArray = context.obtainStyledAttributes(attrs,R.styleable.MutiProgress);
 nodesNum = mTypedArray.getInteger(R.styleable.MutiProgress_nodesNum, 1); //默认一个节点
 nodeRadius = mTypedArray.getDimensionPixelSize(R.styleable.MutiProgress_nodeRadius, 10); //节点半径
 progressingDrawable = mTypedArray.getDrawable(R.styleable.MutiProgress_progressingDrawable);
 unprogressingDrawable = mTypedArray.getDrawable(R.styleable.MutiProgress_unprogressingDrawable);
 progresFailDrawable = mTypedArray.getDrawable(R.styleable.MutiProgress_progresFailDrawable);
 progresSuccDrawable = mTypedArray.getDrawable(R.styleable.MutiProgress_progresSuccDrawable);
 processingLineColor = mTypedArray.getColor(R.styleable.MutiProgress_processingLineColor, DEFAULT_LINE_COLOR);
 currNodeState = mTypedArray.getInt(R.styleable.MutiProgress_currNodeState, 1);
 currNodeNO = mTypedArray.getInt(R.styleable.MutiProgress_currNodeNO, 1);
 }
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 mWidth = getMeasuredWidth();
 mHeight = getMeasuredHeight();
 mBitmap = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);
 mPaint = new Paint();
 mPaint.setColor(processingLineColor);
 mPaint.setAntiAlias(true);
 mPaint.setStrokeJoin(Paint.Join.ROUND); // 圆角
 mPaint.setStrokeCap(Paint.Cap.ROUND); // 圆角
 mCanvas = new Canvas(mBitmap);
 nodes = new ArrayList<MutiProgress.Node>();
 float nodeWidth = ((float)mWidth)/(nodesNum-1);
 for(int i=0;i<nodesNum;i++)
 {
  Node node = new Node();
  if(i==0)
  node.mPoint = new Point(((int)nodeWidth*i),mHeight/2-nodeRadius);
  else if(i==(nodesNum-1))
  node.mPoint = new Point(((int)nodeWidth*i)-nodeRadius*2,mHeight/2-nodeRadius);
  else
  node.mPoint = new Point(((int)nodeWidth*i)-nodeRadius,mHeight/2-nodeRadius);
  if(currNodeNO == i)
  node.type = 1; //当前进度所到达的节点
  else
  node.type = 0; //已完成
  nodes.add(node);
 }
 }
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 DrawProgerss();
 Log.v("ondraw", "mBitmap="+mBitmap);
 if(mBitmap!=null)
 {
  canvas.drawBitmap(mBitmap, new Rect(0,0,mBitmap.getWidth(),mBitmap.getHeight()), new Rect(0,0,mBitmap.getWidth(),mBitmap.getHeight()), mPaint);
 }
 for(int i=0;i<nodes.size();i++)
 {
  Node node = nodes.get(i);
  Log.v("ondraw", node.mPoint.x +";y="+node.mPoint.y);
  if(i<currNodeNO) //已完成的进度节点
  {
  progressingDrawable.setBounds(node.mPoint.x, node.mPoint.y , node.mPoint.x + nodeRadius*2,node.mPoint.y + nodeRadius*2);
  progressingDrawable.draw(canvas);
  }
  else if(i==currNodeNO) //当前所到达的进度节点(终点)
  {
  if(currNodeState == 1) //判断是成功还是失败 0 :失败 1:成功
  {
   progresSuccDrawable.setBounds(node.mPoint.x, node.mPoint.y , node.mPoint.x + nodeRadius*2,node.mPoint.y + nodeRadius*2);
   progresSuccDrawable.draw(canvas);
  }
  else
  {
   progresFailDrawable.setBounds(node.mPoint.x, node.mPoint.y , node.mPoint.x + nodeRadius*2,node.mPoint.y + nodeRadius*2);
   progresFailDrawable.draw(canvas);
  }
  }
  else //未完成的进度节点
  {
  unprogressingDrawable.setBounds(node.mPoint.x, node.mPoint.y , node.mPoint.x + nodeRadius*2,node.mPoint.y + nodeRadius*2);
  unprogressingDrawable.draw(canvas);
  }
 }
 }
 private void DrawProgerss()
 {
 //先画背景
 Paint bgPaint = new Paint();
 bgPaint.setColor(Color.parseColor("#f0f0f0"));
 mCanvas.drawRect(0, 0, mWidth, mHeight, bgPaint);
 //先画线段,线段的高度为nodeRadius/2
 mPaint.setStrokeWidth(nodeRadius/2);
 //前半截线段
// mCanvas.drawLine(nodeRadius, mHeight/2, mWidth-nodeRadius, mHeight/2, mPaint); //线段2端去掉nodeRadius
 mCanvas.drawLine(nodeRadius, mHeight/2, nodes.get(currNodeNO).mPoint.x + nodeRadius, nodes.get(currNodeNO).mPoint.y + nodeRadius, mPaint); //线段2端去掉nodeRadius
 //后半截线段
 mPaint.setColor(Color.parseColor("#dddddd"));
 mCanvas.drawLine(nodes.get(currNodeNO).mPoint.x +nodeRadius, nodes.get(currNodeNO).mPoint.y + nodeRadius, mWidth-nodeRadius, mHeight/2, mPaint); //线段2端去掉nodeRadius
 }
 class Node
 {
 Point mPoint;
 int type; //0:已完成 1:当前到达的进度节点
 }
}

源码下载点击此处

以上所述是小编给大家介绍的Android自定义多节点进度条显示的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android实现支持进度条显示的短信备份工具类

    使用内容提供者读取短信内容,写入XML文件,进度条ProgressDialog更新备份进度. 新知识点:子线程如何在在不使用Handler的情况下更新UI /** * 进行短信备份的工具类,支持进度条显示 * @author lian * */ public class SmsBackupUtils { private static class Data{ int progress; } /** * * @param context * 调用此工具类的Activity * @param pd *

  • Android使用AsyncTask下载图片并显示进度条功能

    在Android中实现异步任务机制有两种方式,Handler和AsyncTask.这篇文章给大家介绍Android使用AsyncTask下载图片并显示进度条功能. AsyncTask下载图片并显示下载进度,异步类AsyncTask配合进度条,简练! public class AsyncTaskActivity2 extends Activity { private Button btnDown;//图片框 private ImageView ivImage;//图片URL private sta

  • Android 进度条显示在标题栏的实现方法

    好吧,先给大家展示效果图: xml文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" > <Butt

  • Android开发之activiti节点跳转

    activiti使用的时候,通常需要跟业务紧密的结合在一起,有些业务非常的复杂,比如一个简单的采购流程:流程如下: 供应商上新商品的时候,提交商务审核,商务审核通过提交运营审核,审核失败退回供应商. 运营审核成功提交合同签订.交运营审核审核失败退回商务审核或者直接退回供应商. 合同签订审核通过结束,合同签订审核不通过返回运营审核或者退回商务审核,或者退回供应商. 上面的流程就出现了一个问题,什么问题呢? 我们来观察一下退回线的问题. 1.商务审核退回供应商上新. 2.运营审核可能退回商务审核,运

  • Android上传文件到服务端并显示进度条

    最近在做上传文件的服务,简单看了网上的教程.结合实践共享出代码. 由于网上的大多数没有服务端的代码,这可不行呀,没服务端怎么调试呢. Ok,先上代码. Android 上传比较简单,主要用到的是 HttpURLConnection 类,然后加一个进度条组件. private ProgressBar mPgBar; class UploadTask extends AsyncTask<Object,Integer,Void>{ private DataOutputStream outputStr

  • Android自定义多节点进度条显示的实现代码(附源码)

    亲们里面的线段颜色和节点图标都是可以自定义的. 在没给大家分享实例代码之前,先给大家展示下效果图: main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rl_parent" xmlns:tools="http://schemas.android.com/tools" android:layou

  • Android自定义View实现进度条动画

    本文实例为大家分享了Android自定义View实现进度条动画的具体代码,供大家参考,具体内容如下 控件效果 原理: 控制代码/ /更新进度值 val mHandler = object : Handler() {         override fun handleMessage(msg: Message?) {             progressView.setCurrentProgress(progress1.toFloat())         }     } //开启动画,更新

  • Android自定义带有圆形进度条的可长按控件功能

    这几天有在学习Jetpack中CameraX的内容,在拍摄视频的时候想着做一个自定义带有进度条的可长按控件,用来显示拍摄进度,故记录下来与大家分享!效果如下: (篇幅过长是因为有代码解析过程,可直接到最后查看完整代码) 这个控件较为简易,从效果中可以看出,控件模拟了单击拍照,长按可以录制视频的功能,中途松手或者时间到都可以停止录制 思路很简单,使用简单的画笔工具就可以完成这个控件 继承自View 定义自定义属性并获取 定义填充样式的画笔 onMeasure中测量大小,onDraw中绘制圆与扇形

  • Android 自定义view实现进度条加载效果实例代码

    这个其实很简单,思路是这样的,就是拿view的宽度,除以点的点的宽度+二个点 之间的间距,就可以算出大概能画出几个点出来,然后就通过canvas画出点,再然后就是每隔多少时间把上面移动的点不断的去改变它的坐标就可以, 效果如下: 分析图: 代码如下: package com.example.dotloadview; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bit

  • Android多线程+单线程+断点续传+进度条显示下载功能

    效果图 白话分析: 多线程:肯定是多个线程咯 断点:线程停止下载的位置 续传:线程从停止下载的位置上继续下载,直到完成任务为止. 核心分析: 断点: 当前线程已经下载的数据长度 续传: 向服务器请求上次线程停止下载位置的数据 con.setRequestProperty("Range", "bytes=" + start + "-" + end); 分配线程: int currentPartSize = fileSize / mThreadNum

  • Android新建水平节点进度条示例

    目录 前言 效果图 圆圈和文字状态 文字居中 代码 声明下style 接着创建布局文件 再Activity中使用它 mTextList数据集合 前言 效果图 前几天在网上没有找到合适的横向节点进度条,自己动手写了一个,先来看看效果图 圆圈和文字状态 我们看到小圆圈和文字有几种状态呢? 第一个空心的小圆圈是处理完成的状态 第二个实心的小圆圈是处理中的状态 第三个实心的小圆圈是待处理的状态没错,我们看到了小圆圈和文字有三种处理状态 文字居中 我们写一个类继承自AppCompatTextView,通过

  • Android自定义圆环式进度条

    安卓自定义圆环式进度条,供大家参考,具体内容如下 需求是实现一个圆环式中间带有进度的进度条,自己动手实现一个 package com.djt.aienglish.widget; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Rec

  • Android自定义水平渐变进度条

    先看进度条的效果: 具体实现: 新建类,继承自View,在onDraw中进行绘制: import android.content.Context; import android.graphics.Canvas; import android.graphics.LinearGradient; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Shader; import and

  • Android自定义View圆形进度条控件(三)

    继续练习自定义View,这次带来的圆形进度条控件与之前的圆形百分比控件大同小异,这次涉及到了渐变渲染以及画布旋转等知识点,效果如下: 虽然步骤类似,但是我还是要写,毕竟基础的东西就是要多练 1.在res/values文件夹下新建attrs.xml文件,编写自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="Circ

  • Android自定义分段式进度条

    安卓自定义分段式的进度条,供大家参考,具体内容如下 前一段时间公司新项目接到一个新需求,其中界面需要用到一个分段式的进度条,找了半天没有发现类似的控件,于是决定自己写一个,话不多说,上代码 package com.djt.aienglish.widget; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.gra

随机推荐