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());
            }
        });
    }

可以根據產品的不同配置畫筆風格以及樣式等等,自己可以添加修改的方法.

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容