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

<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>

<?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>

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:当前到达的进度节点
 }
}