快捷導(dǎo)航

Android實(shí)現(xiàn)帶有指示器的進(jìn)度條

更新時(shí)間：2021年05月08日 09:27:31 作者：自如大前端團(tuán)隊(duì)

這篇文章主要介紹了Android實(shí)現(xiàn)帶有指示器的進(jìn)度條的示例代碼，幫助大家更好的理解和學(xué)習(xí)使用Android開(kāi)發(fā)，感興趣的朋友可以了解下

背景

當(dāng)我們看到UI給我們?cè)O(shè)計(jì)的效果的時(shí)候，我們習(xí)慣性的思路就是看看google有沒(méi)有為我們提供相應(yīng)的控件或者是能否在網(wǎng)上找到一些合適的輪子拿過(guò)來(lái)直接用。但是，有時(shí)候很不巧的是沒(méi)有這樣的輪子供我們直接使用，而且，UI以及產(chǎn)品就需要這樣的效果的時(shí)候，我們就只能自己進(jìn)行實(shí)現(xiàn)繪制。今天呢，我就帶大家從簡(jiǎn)單的實(shí)現(xiàn)一個(gè)帶有指示器的進(jìn)度條，幫大家理解一下之定義View的繪制流程。

效果實(shí)現(xiàn)圖

俗話說(shuō),沒(méi)有效果圖,就等于是耍那個(gè)啥，所以按照慣例，貼圖：

開(kāi)干

當(dāng)我們決定要自己進(jìn)行繪制的時(shí)候，我們首先需要對(duì)需求，效果進(jìn)行觀察、分析、拆解。就是所謂的大事化小，小事化無(wú)。

觀察：效果圖中包含進(jìn)度條、帶三角箭頭的圓角指示器、進(jìn)度值以及進(jìn)度動(dòng)畫
分析：通過(guò)觀察我們可以將整個(gè)進(jìn)度條分為指示器，進(jìn)度條、進(jìn)度值、動(dòng)畫4部分
拆解：因此我們可以依次對(duì)上述部分的組成部分進(jìn)行單獨(dú)的繪制最后整體關(guān)聯(lián)是實(shí)現(xiàn)上圖的效果

自定義View的流程(按照上述部分進(jìn)行)

大家應(yīng)該都知道繪制流程包含三部分，自定義屬性、測(cè)量 measure、draw、layout。但是，我們今天所講的是進(jìn)度條View，而不是ViewLayout，所以layout的部分今天暫且不講。

自定義屬性以及代碼中獲取

屬性	說(shuō)明
app:hpb_centerPadding="5dp"	指示器與進(jìn)度條的間距
app:hpb_progressBarBackgroundColor="@color/colorPrimary"	進(jìn)度條背景色
app:hpb_progressBarForegroundColor="@color/colorAccent"	進(jìn)度條前景色
app:hpb_progressBarHeight="2dp"	指示器bottomPadding
app:hpb_textBottomPadding="5dp"	指示器與進(jìn)度條的間距
app:hpb_textLeftPadding="5dp"	指示器leftPadding
app:hpb_textRightPadding="5dp"	指示器rightPadding
app:hpb_textTopPadding="5dp"	指示器topPadding
app:hpb_textSize="12sp"	指示器文字大小
app:hpb_textColor="#FFFFFF"	指示器文字顏色
app:hpb_progress="20"	進(jìn)度值

    //獲取自定義屬性
    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.HorizontalProgressBar);
    mTextSize = ta.getDimension(R.styleable.HorizontalProgressBar_hpb_textSize, Utils.sp2px(context, 12));
    mTextColor = ta.getColor(R.styleable.HorizontalProgressBar_hpb_textColor, Color.parseColor("#FFFFFF"));
    currentProgress = ta.getFloat(R.styleable.HorizontalProgressBar_hpb_progress, 0);
    mTextLeftPadding = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_textLeftPadding, Utils.sp2px(context, 5));
    mTextRightPadding = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_textRightPadding, Utils.sp2px(context, 5));
    mTextTopPadding = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_textTopPadding, Utils.sp2px(context, 5));
    mTextBottomPadding = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_textBottomPadding, Utils.sp2px(context, 5));
    mCenterPadding = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_centerPadding, Utils.sp2px(context, 5));
    mProgressHeight = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_progressBarHeight, Utils.sp2px(context, 2));
    mBackgroundColor = ta.getColor(R.styleable.HorizontalProgressBar_hpb_progressBarBackgroundColor, Color.parseColor("#E8E8E8"));
    mForegroundColor = ta.getColor(R.styleable.HorizontalProgressBar_hpb_progressBarForegroundColor, Color.parseColor("#912CEE"));
    ta.recycle();

    //進(jìn)度條條背景色畫筆初始化
    mBackgroundPaint = new Paint();
    mBackgroundPaint.setColor(mBackgroundColor);
    mBackgroundPaint.setStrokeCap(Paint.Cap.ROUND);
    mBackgroundPaint.setStrokeWidth(mProgressHeight);
    mBackgroundPaint.setAntiAlias(true);

    //指示器Path畫筆初始化
    mPathPaint = new Paint();
    mPathPaint.setColor(mForegroundColor);
    mPathPaint.setStrokeCap(Paint.Cap.ROUND);
    mPathPaint.setPathEffect(new CornerPathEffect(Utils.dp2px(getContext(), 2)));
    mPathPaint.setAntiAlias(true);

    //進(jìn)度條前景色畫筆初始化
    mProgressPaint = new Paint();
    mProgressPaint.setColor(mForegroundColor);
    mProgressPaint.setStrokeWidth(mProgressHeight);
    mProgressPaint.setStrokeCap(Paint.Cap.ROUND);
    mProgressPaint.setAntiAlias(true);

    //進(jìn)度值文案畫筆初始化
    mTextPaint = new Paint();
    mTextPaint.setColor(mTextColor);
    mTextPaint.setTextSize(mTextSize);
    mTextPaint.setStyle(Paint.Style.FILL);

    //指示器Path初始化
    mPath = new Path();

測(cè)量

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int width = MeasureSpec.getSize(widthMeasureSpec);

    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);

    setMeasuredDimension(measureWidth(widthMode, width), measureHeight(heightMode, height));
}

/**
 * 測(cè)量寬度
 *
 * @param mode
 * @param width
 * @return
 */
private int measureWidth(int mode, int width) {
    switch (mode) {
        case MeasureSpec.UNSPECIFIED:
        case MeasureSpec.AT_MOST:
        case MeasureSpec.EXACTLY:
            mWidth = width;
            break;
    }
    return mWidth;
}

/**
 * 測(cè)量高度
 *
 * @param mode
 * @param height
 * @return
 */
private int measureHeight(int mode, int height) {
    switch (mode) {
        case MeasureSpec.UNSPECIFIED:
        case MeasureSpec.AT_MOST:
        case MeasureSpec.EXACTLY:
            mHeight = height;
            break;
    }
    return mHeight;
}

//文字測(cè)量
private void measureText(String text) {
    Rect rect = new Rect();
    mTextPaint.getTextBounds(text, 0, text.length(), rect);
    mTextWidth = rect.width();
    mTextHeight = rect.height();
}

繪制

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mIndicatorWidth = mTextLeftPadding + mTextWidth + mTextRightPadding;
    mIndicatorHeight = mTextTopPadding + mTextHeight + mTextBottomPadding;

    float backgroundProgressBarStartX = (float) (1.0 * mIndicatorWidth / 2);
    float backgroundProgressBarEndX = mWidth - mIndicatorWidth / 2;

    float foregroundProgress = (float) (1.0 * (mWidth - mIndicatorWidth) * currentProgress / 100);

    float foregroundProgressBarStartX = (float) (1.0 * mIndicatorWidth / 2);
    float foregroundProgressBarEndX = foregroundProgressBarStartX + foregroundProgress;

    Log.e(TAG, "backgroundProgressBarStartX----" + backgroundProgressBarStartX
            + "----backgroundProgressBarEndX----" + backgroundProgressBarEndX
            + "----foregroundProgress----" + foregroundProgress
            + "----foregroundProgressBarStartX----" + foregroundProgressBarStartX
            + "----foregroundProgressBarEndX----" + foregroundProgressBarEndX
    );

    float progressX = foregroundProgress;
    float progressY = (float) (mCenterPadding + mIndicatorHeight * 1.5);


    //進(jìn)度背景
    canvas.drawLine(backgroundProgressBarStartX, progressY, backgroundProgressBarEndX, progressY, mBackgroundPaint);

    //進(jìn)度前景色
    canvas.drawLine(foregroundProgressBarStartX, progressY, foregroundProgressBarEndX, progressY, mProgressPaint);

    //指示器
    drawPath(canvas, progressX, 45);

    //文字
    drawText(canvas, mTextProgress, progressX);
}

1. 指示器繪制

通過(guò)Path進(jìn)行繪制，描繪出矩形以及下三角

/**
 * 繪制指示器
 *
 * @param canvas
 * @param progressX
 */
private void drawPath(Canvas canvas, float progressX, float rotateAngle) {
    mPath.reset();

    mPath.moveTo(progressX, 0); //1
    mPath.lineTo(progressX + mIndicatorWidth, 0); //2
    mPath.lineTo(progressX + mIndicatorWidth, mIndicatorHeight); //3
    mPath.lineTo((float) (progressX + mIndicatorWidth * 0.75), mIndicatorHeight); //4
    mPath.lineTo((float) (progressX + mIndicatorWidth * 0.5), (float) (mIndicatorHeight * 1.5)); //5
    mPath.lineTo((float) (progressX + mIndicatorWidth * 0.25), mIndicatorHeight); //6
    mPath.lineTo(progressX, mIndicatorHeight);//7
    mPath.close();

    canvas.drawPath(mPath, mPathPaint);
}

2. 文字的繪制

文字的繪制涉及到測(cè)量上邊測(cè)量中已經(jīng)提及，但是在繪制中有涉及到基線獲取如下所示

/**
 * 計(jì)算繪制文字時(shí)的基線到中軸線的距離
 *
 * @param p
 * @return 基線和centerY的距離
 */
public float getBaseline(Paint p) {
    Paint.FontMetrics fontMetrics = p.getFontMetrics();
    return (fontMetrics.descent - fontMetrics.ascent) / 2 - fontMetrics.descent;
}

/**
 * 繪制文字
 *
 * @param canvas
 * @param text
 * @param progressX
 */
private void drawText(Canvas canvas, String text, float progressX) {
    float baseline = getBaseline(mTextPaint);
    float textY = mTextTopPadding + mTextHeight / 2 + baseline;
    canvas.drawText(text, progressX + mTextTopPadding, textY, mTextPaint);
}