我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Android自定义分段式进度条

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Android自定义分段式进度条

安卓自定义分段式的进度条,供大家参考,具体内容如下

前一段时间公司新项目接到一个新需求,其中界面需要用到一个分段式的进度条,找了半天没有发现类似的控件,于是决定自己写一个,话不多说,上代码


package com.djt.aienglish.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Build;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;

import com.djt.aienglish.R;


public class SegmentProgressBar extends View {
    
    private static final int DEFAULT_HEIGHT_PROGRESS_BAR = 10;
    
    private static final float mRadius = 60;
    
    private int defaultBackgroundColor = Color.parseColor("#DDE4F4");
    
    private int defaultProgressBarColor = Color.parseColor("#3D7EFE");

    
    protected Paint mPaint = new Paint();
    
    protected float mOffset = 0;
    protected float mDefaultOffset = 10;

    
    protected int mProgressBarHeight = dp2px(DEFAULT_HEIGHT_PROGRESS_BAR);

    
    protected float mRealWidth;
    
    private int mMax = 100;
    
    private int mProgress = 0;
    
    private float progressWith = 0;


    public SegmentProgressBar(Context context) {
        this(context, null);
    }

    public SegmentProgressBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SegmentProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initDefaultValues(context, attrs, defStyleAttr);
        init();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public SegmentProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initDefaultValues(context, attrs, defStyleAttr);
        init();
    }

    
    private void initDefaultValues(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        TypedArray arr =
                context.obtainStyledAttributes(attrs, R.styleable.ProgressBar, defStyleAttr, defStyleAttr);
        if (arr != null) {
            mProgress = arr.getInt(R.styleable.ProgressBar_progress, 0);
            mMax = arr.getInt(R.styleable.ProgressBar_max, 0);
            defaultBackgroundColor = arr.getColor(R.styleable.ProgressBar_progressBackground, Color.parseColor("#DDE4F4"));
            defaultProgressBarColor = arr.getColor(R.styleable.ProgressBar_progressBarColor, Color.parseColor("#3D7EFE"));
        }
        arr.recycle();
    }


    
    private void init() {
    }


    
    public void setMax(int max) {
        this.mMax = max;
        if (max > 0) {
            mOffset = mRealWidth / mMax / 8;
            if (mOffset > mDefaultOffset) {
                mOffset = mDefaultOffset;
            }
            progressWith = (mRealWidth - (mMax - 1) * mOffset) / mMax;
        }
        invalidate();
    }

    
    public void setProgress(int progress) {
        this.mProgress = progress;
        invalidate();
    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        //高度
        int height = measureHeight(heightMeasureSpec);
        //必须调用该方法来存储View经过测量的到的宽度和高度
        setMeasuredDimension(width, height);
        //真正的宽度值是减去左右padding
        mRealWidth = getMeasuredWidth() - getPaddingRight() - getPaddingLeft();
        //使用画笔在画布上绘制进度
        if (mMax > 0) {
            mOffset = mRealWidth / mMax / 8;
            if (mOffset > mDefaultOffset) {
                mOffset = mDefaultOffset;
            }
            progressWith = (mRealWidth - (mMax - 1) * mOffset) / mMax;
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //真正的宽度值是减去左右padding
        mRealWidth = w - getPaddingRight() - getPaddingLeft();
        //使用画笔在画布上绘制进度
        if (mMax > 0) {
            mOffset = mRealWidth / mMax / 8;
            if (mOffset > mDefaultOffset) {
                mOffset = mDefaultOffset;
            }
            progressWith = (mRealWidth - (mMax - 1) * mOffset) / mMax;
        }
        invalidate();
    }

    
    private int measureHeight(int measureSpec) {
        int result = 0;
        //父布局告诉我们控件的类型
        int specMode = MeasureSpec.getMode(measureSpec);
        //父布局传过来的视图大小
        int specSize = MeasureSpec.getSize(measureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = (int) (getPaddingTop() + getPaddingBottom() + mProgressBarHeight);
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected synchronized void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(defaultBackgroundColor);
        //设置画笔类型
        mPaint.setStyle(Paint.Style.FILL);
        //去除锯齿
        mPaint.setAntiAlias(true);
        //使用画笔在画布上绘制背景
        canvas.drawRoundRect(0, 0, mRealWidth, getHeight(), mRadius, mRadius, mPaint);
        //绘制进度条
        mPaint.setColor(defaultProgressBarColor);
        for (int i = 0; i < mProgress; i++) {
            canvas.drawRoundRect(i * (progressWith + mOffset), 0, progressWith + i * (progressWith + mOffset), getHeight(), mRadius, mRadius, mPaint);
        }
    }

    
    protected int dp2px(int dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, getResources().getDisplayMetrics());
    }
}

别忘了在value下的attr.xml加上默认属性配置


<!--分段式进度条-->
    <declare-styleable name="ProgressBar">
        <attr name="progress" format="integer" />
     <attr name="max" format="integer" />
        <attr name="progressBarColor" format="color" />
        <attr name="progressBackground" format="color" />
</declare-styleable>

在布局中使用


<com.djt.aienglish.widget.SegmentProgressBar
                    android:id="@+id/spb"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:max="10"
                    app:progress="1" />

最后再来一个实际使用效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Android自定义分段式进度条

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Android自定义Material进度条效果

首先看下效果图布局文件:2022-06-06

Android自定义View之圆形进度条式按钮

介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图。和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态。而且他说圆形进度的功能已经实现了。那么我们只需要对中间的两个状态做处理就行了。
2022-06-06

Android自定义水平进度条的圆角进度

平时项目中经常用到自定义进度条样式,我们一般实现的也是下面的第一种,至于第二种的圆角进度,网上介绍的资料也不是很多,这里一起展示一下这两种的实现。下面开始看代码,先从主界面布局开始看起:
2022-06-06

android怎么自定义曲线进度条

要自定义曲线进度条,您可以按照以下步骤进行操作:创建一个自定义的View类,继承自ProgressBar类。在View类的构造函数中,设置进度条的样式和属性。例如,设置曲线的颜色、宽度等。重写View类的onDraw方法,绘制曲线进度条的样
2023-10-26

Android实现自定义圆形进度条

今天无意中发现一个圆形进度,想想自己实现一个,如下图:基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制当前进度的百分比字符 4.绘制一个与之前实心圆相同颜色的空心圆 5.逐渐改变当
2022-06-06

android自定义进度条渐变圆形

在安全卫生上,经常看到有圆形的进度条在转动,效果非常好看,于是就尝试去实现一下,具体实现过程不多说了,直接上效果图,先炫耀下。 效果图:分析:比较常见于扫描结果、进度条等场景 利用canvas.drawArc(RectF oval, flo
2022-06-06

Android动态自定义圆形进度条

效果图:A.绘制圆环,圆弧,文本//1.画圆环 //原点坐标 float circleX = width / 2; float circleY = width / 2; //半径 float radius = width / 2 - rou
2022-06-06

Android实现带数字的圆形进度条(自定义进度条)

开发 设计搞了一个带圆形进度的进度条,在GitHub上逛了一圈,发现没有,自己撸吧。 先看界面效果:主要思路是写一个继承ProgressBar的自定义View,不废话,直接上代码:package com.fun.progressbarwit
2022-06-06

自定义Android圆形进度条(附源码)

本文实例讲述了Android自定义圆形进度条,分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下: 自定义的View:import com.example.circlepregress.R; import android.co
2022-06-06

Android中怎么自定义进度条颜色

今天就跟大家聊聊有关Android中怎么自定义进度条颜色,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。styles.xml找到xml后,进去找到: