如何在Android應用中利用節點實現一個進度條

如何在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應用中利用節點實現一個進度條問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。