Android 打造形形色色的进度条实现可以如此简单(1)

2401_84544461

已于 2024-04-29 00:20:19 修改

阅读量564

点赞数 20

分类专栏：程序员文章标签： android asp.net 服务器

于 2024-04-29 00:20:18 首次发布

本文链接：https://blog.csdn.net/2401_84544461/article/details/138295928

版权

程序员专栏收录该内容

168 篇文章 0 订阅

订阅专栏

本文介绍了如何创建自定义的带有数字指示的AndroidProgressBar，包括HorizontalProgressBarWithNumber的属性设置、onMeasure和onDraw方法，以及RoundProgressBarWidthNumber的继承和差异。着重于视图测量和绘制过程，以及提供了一些建议和学习资源。

摘要由CSDN通过智能技术生成

/**

painter of all drawing things

protected Paint mPaint = new Paint();

/**

color of progress number

protected int mTextColor = DEFAULT_TEXT_COLOR;

/**

size of text (sp)

protected int mTextSize = sp2px(DEFAULT_TEXT_SIZE);

/**

offset of draw progress

protected int mTextOffset = dp2px(DEFAULT_SIZE_TEXT_OFFSET);

/**

height of reached progress bar

protected int mReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_REACHED_PROGRESS_BAR);

/**

color of reached bar

protected int mReachedBarColor = DEFAULT_TEXT_COLOR;

/**

color of unreached bar

protected int mUnReachedBarColor = DEFAULT_COLOR_UNREACHED_COLOR;

/**

height of unreached progress bar

protected int mUnReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR);

/**

view width except padding

protected int mRealWidth;

protected boolean mIfDrawText = true;

protected static final int VISIBLE = 0;

public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs)

{

this(context, attrs, 0);

}

public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs,

int defStyle)

{

super(context, attrs, defStyle);

setHorizontalScrollBarEnabled(true);

obtainStyledAttributes(attrs);

mPaint.setTextSize(mTextSize);

mPaint.setColor(mTextColor);

}

/**

get the styled attributes
@param attrs

private void obtainStyledAttributes(AttributeSet attrs)

{

// init values from custom attributes

final TypedArray attributes = getContext().obtainStyledAttributes(

attrs, R.styleable.HorizontalProgressBarWithNumber);

mTextColor = attributes

.getColor(

R.styleable.HorizontalProgressBarWithNumber_progress_text_color,

DEFAULT_TEXT_COLOR);

mTextSize = (int) attributes.getDimension(

R.styleable.HorizontalProgressBarWithNumber_progress_text_size,

mTextSize);

mReachedBarColor = attributes

.getColor(

R.styleable.HorizontalProgressBarWithNumber_progress_reached_color,

mTextColor);

mUnReachedBarColor = attributes

.getColor(

R.styleable.HorizontalProgressBarWithNumber_progress_unreached_color,

DEFAULT_COLOR_UNREACHED_COLOR);

mReachedProgressBarHeight = (int) attributes

.getDimension(

R.styleable.HorizontalProgressBarWithNumber_progress_reached_bar_height,

mReachedProgressBarHeight);

mUnReachedProgressBarHeight = (int) attributes

.getDimension(

R.styleable.HorizontalProgressBarWithNumber_progress_unreached_bar_height,

mUnReachedProgressBarHeight);

mTextOffset = (int) attributes

.getDimension(

R.styleable.HorizontalProgressBarWithNumber_progress_text_offset,

mTextOffset);

int textVisible = attributes

.getInt(R.styleable.HorizontalProgressBarWithNumber_progress_text_visibility,

VISIBLE);

if (textVisible != VISIBLE)

{

mIfDrawText = false;

}

attributes.recycle();

}

嗯，看起来代码挺长，其实都是在获取自定义属性，没什么技术含量。

3、onMeasure

刚才不是出onDraw里面写写就行了么，为什么要改onMeasure呢，主要是因为我们所有的属性比如进度条宽度让用户自定义了，所以我们的测量也得稍微变下。

@Override

protected synchronized void onMeasure(int widthMeasureSpec,

int heightMeasureSpec)

{

int heightMode = MeasureSpec.getMode(heightMeasureSpec);

if (heightMode != MeasureSpec.EXACTLY)

{

float textHeight = (mPaint.descent() + mPaint.ascent());

int exceptHeight = (int) (getPaddingTop() + getPaddingBottom() + Math

.max(Math.max(mReachedProgressBarHeight,

mUnReachedProgressBarHeight), Math.abs(textHeight)));

heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight,

MeasureSpec.EXACTLY);

}

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

}

宽度我们不变，所以的自定义属性不涉及宽度，高度呢，只考虑不是EXACTLY的情况（用户明确指定了，我们就不管了），根据padding和进度条宽度算出自己想要的，如果非EXACTLY下，我们进行exceptHeight封装，传入给控件进行测量高度。

测量完，就到我们的onDraw了~~~

4、onDraw

@Override

protected synchronized void onDraw(Canvas canvas)

{

canvas.save();

//画笔平移到指定paddingLeft， getHeight() / 2位置，注意以后坐标都为以此为0，0

canvas.translate(getPaddingLeft(), getHeight() / 2);

boolean noNeedBg = false;

//当前进度和总值的比例

float radio = getProgress() * 1.0f / getMax();

//已到达的宽度

float progressPosX = (int) (mRealWidth * radio);

//绘制的文本

String text = getProgress() + “%”;

//拿到字体的宽度和高度

float textWidth = mPaint.measureText(text);

float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;

//如果到达最后，则未到达的进度条不需要绘制

if (progressPosX + textWidth > mRealWidth)

{

progressPosX = mRealWidth - textWidth;

noNeedBg = true;

}

// 绘制已到达的进度

float endX = progressPosX - mTextOffset / 2;

if (endX > 0)

{

mPaint.setColor(mReachedBarColor);

mPaint.setStrokeWidth(mReachedProgressBarHeight);

canvas.drawLine(0, 0, endX, 0, mPaint);

}

// 绘制文本

if (mIfDrawText)

{

mPaint.setColor(mTextColor);

canvas.drawText(text, progressPosX, -textHeight, mPaint);

}

// 绘制未到达的进度条

if (!noNeedBg)

{

float start = progressPosX + mTextOffset / 2 + textWidth;

mPaint.setColor(mUnReachedBarColor);

mPaint.setStrokeWidth(mUnReachedProgressBarHeight);

canvas.drawLine(start, 0, mRealWidth, 0, mPaint);

}

canvas.restore();

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh)

{

super.onSizeChanged(w, h, oldw, oldh);

mRealWidth = w - getPaddingRight() - getPaddingLeft();

}

其实核心方法就是onDraw了，但是呢，onDraw也很简单，绘制线、绘制文本、绘制线，结束。

还有两个简单的辅助方法：

/**

dp 2 px
@param dpVal

protected int dp2px(int dpVal)

{

return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,

dpVal, getResources().getDisplayMetrics());

}

/**

sp 2 px
@param spVal
@return

protected int sp2px(int spVal)

{

return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,

spVal, getResources().getDisplayMetrics());

}

好了，到此我们的横向进度就结束了，是不是很简单~~如果你是自定义View，你还得考虑progress的更新，考虑状态的销毁与恢复等等复杂的东西。

接下来看我们的RoundProgressBarWidthNumber圆形的进度条。

2、RoundProgressBarWidthNumber

圆形的进度条和横向的进度条基本变量都是一致的，于是我就让RoundProgressBarWidthNumber extends HorizontalProgressBarWithNumber 了。

然后需要改变的就是测量和onDraw了：

完整代码：

package com.zhy.view;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Paint.Cap;

import android.graphics.Paint.Style;

import android.graphics.RectF;

import android.util.AttributeSet;

import com.zhy.library.view.R;

public class RoundProgressBarWidthNumber extends

HorizontalProgressBarWithNumber {

/**

mRadius of view

private int mRadius = dp2px(30);

public RoundProgressBarWidthNumber(Context context) {

this(context, null);

}

public RoundProgressBarWidthNumber(Context context, AttributeSet attrs) {

super(context, attrs);

mReachedProgressBarHeight = (int) (mUnReachedProgressBarHeight * 2.5f);

TypedArray ta = context.obtainStyledAttributes(attrs,

R.styleable.RoundProgressBarWidthNumber);

mRadius = (int) ta.getDimension(

R.styleable.RoundProgressBarWidthNumber_radius, mRadius);

ta.recycle();

mTextSize = sp2px(14);

mPaint.setStyle(Style.STROKE);

mPaint.setAntiAlias(true);

mPaint.setDither(true);

mPaint.setStrokeCap(Cap.ROUND);

}

@Override

protected synchronized void onMeasure(int widthMeasureSpec,

int heightMeasureSpec) {

int heightMode = MeasureSpec.getMode(heightMeasureSpec);

int widthMode = MeasureSpec.getMode(widthMeasureSpec);

int paintWidth = Math.max(mReachedProgressBarHeight,

mUnReachedProgressBarHeight);

if (heightMode != MeasureSpec.EXACTLY) {

int exceptHeight = (int) (getPaddingTop() + getPaddingBottom()

mRadius * 2 + paintWidth);

heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight,

MeasureSpec.EXACTLY);

}

if (widthMode != MeasureSpec.EXACTLY) {

int exceptWidth = (int) (getPaddingLeft() + getPaddingRight()

mRadius * 2 + paintWidth);

widthMeasureSpec = MeasureSpec.makeMeasureSpec(exceptWidth,

MeasureSpec.EXACTLY);

}

super.onMeasure(heightMeasureSpec, heightMeasureSpec);

}

@Override

protected synchronized void onDraw(Canvas canvas) {

String text = getProgress() + “%”;

// mPaint.getTextBounds(text, 0, text.length(), mTextBound);

float textWidth = mPaint.measureText(text);

float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;

canvas.save();

canvas.translate(getPaddingLeft(), getPaddingTop());

mPaint.setStyle(Style.STROKE);

// draw unreaded bar

mPaint.setColor(mUnReachedBarColor);

mPaint.setStrokeWidth(mUnReachedProgressBarHeight);

最后

总之啊，家里没矿的同学们，如果你们想以后的日子过得好一些，多想想你们的业余时间怎么安排吧；

技术方面的提升肯定是重中之重，但是技术外的一些“软实力”也不能完全忽视，很多时候升职确实是因为你的技术足够强，但也与你的“软实力”密切相关

在这我也分享一份大佬自己收录整理的 Android学习PDF+架构视频+面试文档+源码笔记 ，还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这些都是我闲暇还会反复翻阅并给下属员工学习的精品资料。在脑图中，每个知识点专题都配有相对应的实战项目，可以有效的帮助大家掌握知识点。

总之也是在这里帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习