本文实例为大家分享了Android实现简单垂直进度条的具体代码,供大家参考,具体内容如下
代码注释特别清晰,就不多解释了
支持属性:
progress_radius 进度条圆角大小
progress_border_enable 进度条是否有边框
progress_gradient_enable 进度条颜色是否渐变
progress_start_color 从上到下进度条开始的渐变色
progress_end_color 从上到下进度条结束的渐变色
progress_solid_color 带边框进度条的背景填充色
progress_border_color 进度条边框的颜色
progress_border_width 进度条边框的宽度
有需要定义其他属性的,可以进行扩充下面是效果图
上代码
VerticalProgress
public class VerticalProgress extends View {
//进度条圆角
private int mRadius;
//进度条是否有边框
private boolean mBorderEnable;
//是否有渐变色
private boolean mGradientEnable;
//渐变色
private int mStartResId;
private int mEndResId;
//边框的颜色
private int mBorderColorResId;
//进度条背景填充色
private int mProgressBgColorId;
//边框宽度
private int mBorderWidth;
private int mProgress = 10;
private int max = 100;
private int mWidth;
private int mHeight;
private RectF mRectF;
private Paint mPaint;
public VerticalProgress(Context context) {
super(context);
init(context, null);
}
public VerticalProgress(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = getMeasuredWidth() - 1;// 宽度值
mHeight = getMeasuredHeight() - 1;// 高度值
}
private void init(Context context, AttributeSet attrs) {
TypedArray typedArray = null;
if (attrs != null) {
typedArray = context.obtainStyledAttributes(attrs, R.styleable.verticalProgress);
mRadius = typedArray.getInt(R.styleable.verticalProgress_progress_radius, 0);
mBorderEnable = typedArray.getBoolean(R.styleable.verticalProgress_progress_border_enable, false);
mGradientEnable = typedArray.getBoolean(R.styleable.verticalProgress_progress_gradient_enable, true);
mStartResId = typedArray.getResourceId(R.styleable.verticalProgress_progress_start_color, R.color.colorPrimary);
mProgressBgColorId = typedArray.getResourceId(R.styleable.verticalProgress_progress_solid_color, R.color.white);
mEndResId = typedArray.getResourceId(R.styleable.verticalProgress_progress_end_color, R.color.color_4EA6FD);
mBorderColorResId = typedArray.getResourceId(R.styleable.verticalProgress_progress_border_color, R.color.color_4EA6FD);
mBorderWidth = typedArray.getResourceId(R.styleable.verticalProgress_progress_border_width, 10);
}
if (typedArray != null) {
typedArray.recycle();
}
mRectF = new RectF();
mPaint = new Paint();
mPaint.setAntiAlias(true);
}
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mRadius == 0) {
//弧度为高度的一半
mRadius = mWidth / 2;
}
if (mBorderEnable) {
//第一层矩形(描边层)
mRectF.set(0, 0, mWidth, mHeight);
//第一层矩形颜色(进度条描边的颜色)
mPaint.setColor(getResources().getColor(mBorderColorResId));
//画第一层圆角矩形
canvas.drawRoundRect(mRectF, mRadius, mRadius, mPaint);
//第二层矩形颜色(背景层颜色)
mPaint.setColor(getResources().getColor(mProgressBgColorId));
//第二层矩形(背景层)
mRectF.set(mBorderWidth, mBorderWidth, mWidth - mBorderWidth, mHeight - mBorderWidth);
//画背景层圆角矩形(盖在描边层之上)
canvas.drawRoundRect(mRectF, mRadius, mRadius, mPaint);
}
if (mProgress == 0)//进度为 0不画进度
return;
float section = mProgress / max;
//进度层底层
mRectF.set(+8, mHeight - mProgress / 100f * mHeight + 10, mWidth - 8, mHeight - 8);
if (mGradientEnable) {
//渐变器
LinearGradient shader = new LinearGradient(0, 0, mWidth * section, mHeight,
getResources().getColor(mStartResId), getResources().getColor(mEndResId), Shader.TileMode.CLAMP);
//第三层矩形颜色(进度渐变色)
mPaint.setShader(shader);
}
//画第三层(进度层)圆角矩形(盖在背景层之上)
canvas.drawRoundRect(mRectF, mRadius, mRadius, mPaint);
//清除之前传递的shader
mPaint.setShader(null);
}
public void setProgress(int currentCount) {
this.mProgress = currentCount > max ? max : currentCount;
postInvalidate();
}
}
attr.xml样式
<declare-styleable name="verticalProgress">
<attr name="progress_radius" format="dimension" />
<attr name="progress_border_width" format="dimension" />
<attr name="progress_gradient_enable" format="boolean" />
<attr name="progress_border_enable" format="boolean" />
<attr name="progress_start_color" format="color" />
<attr name="progress_solid_color" format="color" />
<attr name="progress_end_color" format="color" />
<attr name="progress_border_color" format="boolean" />
</declare-styleable>
最后调用示例
<com.widget.VerticalProgress
android:id="@+id/vp_progress"
android:layout_width="20dp"
android:layout_height="match_parent"
app:progress_border_enable="true"
app:progress_solid_color="@color/white"
android:layout_centerInParent="true" />