两个弧形的progressBar

最新推荐文章于 2024-04-10 09:48:05 发布
最新推荐文章于 2024-04-10 09:48:05 发布
阅读量353 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq675354081/article/details/78094508
版权

这里写图片描述

/**
 * 双弧形进度条 
 */
public class DoubleArcProgressBar extends View {

    private final static int ANIMATOR_DURATION = 500;

    //开始角度
    private float mStartAngle;
    //角度
    private float mAngle;


    //内部弧形相关
    private Paint mInsideArcPaint;
    private int mInsideArcColor;
    private int mInsideProgressArcColor;
    private int mInsideArcWidth;
    private int mInsideRadius;
    private int mInsideValue;
    private int mInsideMax;
    private RectF mInsideRect;

    //外部弧形相关
    private Paint mExtArcPaint;
    private int mExtArcColor;
    private int mExtProgressArcColor;
    private int mExtArcWidth;
    private int mExtRadius;
    private int mExtValue;
    private int mExtMax;
    private RectF mExtRect;

    //-----------文字相关-------------
    //从上往下
    private Paint mText1Paint;
    private int mText1Color;
    private int mText1Size;
    private String mText1;
    private Paint mText2Paint;
    private int mText2Color;
    private int mText2Size;
    private String mText2;
    private Paint mText3Paint;
    private int mText3Color;
    private int mText3Size;
    private String mText3;
    private Paint mText4Paint;
    private int mText4Color;
    private int mText4Size;
    private String mText4;

    private Rect mRectText;

    private PaintFlagsDrawFilter mDrawFilter;
    private ValueAnimator mProgressAnimator;
    //动画使用
    private int mInsideCurValue;
    private int mExtCurValue;

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

    public DoubleArcProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DoubleArcProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initConfig(context, attrs);
        initUtil();
    }

    /**
     * 初始化布局配置
     */
    private void initConfig(Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DoubleArcProgressBar);
        mStartAngle = a.getFloat(R.styleable.DoubleArcProgressBar_drpb_start_angle, 135);
        mAngle = a.getFloat(R.styleable.DoubleArcProgressBar_drpb_angle, 270);

        mInsideArcColor = a.getColor(R.styleable.DoubleArcProgressBar_drpb_inside_color, Color.GRAY);
        mInsideProgressArcColor = a.getColor(R.styleable.DoubleArcProgressBar_drpb_inside_progress_color, Color.GREEN);
        mInsideArcWidth = a.getDimensionPixelOffset(R.styleable.DoubleArcProgressBar_drpb_inside_width, dp2px(4));
        mInsideMax = a.getInteger(R.styleable.DoubleArcProgressBar_drpb_inside_max, 100);
        mInsideValue = a.getColor(R.styleable.DoubleArcProgressBar_drpb_inside_value, 10);
        mInsideRadius = a.getDimensionPixelOffset(R.styleable.DoubleArcProgressBar_drpb_inside_radius, dp2px(35));

        mExtArcColor = a.getColor(R.styleable.DoubleArcProgressBar_drpb_ext_color, Color.GRAY);
        mExtProgressArcColor = a.getColor(R.styleable.DoubleArcProgressBar_drpb_ext_progress_color, Color.GREEN);
        mExtArcWidth = a.getDimensionPixelOffset(R.styleable.DoubleArcProgressBar_drpb_ext_width, dp2px(4));
        mExtMax = a.getInteger(R.styleable.DoubleArcProgressBar_drpb_ext_max, 100);
        mExtValue = a.getColor(R.styleable.DoubleArcProgressBar_drpb_ext_value, 20);
        mExtRadius = a.getDimensionPixelOffset(R.styleable.DoubleArcProgressBar_drpb_ext_radius, dp2px(43));


        mText1Color = a.getColor(R.styleable.DoubleArcProgressBar_drpb_text1_color, Color.WHITE);
        mText1Size = a.getDimensionPixelSize(R.styleable.DoubleArcProgressBar_drpb_text1_size, sp2px(12));
        mText1 = a.getString(R.styleable.DoubleArcProgressBar_drpb_text1);
        mText2Color = a.getColor(R.styleable.DoubleArcProgressBar_drpb_text2_color, Color.WHITE);
        mText2Size = a.getDimensionPixelSize(R.styleable.DoubleArcProgressBar_drpb_text2_size, sp2px(12));
        mText2 = a.getString(R.styleable.DoubleArcProgressBar_drpb_text2);
        mText3Color = a.getColor(R.styleable.DoubleArcProgressBar_drpb_text3_color, Color.WHITE);
        mText3Size = a.getDimensionPixelSize(R.styleable.DoubleArcProgressBar_drpb_text3_size, sp2px(12));
        mText3 = a.getString(R.styleable.DoubleArcProgressBar_drpb_text3);
        mText4Color = a.getColor(R.styleable.DoubleArcProgressBar_drpb_text4_color, Color.WHITE);
        mText4Size = a.getDimensionPixelSize(R.styleable.DoubleArcProgressBar_drpb_text4_size, sp2px(12));
        mText4 = a.getString(R.styleable.DoubleArcProgressBar_drpb_text4);
        a.recycle();

    }

    private void initUtil() {

        mInsideArcPaint = new Paint();
        mInsideArcPaint.setAntiAlias(true);
        mInsideArcPaint.setStyle(Paint.Style.STROKE);
        mInsideArcPaint.setStrokeWidth(mInsideArcWidth);
        mInsideArcPaint.setColor(mInsideArcColor);
        mInsideArcPaint.setStrokeCap(Paint.Cap.ROUND);

        mExtArcPaint = new Paint();
        mExtArcPaint.setAntiAlias(true);
        mExtArcPaint.setStyle(Paint.Style.STROKE);
        mExtArcPaint.setStrokeWidth(mExtArcWidth);
        mExtArcPaint.setColor(mExtArcColor);
        mExtArcPaint.setStrokeCap(Paint.Cap.ROUND);

        mText1Paint = new Paint();
        mText1Paint.setAntiAlias(true);
        mText1Paint.setTextSize(mText1Size);
        mText1Paint.setColor(mText1Color);
        mText1Paint.setTextAlign(Paint.Align.CENTER);

        mText2Paint = new Paint();
        mText2Paint.setAntiAlias(true);
        mText2Paint.setTextSize(mText2Size);
        mText2Paint.setColor(mText2Color);
        mText2Paint.setTextAlign(Paint.Align.CENTER);

        mText3Paint = new Paint();
        mText3Paint.setAntiAlias(true);
        mText3Paint.setTextSize(mText3Size);
        mText3Paint.setColor(mText3Color);
        mText3Paint.setTextAlign(Paint.Align.CENTER);

        mText4Paint = new Paint();
        mText4Paint.setAntiAlias(true);
        mText4Paint.setTextSize(mText4Size);
        mText4Paint.setColor(mText4Color);
        mText4Paint.setTextAlign(Paint.Align.CENTER);

        mRectText = new Rect();
        mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = getPaddingLeft() + getPaddingRight();
        int height = getPaddingTop() + getPaddingBottom();
        width += mExtRadius * 2 + mExtArcWidth;
        height += mExtRadius * 2 + getFontHeight(mText4Paint, mText4Size) / 2 + mExtArcWidth;
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //抗锯齿
        canvas.setDrawFilter(mDrawFilter);

        drawInsideArc(canvas);
        drawExtArc(canvas);
        drawText(canvas);

    }

    /**
     * 绘制内部弧形
     */
    private void drawInsideArc(Canvas canvas) {
        if (mInsideRect == null) {
            mInsideRect = new RectF();
            mInsideRect.left = getCenterX() - mInsideRadius - mInsideArcWidth / 2;
            mInsideRect.top = getCenterY() - mInsideRadius - mInsideArcWidth / 2;
            mInsideRect.right = getCenterX() + mInsideRadius + mInsideArcWidth / 2;
            mInsideRect.bottom = getCenterY() + mInsideRadius + mInsideArcWidth / 2;
        }

        mInsideArcPaint.setColor(mInsideArcColor);
        canvas.drawArc(mInsideRect, mStartAngle, mAngle, false, mInsideArcPaint);

        float angle = (mInsideCurValue * 1.0f / mInsideMax) * mAngle;
        if (angle <= 0) {
            return;
        }
        mInsideArcPaint.setColor(mInsideProgressArcColor);
        canvas.drawArc(mInsideRect, mStartAngle, angle, false, mInsideArcPaint);
    }

    /**
     * 绘制外部弧形
     */
    private void drawExtArc(Canvas canvas) {
        if (mExtRect == null) {
            mExtRect = new RectF();
            mExtRect.left = getCenterX() - mExtRadius - mExtArcWidth / 2;
            mExtRect.top = getCenterY() - mExtRadius - mExtArcWidth / 2;
            mExtRect.right = getCenterX() + mExtRadius + mExtArcWidth / 2;
            mExtRect.bottom = getCenterY() + mExtRadius + mExtArcWidth / 2;
        }
        mExtArcPaint.setColor(mExtArcColor);
        canvas.drawArc(mExtRect, mStartAngle, mAngle, false, mExtArcPaint);

        float angle = (mExtCurValue * 1.0f / mExtMax) * mAngle;
        if (angle <= 0) {
            return;
        }
        mExtArcPaint.setColor(mExtProgressArcColor);
        canvas.drawArc(mExtRect, mStartAngle, angle, false, mExtArcPaint);
    }

    /**
     * 绘制文字
     *
     * @param canvas
     */
    private void drawText(Canvas canvas) {
        int x = 0;
        int y = 0;
        boolean text1IsNotEmp = mText1 != null && !mText1.isEmpty();
        boolean text2IsNotEmp = mText2 != null && !mText2.isEmpty();
        boolean text3IsNotEmp = mText3 != null && !mText3.isEmpty();
        boolean text4IsNotEmp = mText4 != null && !mText4.isEmpty();


        if (text1IsNotEmp) {
            x = getCenterX();
            y = getCenterY() - getFontHeight(mText1Paint, mText1Size);
            if (text2IsNotEmp) {
                y = y + getFontHeight(mText2Paint, mText2Size) / 3 + dp2px(2);
            }

            canvas.drawText(mText1, x, y, mText1Paint);
        }

        if (text2IsNotEmp) {
            x = getCenterX();
            y = getCenterY() + getFontHeight(mText2Paint, mText2Size) / 3;

            canvas.drawText(mText2, x, y, mText2Paint);
        }

        if (text3IsNotEmp) {
            x = getCenterX();
            y = getCenterY() + mExtRadius - getFontHeight(mText3Paint, mText3Size) + dp2px(2);
            canvas.drawText(mText3, x, y, mText3Paint);
        }

        if (text4IsNotEmp) {
            x = getCenterX();
            y = getCenterY() + mExtRadius;
            canvas.drawText(mText4, x, y, mText4Paint);
        }
    }

    /**
     * 获取圆心x坐标
     *
     * @return x
     */
    private int getCenterX() {
        return getPaddingLeft() + mExtRadius + mExtArcWidth / 2;
    }

    /**
     * 获取圆心u坐标
     *
     * @return y
     */
    private int getCenterY() {
        return getPaddingTop() + mExtRadius + mExtArcWidth / 2;
    }


    private int getFontHeight(Paint paint, int textSize) {
        paint.setTextSize(textSize);
        paint.getTextBounds("j", 0, 1, mRectText);
        return mRectText.height();
    }

    private int getTextWidth(Paint paint, int textSize, String text) {
        paint.setTextSize(textSize);
        paint.getTextBounds(text, 0, text.length(), mRectText);
        return mRectText.width();
    }


    public void setValue(int insideValue, int extValue) {

        this.mInsideValue = insideValue;
        this.mText1 = insideValue + "%";
        this.mExtValue = extValue;
        this.mText3 = extValue + "%";
        startAnimation();
    }

    /**
     * 为进度设置动画
     */
    public void startAnimation() {
        mProgressAnimator = ValueAnimator.ofFloat(0, mAngle);
        mProgressAnimator.setDuration(ANIMATOR_DURATION);
        mProgressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float angle = (float) animation.getAnimatedValue();
                mInsideCurValue = (int) ((angle / mAngle) * mInsideValue);
                mExtCurValue = (int) ((angle / mAngle) * mExtValue);
                invalidate();
            }
        });
        mProgressAnimator.start();
    }

    private int dp2px(int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,
                Resources.getSystem().getDisplayMetrics());
    }

    private int sp2px(int sp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp,
                Resources.getSystem().getDisplayMetrics());
    }

}

    <declare-styleable name="DoubleArcProgressBar">
        <attr name="drpb_start_angle" format="float" />
        <attr name="drpb_angle" format="float" />
        <attr name="drpb_inside_color" format="color"/>
        <attr name="drpb_inside_progress_color" format="color"/>
        <attr name="drpb_inside_width"  format="dimension"/>
        <attr name="drpb_inside_value" format="integer"/>
        <attr name="drpb_inside_max" format="integer"/>
        <attr name="drpb_inside_radius" format="dimension"/>
        <attr name="drpb_ext_color" format="color"/>
        <attr name="drpb_ext_progress_color" format="color"/>
        <attr name="drpb_ext_width"  format="dimension"/>
        <attr name="drpb_ext_value" format="integer"/>
        <attr name="drpb_ext_max" format="integer"/>
        <attr name="drpb_ext_radius" format="dimension"/>
        <attr name="drpb_text1_color" format="color" />
        <attr name="drpb_text1_size" format="dimension" />
        <attr name="drpb_text1" format="string"/>
        <attr name="drpb_text2_color" format="color" />
        <attr name="drpb_text2_size" format="dimension" />
        <attr name="drpb_text2" format="string"/>
        <attr name="drpb_text3_color" format="color" />
        <attr name="drpb_text3_size" format="dimension" />
        <attr name="drpb_text3" format="string"/>
        <attr name="drpb_text4_color" format="color" />
        <attr name="drpb_text4_size" format="dimension" />
        <attr name="drpb_text4" format="string"/>
    </declare-styleable>
Android 自定义ProgressBar横向圆角
JOY的博客
11-17 1927
ProgressBar大家可能项目中都会用到,但是大部分都是根据UI给的符合项目主题的自定义形式的; 下面就是我们项目中一个显示学习进度的横向ProgressBar; 可以看到四个角都是圆角的,本人首先想到的是自定义,但是会发现四个角总是不能够实现,要不左侧会被切成直角,要不进度内侧会被切成直角,也是从网上查找分析,最终实现如下: 结合网上大神的示意,在此作个笔记,方便之后遇到直接拿来用,节省时间. 借鉴ProgressBar 进度条的进度两端是圆角的方法 但是根据自定义的shape 或者是
Android-自定义ProgressBar实现圆弧进度条
Zeeeeeeee的博客
09-10 2184
继承于ProgressBar实现，保留了Progressbar的特性，源码在文尾。。参数 name format description borderWidth integer 圆弧边框的宽度 progressStyle tick/arc 进度条类型，tick为带刻度的 radius integer 半径 arcbgColor color 圆
android弧形渐变可显进度CircleProgressbar
05-18
可从API 8开始兼容，一个带进度显示的CircleProgressbar，实现从0点钟开始渐变颜色，利用扫描渲染SweepGradient,因为渲染角度是从3点钟方向开始，所以又定义了一个Matrix旋转-90°，让它从0点开始渐变颜色，有需要的随便下载看看 平台用的android studio，用Eclipse的要稍微改动下fragment_main的自定义View链接，给他设置上应用名
android 条形ProgressBar半圆弧形进度
07-19
条形ProgressBar 半圆弧形进度 百分比的字符串跟随进度
ColorArcProgressBar：优雅的弧形进度条库
gitblog_00089的博客
04-10 431
ColorArcProgressBar：优雅的弧形进度条库 去发现同类优质开源项目:https://gitcode.com/ 如果你在寻找一个能够为你的Android应用增添视觉魅力的进度条组件，那么绝对值得你一试。这是一个开源的、高度可定制的弧形进度条库，它以丰富的颜色和动态效果为你的UI设计注入活力。 项目简介 ColorArcProgressBar是一个轻量级的Android库，旨在提供一...
弧形进度条
06-05
传统的进度条要么横向要么纵向，遇到需求要呈现弧度形状的进度条时，这个就会对你有帮助！
Android 自定义带进度显示的半圆形进度条ArcTextProgressBar
rainmonth的专栏
05-17 1911
自定义ArcTextProgressBar
圆形ProgressBar
01-04
默认的`ProgressBar`有两种样式：水平和垂直。而这里的"圆形ProgressBar"则是一种特殊形态，它将进度条设计为圆形，看起来更美观且符合现代UI设计趋势。 要创建一个自定义的圆形ProgressBar，我们需要以下步骤： 1...
WPF中使用ProgressBar实现垂直温度计效果
11-15
ProgressBar有两个关键属性：`Value` 和 `Maximum`。`Value` 指示进度条当前代表的值，而 `Maximum` 定义了进度条可以达到的最大值。为了实现垂直温度计的效果，我们需要调整控件的布局属性，如`Orientation`。 1. ...
Android 自定义各式各样的圆形ProgressBar
06-20
Android的ProgressBar有两种主要类型：Horizontal和Circular。Horizontal ProgressBar显示为一条水平条，随着进度增加而填充；Circular ProgressBar则显示为一个圆形，填充或旋转以表示进度。我们关注的是后者，即...
Android代码-Android弧形拖动条(ArcSeekBar)
08-07
这个是在公司项目中准备使用的一个控件，本准备直接在网上搜一个用，可惜找到的很多都是 ProgressBar，并不具备拖拽功能，于是自己动手实现了一个，其功能和特性均仿照 SeekBar 进行设计。 效果预览 支持的特性 [x...
圆形进度条(弧形刻度)CircleProgress
07-09
圆形进度条(弧形刻度)CircleProgress
自定义进度条&自定义弧形进度条（附带动画效果）
03-13
用canvas自定义弧形进度条以及可滑动的带状态值条形进度条，并实现进度动画。
【Android进度条】三种方式实现自定义圆形进度条ProgressBar
bangexiyang的博客
03-01 567
点击打开链接 总结了3种方法： 1.多张图片切换 2.自定义颜色 3.旋转自定义图片
转：androidseekbar
weixin_30706507的博客
04-06 217
Android的SeekBar 使用SeekBar的时候，经常遇到的问题有如下： 1. seekbar的拖动按钮没有居中。 2. seekbar的高度有问题。 3. seekbar的拖动按钮在最左最右显示不全。 首先，要解决上述问题，要先检查layout文件在描述seekbar时，有没有正确设置图片的尺寸和检查屏幕密度与图片是否放置在相应的drawable文件夹中（dr...
Android自定义view-CircleSeekbar
weixin_33965305的博客
11-02 151
自定义view练手，效果图如下：实现功能    可设置圆环颜色和线宽及触摸后的颜色和线宽    可设置圆环内圈显示的文本内容及字体大小、颜色    可设置触摸点的图片    可设置触摸的有效范围源码github链接使用示例&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:to...
Android的SeekBar
Haking的博客
07-07 217
使用SeekBar的时候，经常遇到的问题有如下： 1. seekbar的拖动按钮没有居中。 2. seekbar的高度有问题。 3. seekbar的拖动按钮在最左最右显示不全。   首先，要解决上述问题，要先检查layout文件在描述seekbar时，有没有正确设置图片的尺寸和检查屏幕密度与图片是否放置在相应的drawable文件夹中（drawable-hdpi, drawable-m...
安卓SeekBar
weixin_34123613的博客
05-02 74
public class Speak extends Fragment implements OnSeekBarChangeListener { private SeekBar bar1; private TextView textview1; public View onCreateView(LayoutInflater ...
【低空经济】低空人工智能调度中心建设方案.pdf
最新发布
05-06
【低空经济】低空人工智能调度中心建设方案
实现Android自定义弧形渐变进度条CircleProgressbar
总结：本例详细介绍了如何创建一个从API 8开始兼容的圆形进度条（CircleProgressbar），该进度条支持弧形渐变颜色效果，并从0点位置开始显示。开发者需要使用Android Studio作为开发环境，通过调整Matrix实现渐变...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值