线性的流程图经常在订单界面用到，类似的在行APP就用到了这种流程。最近在学习自定义控件，就写了一个，开源出来，也参考了网上的一些代码。
最终效果图：
Paste_Image.png
项目地址：https://github.com/GinSmile/FlowViewDemo
</hr>
可以想象的到，要实现这么一个视图，要画三个东西，分别是
- 圆圈
- 圆圈之间的线段
- 圆圈上面的字
所以，我们要做的最重要的事情就是确定圆圈的圆心的坐标。
1，首先需要新建一个继承自View的FlowView
public class FlowView extends View {
...
2，重写onMeasure
让wrap_content有效，所以重写onMeasure，设置FlowView的默认的长和宽为200，50。
@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = 200;
if (MeasureSpec.EXACTLY == MeasureSpec.getMode(widthMeasureSpec)) {
width = MeasureSpec.getSize(widthMeasureSpec);
}else{
width = Math.min(width, MeasureSpec.getSize(widthMeasureSpec));
}
int height = 50;
if (MeasureSpec.EXACTLY == MeasureSpec.getMode(heightMeasureSpec)) {
height = MeasureSpec.getSize(heightMeasureSpec);
}else{
height = Math.min(height, MeasureSpec.getSize(heightMeasureSpec));
}
setMeasuredDimension(width, height);
}
3，重写onSizeChanged
获取各种坐标。
- 圆圈的Y轴坐标mCenterY，用0.5f * getHeight()，即为整个视图竖直中心的坐标。
- 圆圈的X轴坐标，如果有两端的线段，那么第一个X轴坐标即为线段的长度。如果没有两端的线段，那么第一个X轴坐标即为第一个字符串的像素长度和圆圈半径中最大的。
另外还要注意线段的左上角的Y坐标， mCenterY - (mLineHeight / 2)，要去掉线段的高度的一半。
由于执行顺序为 构造器->onMeasure()->onSizeChanged()->onDraw()，所以在onSizeChanged()里面得不到最新的onDraw()里面的结果，所以这里有一个地方要注意，就是在获取label0的字符总像素长度的时候，一定要在这里设置字体大小。
mDonePaint.setTextSize(mTextSize);
float textSize0 = mDonePaint.measureText(labels.get(0));
onSizeChanged()如下：
@Override
public void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mCenterY = 0.5f * getHeight();//画到view的中央
mLeftX = 0;
mLeftY = mCenterY - (mLineHeight / 2);//最左边的点的位置
mRightX = getWidth() - mRadius;
mRightY = (float) (0.5f * getHeight() + 0.5 * mLineHeight);//最右边的位置
//如果要画两端的线段，那么需要画的线就有 mFlowNums + 1 条
if(is_has_start_end_line){
float mLineLength = (mRightX - mLeftX) / (mFlowNums + 1);//两个圆心之间的距离
mCenterXPosition.add(mLineLength);//第一个圆心在初始位置右边mLineLength的地方
for (int i = 1; i < mFlowNums - 1; i++) {
mCenterXPosition.add(mLeftX + (i + 1) * mLineLength);
}
mCenterXPosition.add(mLeftX + mLineLength * mFlowNums);
}else{
//如果不画两端的线段，那么需要画的线就有 mFlowNums + 1 条
if(labels.size() > 0){
//为了防止显示不全，选择第一个字符串的像素长度和圆圈半径中最大的，作为第一个圆心的X坐标
//开始的点mLeftX，结束的点mRightX
mDonePaint.setTextSize(mTextSize);
float textSize0 = mDonePaint.measureText(labels.get(0));//获取label0的字符总长度，像素
Log.v("tag",""+textSize0 + labels.get(0));
mLeftX = Math.max(textSize0/2, mRadius);//最开始的x坐标是：第一个字副串的像素长度，和圆圈半径中最大的
float textSize1 = mDonePaint.measureText(labels.get(labels.size()-1));//获取label0的字符总长度，像素
mRightX = getWidth() - Math.max(textSize1/2, mRadius);//最开始的x坐标是：第一个字副串的像素长度，和圆圈半径中最大的
}
float mLineLength = (mRightX - mLeftX) / (mFlowNums - 1);///两个圆心之间的距离
mCenterXPosition.add(mLeftX);//第一个圆心的x坐标在mRadius处。
for (int i = 1; i < mFlowNums - 1; i++) {
mCenterXPosition.add(mLeftX + i * mLineLength);
}
mCenterXPosition.add(mRightX);
}
}
4，重写onDraw
在有没有两段的线段的时候，有些地方的坐标有很大的不同。
/**
* 画开始处和结束处的线段
*/
private void drawSELine(Canvas canvas){
//最左边的线段
float firstEndX = 0;
if(mCenterXPosition.size() > 0){
firstEndX = mCenterXPosition.get(0) - mRadius - mPaddingCircle;
}
canvas.drawRect(
0,
mLeftY,
firstEndX,
mRightY,
(0 < mDoneNums) ? mDonePaint : mTodoPaint);
//最右边的线段
float lastStartX = 0;
if(mCenterXPosition.size() > 0){
lastStartX = mCenterXPosition.get(mCenterXPosition.size() - 1) + mRadius + mPaddingCircle;
}
canvas.drawRect(
lastStartX,
mLeftY,
getWidth(),
mRightY,
(mDoneNums >= mFlowNums) ? mDonePaint : mTodoPaint);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mTodoPaint.setColor(mTodoPaintColor);
mTodoPaint.setAntiAlias(true);
mTodoPaint.setStyle(Paint.Style.FILL);
mTodoPaint.setStrokeWidth(3);
mTodoPaint.setTextSize(mTextSize);
mTodoPaint.setTextAlign(Paint.Align.CENTER);
mDonePaint.setColor(mDonePaintColor);
mDonePaint.setAntiAlias(true);
mDonePaint.setStyle(Paint.Style.FILL);
mDonePaint.setStrokeWidth(3);
mDonePaint.setTextSize(mTextSize);
mDonePaint.setTextAlign(Paint.Align.CENTER);
//如果要画最开始处和结束处的线段
if(is_has_start_end_line){
drawSELine(canvas);
}
//画中间的线段
for(int i = 0; i < mCenterXPosition.size() - 1; i++){
canvas.drawRect(
mCenterXPosition.get(i) + mRadius + mPaddingCircle,
mLeftY,
mCenterXPosition.get(i + 1) - mRadius - mPaddingCircle,
mRightY,
(i < mDoneNums - 1) ? mDonePaint : mTodoPaint);
}
//画圆圈
for(int i = 0; i < mCenterXPosition.size(); i++){
canvas.drawCircle(mCenterXPosition.get(i), mCenterY, mRadius,
(i < mDoneNums) ? mDonePaint : mTodoPaint);
}
//在圆圈上写label
for(int i = 0; i < mCenterXPosition.size(); i++){
canvas.drawText(
labels.get(i),
0,
labels.get(i).length(),
mCenterXPosition.get(i),
mCenterY - mRadius - mPaddingCircle - mTextPadding,
(i < mDoneNums) ? mDonePaint : mTodoPaint);
}
}
网友评论