189 8069 5689
不懂Android自定义View如何实现加载进度条效果？？其实想解决这个问题也不难，下面让小编带着大家一起学习怎么去解决，希望大家阅读完这篇文章后大所收获。
专注于为中小企业提供网站制作、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业仪征免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
效果图：
下面就以水平的进度条为列进行讲解：
1.首先还是在attrs.xml文件中自定义我们需要的属性：
<?xml version="1.0" encoding="utf-8"?>
2.获取我们的自定义属性：
/**
* 字体大小
*/
private int mTextSize;
/**
* 字体颜色
*/
private int mTextColor;
/**
* 渐变开始的颜色
*/
private int mStartColor;
/**
* 渐变结束的颜色
*/
private int mEndColor;
/**
* 进度条的宽
*/
private int mProgressWidth;
/**
* 进度条的圆角大小
*/
private int mRadius;
/**
* 默认进度条的颜色
*/
private int mBgColor;
/**
* 进度条的当前进度
*/
private float mCurrentProgress;
/**
* 加载的速度
*/
private int mLoadSpeed;
private String mContent="0%";
private Rect mBounds;
private Paint mPaint;
public GradientProgressBar(Context context) {
this(context, null);
}
public GradientProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public GradientProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.GradientProgressBar, defStyleAttr, 0);
int count = array.getIndexCount();
for (int i = 0; i < count; i++) {
int index = array.getIndex(i);
switch (index) {
case R.styleable.GradientProgressBar_textSize:
/**
* 默认设置为16sp，TypeValue也可以把sp转化为px
*/
mTextSize = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break;
case R.styleable.GradientProgressBar_textColor:
/**
* 默认设置为黑色
*/
mTextColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.GradientProgressBar_startColor:
mStartColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.GradientProgressBar_endColor:
mEndColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.GradientProgressBar_bgColor:
mBgColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.GradientProgressBar_rectRadius:
mRadius = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()
));
break;
case R.styleable.GradientProgressBar_lineWidth:
mProgressWidth=array.getDimensionPixelSize(index,(int)TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,200,getResources().getDisplayMetrics()));
break;
case R.styleable.GradientProgressBar_loadSpeed:
mLoadSpeed=array.getInt(index,10);
break;
}
}
array.recycle();
init();
}init()方法做如下操作
private void init(){
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setAntiAlias(true);
mBounds = new Rect();
new Thread(new Runnable() {
@Override
public void run() {
while (mCurrentProgress < mProgressWidth) {
mCurrentProgress = mCurrentProgress + 1;
mContent = Math.round((mCurrentProgress / mProgressWidth) * 100) + "%";
try {
postInvalidate();
Thread.sleep(mLoadSpeed);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}).start();
}3.重写OnDraw()方法
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* 设置画笔的属性
*/
mPaint.setColor(mBgColor);
mPaint.setStyle(Paint.Style.FILL);
/**
* 绘制背景圆角矩形
*/
canvas.drawRoundRect(0, 0, mProgressWidth, getHeight(), mRadius, mRadius, mPaint);
/**
* 设置线性渐变,设置渐变开始的起点坐标和终点坐标，渐变开始和结束的颜色，设置镜像
* 对于这个方法不太明白的可以google一下，这里不再详细说明
*/
LinearGradient gradient = new LinearGradient(0, getHeight() / 2, mProgressWidth, getHeight() / 2,
mStartColor, mEndColor, Shader.TileMode.MIRROR);
mPaint.setShader(gradient);
/**
* 根据进度绘制圆角矩形
*/
canvas.drawRoundRect(0, 0, mCurrentProgress, getHeight(), mRadius, mRadius, mPaint);
mPaint.reset();
mPaint.setAntiAlias(true);
mPaint.setColor(mTextColor);
mPaint.setTextSize(mTextSize);
/**
* 获取绘制文本所需的矩形大小
*/
mPaint.getTextBounds(mContent, 0, mContent.length(), mBounds);
canvas.drawText(mContent, getWidth() / 2 - mBounds.width() / 2, getHeight() / 2 + mBounds.height() / 2, mPaint);
}好了，这样就完成了我们水平渐变加载进度条，下面贴出圆形进度条的源码：
public class RoundProgressBar extends View {
/**
* 自定义变量
*/
private int mTextSize;
private int mTextColor;
private int mCircleWidth;
private int mBgColor;
private int mCurrentColor;
private int mLoadSpeed;
private float mCurrentProgress;
private String mContent = "0%";
private Rect mBounds;
private Paint mPaint;
public RoundProgressBar(Context context) {
this(context, null);
}
public RoundProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RoundProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.RoundProgressBar, defStyleAttr, 0);
int count = array.getIndexCount();
for (int i = 0; i < count; i++) {
int index = array.getIndex(i);
switch (index) {
case R.styleable.RoundProgressBar_textSizeRound:
/**
* 默认设置为16sp，TypeValue也可以把sp转化为px
*/
mTextSize = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break;
case R.styleable.RoundProgressBar_textColorRound:
/**
* 默认设置为黑色
*/
mTextColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.RoundProgressBar_bgColorRound:
mBgColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.RoundProgressBar_circleWidthRound:
mCircleWidth = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics()
));
break;
case R.styleable.RoundProgressBar_currentColorRound:
mCurrentColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.RoundProgressBar_loadSpeedRound:
mLoadSpeed=array.getInt(index,10);
break;
}
}
array.recycle();
init();
}
private void init() {
mBounds = new Rect();
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setAntiAlias(true);
new Thread(new Runnable() {
@Override
public void run() {
while (mCurrentProgress < 360) {
mCurrentProgress = mCurrentProgress + 1;
mContent = Math.round((mCurrentProgress / 360) * 100) + "%";
postInvalidate();
try {
Thread.sleep(mLoadSpeed);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}).start();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* 设置画笔的属性
*/
mPaint.setColor(mBgColor);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mCircleWidth);
/**
* 绘制圆环背景
*/
int xPoint = getWidth() / 2;//获取圆心x的坐标
int radius = xPoint - mCircleWidth;//获取圆心的半径
canvas.drawCircle(xPoint, xPoint, radius, mPaint);//用于定义的圆弧的形状和大小的界限
/**
* 绘制圆环
*/
mPaint.setColor(mCurrentColor);
RectF oval = new RectF(xPoint - radius, xPoint - radius, radius + xPoint, radius + xPoint);
canvas.drawArc(oval, -90, mCurrentProgress, false, mPaint);
/**
* 绘制当前进度文本
*/
mPaint.reset();
mPaint.setAntiAlias(true);
mPaint.setColor(mTextColor);
mPaint.setTextSize(mTextSize);
mPaint.getTextBounds(mContent, 0, mContent.length(), mBounds);
canvas.drawText(mContent, xPoint - mBounds.width() / 2, xPoint + mBounds.height() / 2, mPaint);
}
}4.在xml文件中申明我们的自定义View
<?xml version="1.0" encoding="utf-8"?>
感谢你能够认真阅读完这篇文章，希望小编分享Android自定义View如何实现加载进度条效果？内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!