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:當前到達的進度節點
    }
}

 

源碼下載