Android自定義多節(jié)點進度條顯示的實現(xiàn)代碼(附源碼)
更新時間：2017年03月09日 08:54:42 作者：飛劍
這篇文章主要介紹了Android自定義多節(jié)點進度條顯示的實現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
親們里面的線段顏色和節(jié)點圖標都是可以自定義的。
在沒給大家分享實例代碼之前，先給大家展示下效果圖：
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é)點數(shù)量 --> <attr name="nodeRadius" format="dimension"/> <attr name="progressingDrawable" format="reference"></attr> <attr name="unprogressingDrawable" format="reference" /> <!-- 未完成的節(jié)點圖標 --> <attr name="progresFailDrawable" format="reference" /> <attr name="progresSuccDrawable" format="reference" /> <attr name="processingLineColor" format="color"></attr> <attr name="currNodeNO" format="integer"></attr> <!-- 當前所到達的節(jié)點編號 0開始計算--> <attr name="currNodeState" format="integer"></attr> <!-- 當前所到達的節(jié)點狀態(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é)點進度條自定義視圖
* @author huqiang
*
*/
public class MutiProgress extends View{
private int nodesNum ; //節(jié)點數(shù)量
private Drawable progressingDrawable; //進行中的圖標
private Drawable unprogressingDrawable;
private Drawable progresFailDrawable; //失敗的節(jié)點
private Drawable progresSuccDrawable; //成功的節(jié)點
private int nodeRadius; //節(jié)點的半徑
private int processingLineColor; //進度條的顏色
// private int progressLineHeight; //進度條的高度
private int currNodeNO; //當前進行到的節(jié)點編號。從0開始計算
private int currNodeState; //當前進行到的節(jié)點編號所對應(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); //默認一個節(jié)點
nodeRadius = mTypedArray.getDimensionPixelSize(R.styleable.MutiProgress_nodeRadius, 10); //節(jié)點半徑
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; //當前進度所到達的節(jié)點
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) //已完成的進度節(jié)點
{
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) //當前所到達的進度節(jié)點（終點）
{
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 //未完成的進度節(jié)點
{
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:當前到達的進度節(jié)點
}
}
以上所述是小編給大家介紹的Android自定義多節(jié)點進度條顯示的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)圓弧進度的效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
Android使用listview實現(xiàn)分頁刷新（線程休眠模擬）
這篇文章主要為大家詳細介紹了Android使用listview實現(xiàn)分頁刷新,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Android開發(fā)Viewbinding委托實例詳解
這篇文章主要為大家介紹了Android開發(fā)Viewbinding委托實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了android編程之多線程編程,實例分析了Android多線程程序設(shè)計的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了android實現(xiàn)靜默安裝與卸載的方法,涉及Android權(quán)限與命令行操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
本文主要給大家介紹的是如何一步步的實現(xiàn)Android應(yīng)用APP中加入聊天功能，十分的細致全面，有相同需求的小伙伴快來參考下吧。2015-03-03
Android實現(xiàn)打開手機淘寶并自動識別淘寶口令彈出商品信息功能
最近項目經(jīng)理給我們安排一個活兒，基于Android開發(fā)實現(xiàn)打開手機淘寶，并自動識別淘口令，彈出商品信息，今天小編就抽空給大家分享下這個需求是怎么實現(xiàn)的，需要的朋友參考下吧2017-11-11
這篇文章主要介紹了Android中使用Pull解析器解析XML的方法,與DOM和SAX解析方式相比人們更推崇Pull,需要的朋友可以參考下2016-04-04
Android的ListView多選刪除操作實現(xiàn)代碼
這篇文章主要為大家詳細介紹了Android的ListView多選刪除操作實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
AndroidStudio實現(xiàn)微信界面設(shè)計
這篇文章帶你通過Androidstudio來實現(xiàn)微信的基礎(chǔ)界面，微信的界面主要包含了主頁、通訊錄、發(fā)現(xiàn)以及我的賬號功能區(qū)，下文包含了整個開發(fā)過程，以及解決該問題的過程及思路并提供了源碼2021-10-10