目錄背景

當(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)圖

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

開(kāi)干

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

觀察：效果圖中包含 進(jìn)度條、帶三角箭頭的圓角指示器、進(jìn)度值以及進(jìn)度動(dòng)畫(huà) 分析：通過(guò)觀察我們可以將整個(gè)進(jìn)度條分為 指示器，進(jìn)度條、進(jìn)度值、動(dòng)畫(huà)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)度條條背景色畫(huà)筆初始化 mBackgroundPaint = new Paint(); mBackgroundPaint.setColor(mBackgroundColor); mBackgroundPaint.setStrokeCap(Paint.Cap.ROUND); mBackgroundPaint.setStrokeWidth(mProgressHeight); mBackgroundPaint.setAntiAlias(true); //指示器Path畫(huà)筆初始化 mPathPaint = new Paint(); mPathPaint.setColor(mForegroundColor); mPathPaint.setStrokeCap(Paint.Cap.ROUND); mPathPaint.setPathEffect(new CornerPathEffect(Utils.dp2px(getContext(), 2))); mPathPaint.setAntiAlias(true); //進(jìn)度條前景色畫(huà)筆初始化 mProgressPaint = new Paint(); mProgressPaint.setColor(mForegroundColor); mProgressPaint.setStrokeWidth(mProgressHeight); mProgressPaint.setStrokeCap(Paint.Cap.ROUND); mProgressPaint.setAntiAlias(true); //進(jìn)度值文案畫(huà)筆初始化 mTextPaint = new Paint(); mTextPaint.setColor(mTextColor); mTextPaint.setTextSize(mTextSize); mTextPaint.setStyle(Paint.Style.FILL); //指示器Path初始化 mPath = new Path();測(cè)量

@Overrideprotected 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();}繪制

@Overrideprotected 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);}總結(jié)

以上的完整代碼已經(jīng)上傳至github，github地址，如有需要可以上去看看，也可以下載直接使用或者是通過(guò)jcenter引入，由于jcenter現(xiàn)狀已經(jīng)停止維護(hù)，所以后續(xù)會(huì)遷入maven

以上就是Android實(shí)現(xiàn)帶有指示器的進(jìn)度條的詳細(xì)內(nèi)容，更多關(guān)于Android 指示器進(jìn)度條的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！