Android实现简单实用的垂直进度条

 更新时间:2022年07月27日 15:32:45   作者:Jiang灬Hua  
这篇文章主要为大家详细介绍了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自定义日历滑动控件

    Android自定义日历滑动控件

    这篇文章主要为大家详细介绍了Android自定义日历滑动控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • android仿爱奇艺加载动画实例

    android仿爱奇艺加载动画实例

    这篇文章主要介绍了android仿爱奇艺加载动画实例,小编觉得挺不错的,现在就分享给大家,也给大家做个参考。
    2016-10-10
  • Android中一个应用实现多个图标的几种方式

    Android中一个应用实现多个图标的几种方式

    这篇文章主要给大家介绍了在Android中一个应用如何实现多个图标的几种方式,其中包括了多Activity + intent-filter方式、activity-alias方式以及网页标签-添加快捷方式,分别给出了详细的示例代码,需要的朋友可以参考借鉴。
    2017-05-05
  • android WebView组件使用总结

    android WebView组件使用总结

    浏览器控件是每个开发环境都具备的,这为马甲神功提供了用武之地,windows的有webbrowser,android和ios都有webview;本篇主要介绍android的webview之强大,感兴趣的朋友可以研究下
    2012-12-12
  • 实现Android键盘的中英文适配

    实现Android键盘的中英文适配

    这篇文章主要讲了如何实现Android键盘的中英文自动适配的功能,如果大家在开发的时候用到这个功能,跟着学习下吧。
    2017-12-12
  • Android调用前后摄像头同时工作实例代码

    Android调用前后摄像头同时工作实例代码

    本篇文章主要介绍了Android调用前后摄像头同时工作实例代码,这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-07-07
  • Android实现简单QQ登录页面

    Android实现简单QQ登录页面

    这篇文章主要为大家详细介绍了Android实现简单QQ登录页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Kotlin扩展函数及实现机制的深入探索

    Kotlin扩展函数及实现机制的深入探索

    扩展函数与扩展属性的神奇之处在于,可以在不修改原来类的条件下,使用函数和属性,表现得就像是属于这个类的一样。下面这篇文章主要给大家介绍了关于Kotlin扩展函数及实现机制的相关资料,需要的朋友可以参考下
    2018-06-06
  • Android编程实现XML解析与保存的三种方法详解

    Android编程实现XML解析与保存的三种方法详解

    这篇文章主要介绍了Android编程实现XML解析与保存的三种方法,结合实例形式详细分析了Android实现xml解析的SAX、DOM、PULL三种方法的相关操作技巧,需要的朋友可以参考下
    2017-08-08
  • Android基于虹软(ArcSoft)实现人脸识别

    Android基于虹软(ArcSoft)实现人脸识别

    人工智能时代快速来临,其中人脸识别是当前比较热门的技术,在国内也越来越多的运用,例如刷脸打卡,刷脸APP,身份识别,人脸门禁等。本文将为大家介绍Android基于虹软(ArcSoft)实现人脸识别的demo,快来跟随小编一起学习吧
    2021-12-12

最新评论