Android如何實現簡單實用的垂直進度條

本篇內容主要講解“Android如何實現簡單實用的垂直進度條”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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" />

到此，相信大家對“Android如何實現簡單實用的垂直進度條”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！