自定义view实现流程进度的绘制（提现流程进度，转账流程进度等等啦）

相信很多人跟我的经历一样，再csdn上看了很多大牛的文章，受益良多，于是乎决定写博客，分享自己的心得

本篇文章想给大家分享一个前段时间刚做的一个关于提现的流程进度的自定义view（记得以前刚开始做android的时候做这玩意，硬是用图片拼的，神烦）

具体效果看下图



自定义属性文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="reachColor" format="color|reference"></attr>
<attr name="unReachColor" format="color|reference"></attr>
<attr name="reachTextColor" format="color|reference"></attr>
<attr name="unReachTextColor" format="color|reference"></attr>
<attr name="reachTextSize" format="dimension|reference"></attr>
<attr name="unReachTextSize" format="dimension|reference"></attr>
<attr name="radius" format="dimension|reference"></attr>
<attr name="textMargin" format="dimension|reference"></attr>
<declare-styleable name="ProgressLevelView">
<attr name="reachColor" />
<attr name="unReachColor" />
<attr name="reachTextColor" />
<attr name="unReachTextColor" />
<attr name="reachTextSize" />
<attr name="unReachTextSize" />
<attr name="radius" />
<attr name="textMargin" />
</declare-styleable>
</resources>

实现代码

package com.androfarmer.progressview;

/**
* Created by Charles on 2016/6/8.
*/
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
/**
* Created by Charles on 2016/5/19.
*/
class ProgressLevelView extends View {
//当前级别
private int mCurrentLevel;
//总级别
private int mAllLevel;
//圆球的半径 dp
private float mRadius=7;
//线的宽度
private float mLineWidth;
//文字左边的边距
private float mTextLeftMargin=33;
private float mTopBottomPadding;

/**
* 达到当前进度的进度条颜色
*/
private int mReachColor;
/**
* 未达到当前进度的进度条颜色
*/
private int mUnReachColor;
/**
* 达到当前进度字体大小
*/
private float mReachTextSize=16;
/**
* 未达到当前进度字体大小
*/
private float mUnReachTextSize=12;
private int mReachTextColor;
private int mUnReachTextColor;
private List<String> mTextArrays ;
private Paint mPaint;

public ProgressLevelView(Context context) {
this(context, null);
}

public ProgressLevelView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public ProgressLevelView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//        mReachColor = getResources().getColor(R.color.red);
//        mUnReachColor = getResources().getColor(R.color.line_color);
//        mReachTextColor = getResources().getColor(R.color.red);
//        mUnReachTextColor = getResources().getColor(R.color.first_level);
/**
* 获取自定义属性
*/
TypedArray array=context.getTheme().obtainStyledAttributes(attrs,R.styleable.ProgressLevelView,defStyleAttr,0);
mReachColor = array.getColor(R.styleable.ProgressLevelView_reachColor,Color.RED);
mUnReachColor = array.getColor(R.styleable.ProgressLevelView_unReachColor,Color.GRAY);
mReachTextColor =  array.getColor(R.styleable.ProgressLevelView_reachTextColor,Color.RED);
mUnReachTextColor = array.getColor(R.styleable.ProgressLevelView_unReachTextColor,Color.DKGRAY);
mReachTextSize = array.getDimension(R.styleable.ProgressLevelView_reachTextSize,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, mReachTextSize, getResources().getDisplayMetrics()));
mUnReachTextSize = array.getDimension(R.styleable.ProgressLevelView_unReachTextSize,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, mUnReachTextSize, getResources().getDisplayMetrics()));
mRadius = array.getDimension(R.styleable.ProgressLevelView_radius,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mRadius, getResources().getDisplayMetrics()));
mTextLeftMargin = array.getDimension(R.styleable.ProgressLevelView_unReachTextSize,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mTextLeftMargin, getResources().getDisplayMetrics()));
array.recycle();

/**
* 初始化一些参数
*/
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
Paint paint = new Paint();
paint.setTextSize(mReachTextSize);
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
mTopBottomPadding = (fontMetrics.bottom - fontMetrics.top) / 2;
}

/**
* 设置当前级别
* @param currentLevel
* @param textArrays
*/
public void setLevels(int currentLevel, List<String> textArrays) {
this.mCurrentLevel = currentLevel;
this.mTextArrays=textArrays;
this.mAllLevel=mTextArrays.size();
/**
* 根据字符串集合，算出最大宽度
*/
TextPaint mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
List<Integer> list=new ArrayList<Integer>();
for(int i=0;i<mTextArrays.size();i++)
{
mTextPaint.setTextSize(i+1==mCurrentLevel?mReachTextSize:mUnReachTextSize);
int currentLength=(int) (mRadius*2+mTextLeftMargin+mTextPaint.measureText(textArrays.get(i)));
list.add(currentLength);
}
getLayoutParams().width= Collections.max(list);
requestLayout();
invalidate();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(mTextArrays==null||mCurrentLevel<1||mAllLevel<2)
{
return;
}
/**
* 绘制初始状态竖线和圆
*/
mLineWidth = mRadius / 3;
float levelHeight = (getHeight()-mTopBottomPadding*2 - mRadius * 2 * mAllLevel) * 1.0f / (mAllLevel - 1);
mPaint.setColor(mUnReachColor);
mPaint.setStrokeWidth(mLineWidth);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawLine(mRadius, mTopBottomPadding, mRadius, getHeight()-mTopBottomPadding*2, mPaint);
mPaint.setColor(mReachColor);
mPaint.setStrokeWidth(mLineWidth);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawLine( mRadius, getHeight()-mTopBottomPadding - (2 * mRadius * (mCurrentLevel - 1) + levelHeight * (mCurrentLevel - 1)),mRadius, getHeight()-mTopBottomPadding*2, mPaint);
float y;
for (int i = 0; i < mAllLevel; i++) {
y = (2 * i + 1) * mRadius + i * levelHeight+mTopBottomPadding;
canvas.save();
canvas.rotate(-40, mRadius, y);
mPaint.setColor(mUnReachColor);
mPaint.setStrokeWidth(mLineWidth);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(mRadius, y, mRadius, mPaint);
Path path = new Path();
path.moveTo(mRadius * 0.7f, y - mRadius * 0.5f);
path.lineTo(mRadius * 0.7f, y + mRadius * 0.2f);
path.lineTo(mRadius * 1.7f, y + mRadius * 0.2f);
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(mLineWidth / 2);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawPath(path, mPaint);
canvas.restore();
}

/**
* 根据当前进度竖线和圆
*/
for (int i = 0; i &l
4000
t; mCurrentLevel; i++) {
y = getHeight()-mTopBottomPadding*2 - ((2 * i + 1) * mRadius + i * levelHeight)+mTopBottomPadding;
canvas.save();
canvas.rotate(-40, mRadius, y);
mPaint.setColor(mReachColor);
mPaint.setStrokeWidth(mLineWidth);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(mRadius, y, mRadius, mPaint);
Path path = new Path();
path.moveTo(mRadius * 0.7f, y - mRadius * 0.5f);
path.lineTo(mRadius * 0.7f, y + mRadius * 0.2f);
path.lineTo(mRadius * 1.7f, y + mRadius * 0.2f);
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(mLineWidth / 2);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawPath(path, mPaint);
canvas.restore();
}
/**
* 绘制文字
*/
for (int i = 0; i < mAllLevel; i++)
{
y = getHeight()-mTopBottomPadding*2- ((2 * i + 1) * mRadius + i * levelHeight)+mTopBottomPadding;
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mUnReachTextColor);
mPaint.setTextSize(mUnReachTextSize);
if(i==mCurrentLevel-1)
{
mPaint.setColor(mReachTextColor);
mPaint.setTextSize(mReachTextSize);
}
Paint.FontMetrics fontMetrics=  mPaint.getFontMetrics();
float baseline;
baseline=(mRadius*2-(fontMetrics.bottom-fontMetrics.top))*1.0f/2-fontMetrics.top;
baseline=baseline+y-mRadius;
canvas.drawText(mTextArrays.get(i),mRadius*2+mTextLeftMargin,baseline,mPaint);
}
}
}

代码不是很多，应该能看的懂，我就不过多解释了，第一次写博客，以后写博客会对代码做详细点的分析

以下是源码：

源码下载点击这里