Android自定義多節(jié)點(diǎn)進(jìn)度條顯示的實(shí)現(xiàn)代碼(附源碼)
親們里面的線段顏色和節(jié)點(diǎn)圖標(biāo)都是可以自定義的。
在沒(méi)給大家分享實(shí)例代碼之前,先給大家展示下效果圖:

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"/> <!-- 節(jié)點(diǎn)數(shù)量 --> <attr name="nodeRadius" format="dimension"/> <attr name="progressingDrawable" format="reference"></attr> <attr name="unprogressingDrawable" format="reference" /> <!-- 未完成的節(jié)點(diǎn)圖標(biāo) --> <attr name="progresFailDrawable" format="reference" /> <attr name="progresSuccDrawable" format="reference" /> <attr name="processingLineColor" format="color"></attr> <attr name="currNodeNO" format="integer"></attr> <!-- 當(dāng)前所到達(dá)的節(jié)點(diǎn)編號(hào) 0開(kāi)始計(jì)算--> <attr name="currNodeState" format="integer"></attr> <!-- 當(dāng)前所到達(dá)的節(jié)點(diǎn)狀態(tài),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;
/**
* 多節(jié)點(diǎn)進(jìn)度條自定義視圖
* @author huqiang
*
*/
public class MutiProgress extends View{
private int nodesNum ; //節(jié)點(diǎn)數(shù)量
private Drawable progressingDrawable; //進(jìn)行中的圖標(biāo)
private Drawable unprogressingDrawable;
private Drawable progresFailDrawable; //失敗的節(jié)點(diǎn)
private Drawable progresSuccDrawable; //成功的節(jié)點(diǎn)
private int nodeRadius; //節(jié)點(diǎn)的半徑
private int processingLineColor; //進(jìn)度條的顏色
// private int progressLineHeight; //進(jìn)度條的高度
private int currNodeNO; //當(dāng)前進(jìn)行到的節(jié)點(diǎn)編號(hào)。從0開(kāi)始計(jì)算
private int currNodeState; //當(dāng)前進(jìn)行到的節(jié)點(diǎn)編號(hào)所對(duì)應(yīng)的狀態(tài) 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); //默認(rèn)一個(gè)節(jié)點(diǎn)
nodeRadius = mTypedArray.getDimensionPixelSize(R.styleable.MutiProgress_nodeRadius, 10); //節(jié)點(diǎn)半徑
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; //當(dāng)前進(jìn)度所到達(dá)的節(jié)點(diǎn)
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) //已完成的進(jìn)度節(jié)點(diǎn)
{
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) //當(dāng)前所到達(dá)的進(jìn)度節(jié)點(diǎn)(終點(diǎn))
{
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 //未完成的進(jìn)度節(jié)點(diǎn)
{
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:當(dāng)前到達(dá)的進(jìn)度節(jié)點(diǎn)
}
}
以上所述是小編給大家介紹的Android自定義多節(jié)點(diǎn)進(jìn)度條顯示的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Android 下載文件通知欄顯示進(jìn)度條功能的實(shí)例代碼
- Android編程實(shí)現(xiàn)顯示在標(biāo)題上的進(jìn)度條功能【附源碼下載】
- Android實(shí)現(xiàn)標(biāo)題上顯示隱藏進(jìn)度條效果
- android多線程斷點(diǎn)下載-帶進(jìn)度條和百分比進(jìn)度顯示效果
- Android多線程+單線程+斷點(diǎn)續(xù)傳+進(jìn)度條顯示下載功能
- Android使用AsyncTask下載圖片并顯示進(jìn)度條功能
- Android 進(jìn)度條顯示在標(biāo)題欄的實(shí)現(xiàn)方法
- Android上傳文件到服務(wù)端并顯示進(jìn)度條
- Android實(shí)現(xiàn)支持進(jìn)度條顯示的短信備份工具類
- android實(shí)現(xiàn)動(dòng)態(tài)顯示隱藏進(jìn)度條
相關(guān)文章
Android實(shí)戰(zhàn)教程第二篇之簡(jiǎn)單實(shí)現(xiàn)兩種進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)戰(zhàn)教程第二篇,簡(jiǎn)單實(shí)現(xiàn)兩種進(jìn)度條效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
Android開(kāi)發(fā)之資源目錄assets與res/raw的區(qū)別分析
這篇文章主要介紹了Android開(kāi)發(fā)之資源目錄assets與res/raw的區(qū)別,結(jié)合實(shí)例形式分析了Android開(kāi)發(fā)中資源目錄assets與res/raw的具體功能、使用方法與區(qū)別,需要的朋友可以參考下2016-01-01
Android權(quán)限操作之uses-permission詳解
這篇文章主要介紹了Android權(quán)限操作之uses-permission,較為詳細(xì)的分析了uses-permission常見(jiàn)權(quán)限操作類型與功能,需要的朋友可以參考下2016-10-10
Android開(kāi)發(fā)中的幾種網(wǎng)絡(luò)請(qǐng)求方式詳解
本篇文章主要包括Android中的幾種網(wǎng)絡(luò)請(qǐng)求方式詳解,具有一定的參考價(jià)值,有需要的可以了解一下。2016-11-11
使用android-apktool來(lái)逆向(反編譯)APK包方法介紹
這篇文章主要介紹了使用android-apktool來(lái)逆向(反編譯)APK包方法介紹,本文講解了版本問(wèn)題、使用apktool、反編譯decode、rebuild重打包等內(nèi)容,需要的朋友可以參考下2015-04-04
Android Studio 4.1沒(méi)有GsonFormat插件的解決
這篇文章主要介紹了Android Studio 4.1沒(méi)有GsonFormat插件的解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Android實(shí)現(xiàn)修改狀態(tài)欄背景、字體和圖標(biāo)顏色的方法
本篇文章主要介紹了Android實(shí)現(xiàn)修改狀態(tài)欄背景、字體和圖標(biāo)顏色的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09

