東西比較簡單,就不說那麼多,只爲日常方便
代碼註釋特別清晰,就不多解釋了
支持屬性:
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" />
希望各位用的開心