Android 展示流程进度的View

在项目中有时会用到流程信息,比如申请信用卡,申请贷款等等,需要填写各方面的信息,此时就会用到进度导航的view,接下来给大家介绍一下具体实现流程,废话不多说先来效果图看看!

6795911881.gif

代码如下:

/**
 * Description:
 * - - - - - - - - - - - - - - - - - - -
 * Created by HUI on 17/3/16.
 * - - - - - - - - - - - - - - - - - - -
 * Version 1.0.0
 */

public class StepView extends View {
    private static final int minHorizontalSpace = 100;  //左右两侧保留的最小距离
    private int circleRadius = 30;  //圆半径
    private float circleMultiple = 1.5f;    //当前进度圆与正常圆的比例
    private int mWidth;
    private int paddingLeft;
    private int paddingRight;
    private int paddingBottom;
    private int paddingTop;
    private Paint circlePaint;  //画圆画笔
    private Paint textPaint;    //文字画笔
    private Paint linePaint;    //进度线画笔
    private int stepNum = 0;
    private int currentStep = 0;    //当前步骤(从0开始)
    private int lineDoneColor = Color.parseColor("#FFB90F");
    private int lineDefaultColor = Color.parseColor("#FFE4E1");
    private int circleSelectColor = Color.parseColor("#FFB90F");
    private int circleDefaultColor = Color.parseColor("#FFE4E1");
    private int textSelectColor = Color.parseColor("#FFB90F");
    private int textDefaultColor = Color.parseColor("#FFE4E1");
    private String[] titles;

    public StepView(Context context) {
        super(context);
        init();
    }

    public StepView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public StepView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }


    private void init() {
        //初始化进度圆画笔
        circlePaint = new Paint();
        circlePaint.setColor(circleDefaultColor);
        circlePaint.setAntiAlias(true);
        circlePaint.setStyle(Paint.Style.FILL);

        //初始化文字画笔
        textPaint = new Paint();
        textPaint.setColor(textDefaultColor);
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(40);
        textPaint.setTextAlign(Paint.Align.CENTER);

        //初始化进度线画笔
        linePaint = new Paint();
        linePaint.setColor(lineDefaultColor);
        linePaint.setAntiAlias(true);
        linePaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widhtSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        //左右两边要保留一定距离,否则显示不完全
        paddingLeft = Math.max(getPaddingLeft(), minHorizontalSpace);
        paddingRight = Math.max(getPaddingRight(), minHorizontalSpace);
        paddingBottom = getPaddingBottom();
        paddingTop = getPaddingTop();

        mWidth = widhtSize;
        //对整体View的高度控制,保证可以完整显示
        int mHeight = (int) Math.min(heightSize, 2 * circleMultiple * circleRadius + 120) + paddingTop + paddingBottom;
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(mHeight, MeasureSpec.EXACTLY);

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (titles == null || titles.length == 0) {
            return;
        }

        //①计算进度线的长度
        int space = (mWidth - stepNum * circleRadius * 2 - paddingLeft - paddingRight) / (stepNum - 1);


        //进度线和进度圆的Y坐标
        float mY = circleMultiple * circleRadius + paddingTop;

        //②画进度线
        float lineLeft; //左起点
        float lineRight;//右终点
        for (int i = 0; i < stepNum; i++) {
            linePaint.setColor(i <= currentStep ? lineDoneColor : lineDefaultColor);
            lineLeft = Math.max(i, 1) * 2 * circleRadius + Math.max(i - 1, 0) * space + paddingLeft;
            lineRight = Math.max(i, 1) * 2 * circleRadius +  i * space + paddingLeft;
            RectF rectf = new RectF(lineLeft, mY - 4, lineRight, mY + 4);
            canvas.drawRect(rectf, linePaint);
        }

        //③画进度圆
        float x; //圆心横坐标
        for (int i = 0; i < stepNum; i++) {
            circlePaint.setColor(i <= currentStep ? circleSelectColor : circleDefaultColor);
            x = (float) ((i * 2 + 1) * circleRadius + i * space) + paddingLeft;
            canvas.drawCircle(x, mY, i == currentStep ? circleRadius * circleMultiple : circleRadius, circlePaint);
        }


        //④进度圆内的文字
        for (int i = 0; i < stepNum; i++) {
            textPaint.setColor(i == currentStep ? textDefaultColor : textSelectColor);
            canvas.drawText(i == currentStep ? (i + 1) + "" : "", (i * 2 + 1) * circleRadius + i * space + paddingLeft, mY + 13, textPaint);
        }
        
        //⑤具体进度文案
        float textY = mY + circleMultiple * circleRadius + 80;
        for (int i = 0; i < stepNum; i++) {
            textPaint.setColor(i <= currentStep ? textSelectColor : textDefaultColor);
            canvas.drawText(titles[i], (i * 2 + 1) * circleRadius + i * space + paddingLeft, textY, textPaint);
        }

    }

    //设置进度标题数组
    public void setTitles(String[] titles) {
        this.titles = titles;
        this.stepNum = titles.length;
        postInvalidate();
    }

    //获取总进度数
    public int getStepNum() {
        return stepNum;
    }

    //设置当前进度
    public void setCurrentStep(int currentStep) {
        this.currentStep = currentStep;
        postInvalidate();
    }

    //获取当前进度
    public int getCurrentStep() {
        return currentStep;
    }
}

在布局layout中引用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">


    <com.summer.tree.widget.StepView
        android:id="@+id/sv"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:paddingTop="10dp"
        android:paddingBottom="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#d2d2d2"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/last"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="后退"/>

        <Button
            android:id="@+id/next"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="前进"/>
    </LinearLayout>

</LinearLayout>

在代码中使用:

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        mNavView.setNavigationItemSelectedListener(this);
       
        String[] titles = new String[]{"个人信息", "申请资料", "联系人", "确认信息"};
        //设置进度标题
        stepView.setTitles(titles);

         //后退按钮
        mLastBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int step = sv.getCurrentStep();
                //设置进度
                stepView.setCurrentStep(Math.max((step - 1) % stepView.getStepNum(), 0));
            }
        });

        //前进按钮
        mNextBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int step = sv.getCurrentStep();
                //设置进度
                stepView.setCurrentStep((step + 1) % stepView.getStepNum());
            }
        });
    }

可以根据产品的不同配置画笔风格以及样式等等,自己可以添加修改的方法.