Android实现带有指示器的进度条

 更新时间:2021年05月08日 09:27:31   作者:自如大前端团队  
这篇文章主要介绍了Android实现带有指示器的进度条的示例代码,帮助大家更好的理解和学习使用Android开发,感兴趣的朋友可以了解下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

背景

当我们看到UI给我们设计的效果的时候,我们习惯性的思路就是看看google有没有为我们提供相应的控件或者是能否在网上找到一些合适的轮子拿过来直接用。但是,有时候很不巧的是没有这样的轮子供我们直接使用,而且,UI以及产品就需要这样的效果的时候,我们就只能自己进行实现绘制。今天呢,我就带大家从简单的实现一个带有指示器的进度条,帮大家理解一下之定义View的绘制流程。

效果实现图

俗话说,没有效果图,就等于是耍那个啥,所以按照惯例,贴图:

开干

当我们决定要自己进行绘制的时候,我们首先需要对需求,效果进行观察、分析、拆解。就是所谓的大事化小,小事化无。

  1. 观察:效果图中包含 进度条、带三角箭头的圆角指示器、进度值以及进度动画
  2. 分析:通过观察我们可以将整个进度条分为 指示器,进度条、进度值、动画4部分
  3. 拆解:因此我们可以依次对上述部分的组成部分进行单独的绘制最后整体关联是实现上图的效果

自定义View的流程(按照上述部分进行)

大家应该都知道绘制流程包含三部分,自定义属性、测量 measure、draw、layout。但是,我们今天所讲的是进度条View,而不是ViewLayout,所以layout的部分今天暂且不讲。

自定义属性以及代码中获取

属性 说明
app:hpb_centerPadding="5dp" 指示器与进度条的间距
app:hpb_progressBarBackgroundColor="@color/colorPrimary" 进度条背景色
app:hpb_progressBarForegroundColor="@color/colorAccent" 进度条前景色
app:hpb_progressBarHeight="2dp" 指示器bottomPadding
app:hpb_textBottomPadding="5dp" 指示器与进度条的间距
app:hpb_textLeftPadding="5dp" 指示器leftPadding
app:hpb_textRightPadding="5dp" 指示器rightPadding
app:hpb_textTopPadding="5dp" 指示器topPadding
app:hpb_textSize="12sp" 指示器文字大小
app:hpb_textColor="#FFFFFF" 指示器文字颜色
app:hpb_progress="20" 进度值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//获取自定义属性
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.HorizontalProgressBar);
mTextSize = ta.getDimension(R.styleable.HorizontalProgressBar_hpb_textSize, Utils.sp2px(context, 12));
mTextColor = ta.getColor(R.styleable.HorizontalProgressBar_hpb_textColor, Color.parseColor("#FFFFFF"));
currentProgress = ta.getFloat(R.styleable.HorizontalProgressBar_hpb_progress, 0);
mTextLeftPadding = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_textLeftPadding, Utils.sp2px(context, 5));
mTextRightPadding = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_textRightPadding, Utils.sp2px(context, 5));
mTextTopPadding = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_textTopPadding, Utils.sp2px(context, 5));
mTextBottomPadding = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_textBottomPadding, Utils.sp2px(context, 5));
mCenterPadding = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_centerPadding, Utils.sp2px(context, 5));
mProgressHeight = (int) ta.getDimension(R.styleable.HorizontalProgressBar_hpb_progressBarHeight, Utils.sp2px(context, 2));
mBackgroundColor = ta.getColor(R.styleable.HorizontalProgressBar_hpb_progressBarBackgroundColor, Color.parseColor("#E8E8E8"));
mForegroundColor = ta.getColor(R.styleable.HorizontalProgressBar_hpb_progressBarForegroundColor, Color.parseColor("#912CEE"));
ta.recycle();
 
//进度条条背景色画笔初始化
mBackgroundPaint = new Paint();
mBackgroundPaint.setColor(mBackgroundColor);
mBackgroundPaint.setStrokeCap(Paint.Cap.ROUND);
mBackgroundPaint.setStrokeWidth(mProgressHeight);
mBackgroundPaint.setAntiAlias(true);
 
//指示器Path画笔初始化
mPathPaint = new Paint();
mPathPaint.setColor(mForegroundColor);
mPathPaint.setStrokeCap(Paint.Cap.ROUND);
mPathPaint.setPathEffect(new CornerPathEffect(Utils.dp2px(getContext(), 2)));
mPathPaint.setAntiAlias(true);
 
//进度条前景色画笔初始化
mProgressPaint = new Paint();
mProgressPaint.setColor(mForegroundColor);
mProgressPaint.setStrokeWidth(mProgressHeight);
mProgressPaint.setStrokeCap(Paint.Cap.ROUND);
mProgressPaint.setAntiAlias(true);
 
//进度值文案画笔初始化
mTextPaint = new Paint();
mTextPaint.setColor(mTextColor);
mTextPaint.setTextSize(mTextSize);
mTextPaint.setStyle(Paint.Style.FILL);
 
//指示器Path初始化
mPath = new Path();

测量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int width = MeasureSpec.getSize(widthMeasureSpec);
 
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
 
    setMeasuredDimension(measureWidth(widthMode, width), measureHeight(heightMode, height));
}
 
/**
 * 测量宽度
 *
 * @param mode
 * @param width
 * @return
 */
private int measureWidth(int mode, int width) {
    switch (mode) {
        case MeasureSpec.UNSPECIFIED:
        case MeasureSpec.AT_MOST:
        case MeasureSpec.EXACTLY:
            mWidth = width;
            break;
    }
    return mWidth;
}
 
/**
 * 测量高度
 *
 * @param mode
 * @param height
 * @return
 */
private int measureHeight(int mode, int height) {
    switch (mode) {
        case MeasureSpec.UNSPECIFIED:
        case MeasureSpec.AT_MOST:
        case MeasureSpec.EXACTLY:
            mHeight = height;
            break;
    }
    return mHeight;
}
 
//文字测量
private void measureText(String text) {
    Rect rect = new Rect();
    mTextPaint.getTextBounds(text, 0, text.length(), rect);
    mTextWidth = rect.width();
    mTextHeight = rect.height();
}

绘制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mIndicatorWidth = mTextLeftPadding + mTextWidth + mTextRightPadding;
    mIndicatorHeight = mTextTopPadding + mTextHeight + mTextBottomPadding;
 
    float backgroundProgressBarStartX = (float) (1.0 * mIndicatorWidth / 2);
    float backgroundProgressBarEndX = mWidth - mIndicatorWidth / 2;
 
    float foregroundProgress = (float) (1.0 * (mWidth - mIndicatorWidth) * currentProgress / 100);
 
    float foregroundProgressBarStartX = (float) (1.0 * mIndicatorWidth / 2);
    float foregroundProgressBarEndX = foregroundProgressBarStartX + foregroundProgress;
 
    Log.e(TAG, "backgroundProgressBarStartX----" + backgroundProgressBarStartX
            + "----backgroundProgressBarEndX----" + backgroundProgressBarEndX
            + "----foregroundProgress----" + foregroundProgress
            + "----foregroundProgressBarStartX----" + foregroundProgressBarStartX
            + "----foregroundProgressBarEndX----" + foregroundProgressBarEndX
    );
 
    float progressX = foregroundProgress;
    float progressY = (float) (mCenterPadding + mIndicatorHeight * 1.5);
 
 
    //进度背景
    canvas.drawLine(backgroundProgressBarStartX, progressY, backgroundProgressBarEndX, progressY, mBackgroundPaint);
 
    //进度前景色
    canvas.drawLine(foregroundProgressBarStartX, progressY, foregroundProgressBarEndX, progressY, mProgressPaint);
 
    //指示器
    drawPath(canvas, progressX, 45);
 
    //文字
    drawText(canvas, mTextProgress, progressX);
}

1. 指示器绘制

通过Path进行绘制,描绘出矩形以及下三角

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * 绘制指示器
 *
 * @param canvas
 * @param progressX
 */
private void drawPath(Canvas canvas, float progressX, float rotateAngle) {
    mPath.reset();
 
    mPath.moveTo(progressX, 0); //1
    mPath.lineTo(progressX + mIndicatorWidth, 0); //2
    mPath.lineTo(progressX + mIndicatorWidth, mIndicatorHeight); //3
    mPath.lineTo((float) (progressX + mIndicatorWidth * 0.75), mIndicatorHeight); //4
    mPath.lineTo((float) (progressX + mIndicatorWidth * 0.5), (float) (mIndicatorHeight * 1.5)); //5
    mPath.lineTo((float) (progressX + mIndicatorWidth * 0.25), mIndicatorHeight); //6
    mPath.lineTo(progressX, mIndicatorHeight);//7
    mPath.close();
 
    canvas.drawPath(mPath, mPathPaint);
}

2. 文字的绘制

文字的绘制涉及到测量上边测量中已经提及,但是在绘制中有涉及到基线获取如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * 计算绘制文字时的基线到中轴线的距离
 *
 * @param p
 * @return 基线和centerY的距离
 */
public float getBaseline(Paint p) {
    Paint.FontMetrics fontMetrics = p.getFontMetrics();
    return (fontMetrics.descent - fontMetrics.ascent) / 2 - fontMetrics.descent;
}
 
/**
 * 绘制文字
 *
 * @param canvas
 * @param text
 * @param progressX
 */
private void drawText(Canvas canvas, String text, float progressX) {
    float baseline = getBaseline(mTextPaint);
    float textY = mTextTopPadding + mTextHeight / 2 + baseline;
    canvas.drawText(text, progressX + mTextTopPadding, textY, mTextPaint);
}

总结

以上的完整代码已经上传至github,github地址,如有需要可以上去看看,也可以下载直接使用或者是通过jcenter引入,由于jcenter现状已经停止维护,所以后续会迁入maven

以上就是Android实现带有指示器的进度条的详细内容,更多关于Android 指示器进度条的资料请关注脚本之家其它相关文章!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://juejin.cn/post/6959462670630125576

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • Android利用Canvas标点画线并加入位移动画(2)

    Android利用Canvas标点画线并加入位移动画(2)

    这篇文章主要为大家详细介绍了Android利用Canvas标点画线并加入位移动画的第二篇,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Android开发基于Drawable实现圆角矩形的方法

    Android开发基于Drawable实现圆角矩形的方法

    这篇文章主要介绍了Android开发基于Drawable实现圆角矩形的方法,结合实例形式分析了Drawable的功能、相关图形绘制函数与使用方法,需要的朋友可以参考下
    2017-10-10
  • 详解房卡麻将分析系列

    详解房卡麻将分析系列 "牌局回放" 之 播放处理

    这篇文章主要介绍了详解房卡麻将分析系列 "牌局回放" 之 播放处理的相关资料,需要的朋友可以参考下
    2017-03-03
  • Android动画之雷达扫描效果

    Android动画之雷达扫描效果

    雷达扫描效果在我们日常会经常看到,比如在新浪微博上有一个雷达功能,感觉类似于微信附近的人。只是多了一个类似于雷达扫描效果的动画,某些知名安全软件也有这样的雷达效果,因此今天在这里小编带着大家学习一下。
    2016-08-08
  • 解析Android Jetpack简介

    解析Android Jetpack简介

    Jetpack是一套库、工具和指南的集合,帮助开发者更轻松地编写优质应用,这篇文章主要介绍了Android Jetpack简介,需要的朋友可以参考下
    2022-09-09
  • Android调用手机摄像头的方法

    Android调用手机摄像头的方法

    这篇文章主要为大家详细介绍了Android调用手机摄像头的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Android自定义水平或垂直虚线效果

    Android自定义水平或垂直虚线效果

    这篇文章主要为大家详细介绍了Android自定义虚线效果,教大家如何绘制水平、垂直虚线,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Android序列化接口Parcelable与Serializable接口对比

    Android序列化接口Parcelable与Serializable接口对比

    我们使用 Intent 传递数据的时候,putExtra() 所支持的数据类型事有限的,当需要传递自定义对象的时候就需要序列化。Serializable更简单但是会把整个对象进行序列化因此效率比Parcelable低一些
    2023-02-02
  • Android so的热升级尝试

    Android so的热升级尝试

    这篇文章主要介绍了Android so的热升级尝试的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11
  • Android调用堆栈跟踪实例分析

    Android调用堆栈跟踪实例分析

    这篇文章主要介绍了Android调用堆栈跟踪的方法,以实例形式较为详细的分析了Android错误信息分析的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10

最新评论