前言
我在上一篇文章中讲了自定义View的一些基本流程，写了两个小例子。这里我要实战写一个完整的View，就是上一篇文章中提到的进度View或者步骤View，这里可以用于显示订单的进度。
效果如下：
StepView
实现
首先我们分析一下，如果要实现这种效果我们应该怎么办，也许你没有思路，如果没有思路，先不管其它的，我们先把目前界面上这种效果画出来
大致步骤
- 画三个灰色小圆
- 在三个小圆之间画两条灰色的线
- 然后再考虑其他的
//到达状态的绿色
private int DEFAULT_REACH_COLOR = 0xff27C3A1;
//未到达的灰色
private int DEFAULT_UNREACH_COLOR = 0xffD3D3D3;
//StepView的基线y坐标
private int viewCdntY=100;
//到达状态的画笔
private Paint reachPaint;
//未达到状态画笔
private Paint unreachPaint;
//线画笔
private Paint linePaint;
//.............................................................
/**
* 初始化view
*/
private void initView(){
reachPaint=new Paint();
reachPaint.setAntiAlias(true);
reachPaint.setColor(DEFAULT_REACH_COLOR);
unreachPaint=new Paint();
unreachPaint.setAntiAlias(true);
unreachPaint.setColor(DEFAULT_UNREACH_COLOR);
}
@Override
protected void onDraw(Canvas canvas) {
for (int i=0;i<stateNum;i++){
canvas.drawCircle((i+1)*100,viewCdntY,30,unreachPaint);
}
}
707C926B-A843-432A-84D0-31F71ADBAC46.png
上面是看到的效果，我们发现需要改改圆的圆心坐标位置，首先先得到屏幕的宽，或者整个控件的宽度，然后再计算圆心的位置，获取屏幕的宽度我们需要使用下面的这个方法：
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBounds=new RectF(getLeft(),getTop(),getRight(),getBottom());
mWidth= (int) (mBounds.right-mBounds.left);
mHeight= (int) (mBounds.bottom-mBounds.top);
}
这里添加变量：
private RectF mBounds;//用于获取控件宽高
//控件总宽度
private int mWidth;
//控件高度
private int mHeight;
//两圆之间的线长
private int lineWidth;
//左右边距
private int leftEdge=60;
现在有控件宽度了，又有圆的个数，还有左右边距，我们就可以先计算圆之间的距离lineWidth＝(mWidth-leftEdge2-mRadius2*stateNum)/(stateNum-1);然后计算每一个圆心的坐标x－－xCodt，y都是一样的，再次画圆：
@Override
protected void onDraw(Canvas canvas) {
lineWidth=(mWidth-leftEdge*2-mRadius*2*stateNum)/(stateNum-1);
for (int i=0;i<stateNum;i++){
int xCodt=i*lineWidth+mRadius*(2*i+1)+leftEdge;
canvas.drawCircle(xCodt,viewCdntY,mRadius,unreachPaint);
}
}
581A5278-3205-4DEA-BAF3-BB1AF26DFD1B.png
上面我们已经计算过圆心之间的距离，那么画圆心之间的线就是探囊取物，不同的是圆有三个，画线只需要画两条。代码如下：
@Override
protected void onDraw(Canvas canvas) {
lineWidth=(mWidth-leftEdge*2-mRadius*2*stateNum)/(stateNum-1);
for (int i=0;i<stateNum;i++){
int xCodt=i*lineWidth+mRadius*(2*i+1)+leftEdge;
if (i>0) {
int xLineStart = (i - 1) * lineWidth + mRadius * 2 * i + leftEdge;//画线开始的地方x坐标
canvas.drawLine(xLineStart, viewCdntY, xCodt, viewCdntY, linePaint);
}
canvas.drawCircle(xCodt,viewCdntY,mRadius,unreachPaint);
}
}
56A87B3B-E23C-4C19-A87E-9D83FF0AA745.png
下面就是要实现圆的颜色修改，以及圆下面加文字。我现在先在下面添加文字，其实文字的摆放跟圆的摆放是一个道理，得到圆心的位置，然后根据圆心的位置计算摆放文字的位置：
首先定义参数，文字基线坐标textCdntY，从上一篇文章你应该能知道文字的宽度计算tWidth，然后文字的x坐标就是圆心x坐标xCodt－tWidth/2，
private Rect textBound;//用于计算文本的宽高
//StepView的文本基线y坐标
private int textCdntY=180;
//文字字符数组
private String[] stateSrr;
//文本画笔
private Paint textPaint;
//--------------------------------------
textPaint=new Paint();
textPaint.setAntiAlias(true);
textPaint.setTextSize(DisplayUtils.spToPx(getContext(),14));
textPaint.setColor(TEXT_COLOR);
stateSrr=new String[]{"下单","付款","出库"};
textBound=new Rect();
写文字
@Override
protected void onDraw(Canvas canvas) {
lineWidth=(mWidth-leftEdge*2-mRadius*2*stateNum)/(stateNum-1);
for (int i=0;i<stateNum;i++){
int xCodt=i*lineWidth+mRadius*(2*i+1)+leftEdge;
if (i>0) {
int xLineStart = (i - 1) * lineWidth + mRadius * 2 * i + leftEdge;//画线开始的地方x坐标
canvas.drawLine(xLineStart, viewCdntY, xCodt, viewCdntY, linePaint);
}
canvas.drawCircle(xCodt,viewCdntY,mRadius,unreachPaint);
textPaint.getTextBounds(stateSrr[i],0,stateSrr[i].length(),textBound);
int xTextBegining=xCodt-textBound.width()/2;
canvas.drawText(stateSrr[i],xTextBegining,textCdntY,textPaint);
}
}
C570EEC1-82CA-4760-8CCD-B1D1D0AB9AD2.png
继续完善
上面其实我们已经把大致的雏形完成了，已经可以照着这个原理将整个效果做出来了。下面说怎么改变圆的颜色，线的效果，下面日期和时间的文字原理与上面写文字的原理一样，这里不在赘述。
首先改变圆的颜色，我们需要一个数组或者list存放每一个位置的状态，我这里使用int数组－－private int[] stateArr=new int[]{1,1,0};例如当用户下完单以后，下单的圆应该是绿色的，而当用户付完款时，付款的圆是绿色的，中间的线是实心绿色，付款与出库之间的线是灰色虚线。
我们可以根据stateArr里面的数字判断
对于圆
if (stateArr[i]==1) 表示这一个圆要画成绿色，否则就是灰色
对于线首先i要大于0然后判断if (stateArr[i]==1) 表示线为绿实线，否则线为灰虚线
关于虚线，我也是在网上查的画虚线的方法，不再是使用canvas.drawLine(..);而是使用下面的方法
effects = new DashPathEffect(new float[]{10,4,10,4},1);
linePaint.setPathEffect(effects);
Path path=new Path();
path.moveTo(xLineStart,viewCdntY);
path.lineTo(xCodt,viewCdntY);
canvas.drawPath(path,linePaint);
StepView完整代码如下：
public class StepView extends View{
private RectF mBounds;//用于获取控件宽高
private Rect textBound;//用于计算文本的宽高
//灰文本颜色
private int TEXT_GRAY_COLOR = 0xff999999;
//到达状态的绿色
private int DEFAULT_REACH_COLOR = 0xff27C3A1;
//未到达的灰色
private int DEFAULT_UNREACH_COLOR = 0xffD3D3D3;
//文本的颜色
private int TEXT_COLOR = 0xff666666;
//StepView的基线y坐标
private int viewCdntY=100;
//StepView的文本基线y坐标
private int textCdntY=180;
//StepView的时间文本基线y坐标
private int dateCdntY=250;
private int timeCdntY=300;
//到达状态的画笔
private Paint reachPaint;
//未达到状态画笔
private Paint unreachPaint;
//线画笔
private Paint linePaint;
//灰文本画笔
private Paint grayTextPaint;
//文本画笔
private Paint textPaint;
//圆的半径
private int mRadius=30;
//左右边距
private int leftEdge=60;
//状态的数量,一个状态代表一个圆
private int stateNum=3;
private int[] stateArr=new int[]{1,1,0};
//文字字符数组
private String[] stateSrr;
private String[] dateSrr;
private String[] timeSrr;
//控件总宽度
private int mWidth;
//控件高度
private int mHeight;
//两圆之间的线长
private int lineWidth;
private PathEffect effects;
public StepView(Context context) {
this(context,null);
}
public StepView(Context context, AttributeSet attrs) {
this(context,attrs,0);
}
public StepView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
/**
* 初始化view
*/
private void initView(){
reachPaint=new Paint();
reachPaint.setAntiAlias(true);
reachPaint.setColor(DEFAULT_REACH_COLOR);
unreachPaint=new Paint();
unreachPaint.setAntiAlias(true);
unreachPaint.setColor(DEFAULT_UNREACH_COLOR);
textPaint=new Paint();
textPaint.setAntiAlias(true);
textPaint.setTextSize(DisplayUtils.spToPx(getContext(),14));
textPaint.setColor(TEXT_COLOR);
grayTextPaint=new Paint();
grayTextPaint.setAntiAlias(true);
grayTextPaint.setTextSize(DisplayUtils.spToPx(getContext(),12));
grayTextPaint.setColor(TEXT_GRAY_COLOR);
effects = new DashPathEffect(new float[]{10,4,10,4},1);
linePaint=new Paint();
linePaint.setAntiAlias(true);
linePaint.setStyle(Paint.Style.STROKE);//空心
linePaint.setColor(TEXT_COLOR);
linePaint.setPathEffect(effects);
stateSrr=new String[]{"下单","付款","出库"};
dateSrr=new String[]{"3月21日","3月22日",""};
timeSrr=new String[]{"21:32","13:21",""};
textBound=new Rect();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBounds=new RectF(getLeft(),getTop(),getRight(),getBottom());
mWidth= (int) (mBounds.right-mBounds.left);
mHeight= (int) (mBounds.bottom-mBounds.top);
}
@Override
protected void onDraw(Canvas canvas) {
lineWidth=(mWidth-leftEdge*2-mRadius*2*stateNum)/(stateNum-1);
for (int i=0;i<stateNum;i++){
int xCodt=i*lineWidth+mRadius*(2*i+1)+leftEdge;
int xLineStart = (i - 1) * lineWidth + mRadius * 2 * i + leftEdge;//画线开始的地方x坐标
Paint tempCircleP;
if (stateArr[i]==1) {
linePaint.setColor(DEFAULT_REACH_COLOR);
tempCircleP = reachPaint;
if (i>0){
canvas.drawLine(xLineStart,viewCdntY,xCodt,viewCdntY,tempCircleP);
}
}else {
linePaint.setColor(TEXT_GRAY_COLOR);
tempCircleP = unreachPaint;
if (i>0){
Path path=new Path();
path.moveTo(xLineStart,viewCdntY);
path.lineTo(xCodt,viewCdntY);
canvas.drawPath(path,linePaint);
}
}
canvas.drawCircle(xCodt,viewCdntY,mRadius,tempCircleP);
textPaint.getTextBounds(stateSrr[i],0,stateSrr[i].length(),textBound);
int xTextBegining=xCodt-textBound.width()/2;
grayTextPaint.getTextBounds(dateSrr[i],0,dateSrr[i].length(),textBound);
int xDateBegining=xCodt-textBound.width()/2;
grayTextPaint.getTextBounds(timeSrr[i],0,timeSrr[i].length(),textBound);
int xTimeBegining=xCodt-textBound.width()/2;
canvas.drawText(stateSrr[i],xTextBegining,textCdntY,textPaint);
canvas.drawText(dateSrr[i],xDateBegining,dateCdntY,grayTextPaint);
canvas.drawText(timeSrr[i],xTimeBegining,timeCdntY,grayTextPaint);
}
}
}
CE9A2DA1-B7B1-4BF9-8DB0-6FA7E37AA392.png
最后
现在回头看看自定义一个这样的效果也是挺简单的，整个类也就100多行代码，其实核心的也就onDraw方法里的30行代码。当然我现在是单单实现了功能，假如要使用到项目中肯定还要优化，例如要加入一些方法配置状态数，配置状态文本，配置时间，还要加入刷新方法。使之成为一个易用易配置，可功能扩展的View。最后也许还要考虑性能，潜在问题等
