Android 自定义View-圆形进度条

最新推荐文章于 2023-10-17 15:43:52 发布
最新推荐文章于 2023-10-17 15:43:52 发布
阅读量198 收藏
点赞数

 第一步:上图

emmm效果图不错

第二步:上代码

1.自定义View

public class CircleProgress extends View {

    //定义颜色
    private int background_color, ring_color, ring_progress_color, dot_color, percent_color,
            text_progress_color, text_color;

    private float ringSize, dotSize, textProgressSize, texSize, texMarginSize;

    private String showText; //显示固定文字

    ValueAnimator animator; //动画

    //增长动画中的临时进度
    private float tempProgress = 0;
    //当前进度
    private int curProgress;
    //最大进度
    private int maxProgress = 100;

    //定义画笔
    private Paint mPaint;
    private Paint ringPaint;   //圆弧
    private Paint ringProgressPaint; //进度圆弧
    private Paint textPaint;  //文本
    private Paint pointPaint; //点


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

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

    public CircleProgress(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获得atts.xml定义的属性值，存储在TypedArray中
        TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleProgress, defStyleAttr, 0);
        int n = ta.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = ta.getIndex(i);
            switch (attr) {
                case R.styleable.CircleProgress_ringColor: //圆环颜色
                    ring_color = ta.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.CircleProgress_ringSize: //圆环宽度
                    ringSize = ta.getDimension(R.styleable.CircleProgress_ringSize, 13);
                    break;
                case R.styleable.CircleProgress_ringprogressColor: //圆环进度颜色
                    ring_progress_color = ta.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.CircleProgress_dotColor:  //小圆点
                    dot_color = ta.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.CircleProgress_dotSize:  //小圆点大小
                    dotSize = ta.getDimension(R.styleable.CircleProgress_dotSize, 32);
                    break;

                case R.styleable.CircleProgress_textProgressColor: //字体进度的颜色
                    text_progress_color = ta.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.CircleProgress_textProgressSize:  //字体进度大小
                    textProgressSize = ta.getDimension(R.styleable.CircleProgress_textProgressSize, 32);
                    break;

                case R.styleable.CircleProgress_textPercentColor:  //百分号颜色
                    percent_color = ta.getColor(attr, Color.BLACK);
                    break;

                case R.styleable.CircleProgress_showProgressText:  //固定字体显示
                    showText = ta.getString(R.styleable.CircleProgress_showProgressText);
                    break;
                case R.styleable.CircleProgress_texColor: //字体的颜色
                    text_color = ta.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.CircleProgress_texSize:  //字体大小
                    texSize = ta.getDimension(R.styleable.CircleProgress_texSize, 17);
                    break;

                case R.styleable.CircleProgress_texMarginSize:  //字之间的款阿杜
                    texMarginSize = ta.getDimension(R.styleable.CircleProgress_texMarginSize, 9);
                    break;
            }
        }
        ta.recycle();
        init();
    }


    private void init() {
        mPaint = new Paint(); //画笔
        mPaint.setAntiAlias(true);
        ringPaint = new Paint();  //圆弧
        ringPaint.setAntiAlias(true);
        ringProgressPaint = new Paint();  //进度圆弧
        ringProgressPaint.setAntiAlias(true);
        textPaint = new Paint();  //文字画笔
        textPaint.setAntiAlias(true);
        pointPaint = new Paint(); //点
        pointPaint.setAntiAlias(true);

    }

    /**
     * 重写onMeasure()方法，支持wrap_content属性
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width;
        int height;
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);  //宽度的测量模式
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);  //宽度的测量值
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);  //高度的测量模式
        int heightSize = MeasureSpec.getSize(heightMeasureSpec); //高度的测量值
        //如果布局里面设置的是固定值,这里取布局里面的固定值;如果设置的是match_parent,则取父布局的大小
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            //如果布局里面没有设置固定值,这里取布局的宽度的1/2
            width = widthSize * 1 / 2;
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            //如果布局里面没有设置固定值,这里取布局的高度的3/4
            height = heightSize * 3 / 4;
        }

        setMeasuredDimension(width, height);

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 画最外层的大圆环
        int centre = getWidth() / 2; //获取圆心的x坐标
        int radius = (int) (centre - 2 * ringSize); //圆环的半径
        mPaint.setColor(ring_color); //设置圆环的颜色
        mPaint.setStyle(Paint.Style.STROKE); //设置空心
        mPaint.setStrokeWidth(ringSize); //设置圆环的宽度
        mPaint.setAntiAlias(true);  //消除锯齿
        canvas.drawCircle(centre, centre, radius, mPaint); //画出圆环

        //画进度文字
        //设置进度值的大小颜色，字体样式
        textPaint.setStrokeWidth(0);
        textPaint.setColor(text_progress_color);
        textPaint.setTextSize(textProgressSize);
        textPaint.setTypeface(Typeface.MONOSPACE);

        //中间的进度百分比，先转换成float在进行除法运算，不然都为0
        int percent = (int) (((float) tempProgress / (float) maxProgress) * 100);
        String percent_draw;
        if (percent == 0) {
            percent_draw = "00";
        } else {
            percent_draw = percent + "";
        }
        float textHeight = textProgressSize; //进度字体的高度
        float textWidth = textPaint.measureText(percent_draw);

        textPaint.setTextSize(textHeight);
        //   canvas.drawText(percent_draw, centre - 5 * textWidth, centre, textPaint);
        canvas.drawText(percent_draw, centre - textWidth / 2, centre + textProgressSize / 6, textPaint);

        //画百分比号
        textPaint.setStrokeWidth(3);
        textPaint.setTextSize(textHeight / 3);
        // canvas.drawText(text_percent, centre + 5 * textWidth , centre + textWidth / 2, textPaint);
        canvas.drawText("", centre + textWidth / 2, centre + textProgressSize / 8, textPaint);

        //画展示文字
        textPaint.setColor(text_color);
        textPaint.setTextSize(texSize);
        canvas.drawText(showText, centre - textProgressSize / 2 - 20, centre + textProgressSize / 3 + texMarginSize, textPaint);

        //画圆弧
        ringProgressPaint.setStyle(Paint.Style.STROKE);
        ringProgressPaint.setStrokeWidth(ringSize);
        ringProgressPaint.setColor(ring_progress_color);
        RectF oval = new RectF(centre - radius, centre - radius, centre
                + radius, centre + radius);  //用于定义的圆弧的形状和大小的界限

        //创建一个渲染器
        //SweepGradient mSweepGradient=new SweepGradient(canvas.getWidth()/2,canvas.getHeight()/2,new int[]{Color.rgb(130,213,131),Color.rgb(150,251,196),Color.rgb(130,213,131)},null);
        Matrix matrix=new Matrix();
        matrix.setRotate(-90f,canvas.getWidth()/2,canvas.getHeight()/2);
        /*mSweepGradient.setLocalMatrix(matrix);
        ringProgressPaint.setShader(mSweepGradient);*/
        canvas.drawArc(oval, 270, 360 * tempProgress / maxProgress, false, ringProgressPaint);

        /*//画圆点
        // 画进度点   30°角度 的弧度 = 2 * PI / 360 * 30
        int rangle = 0;
        if (tempProgress == 0) {
            rangle = 360 / maxProgress;
        } else {
            rangle = 360 * (int) tempProgress / maxProgress;
        }

        double a = 0.0;//角度
        int pointX = 0;
        int pointY = 0;


        if (rangle > 0 && rangle <= 90) {
            a = 2 * Math.PI / 360 * (270 - rangle);
            pointX = centre + (int) (radius * Math.cos(a));
            pointY = centre - (int) (radius * Math.sin(a));
        } else if (rangle > 90 && rangle <= 180) {
            a = 2 * Math.PI / 360 * (rangle + 90);
            pointX = centre + (int) (radius * Math.cos(a));
            pointY = centre + (int) (radius * Math.sin(a));
        } else if (rangle > 180 && rangle <= 270) {
            a = 2 * Math.PI / 360 * (rangle);
            pointX = centre - (int) (radius * Math.sin(a));
            pointY = centre + (int) (radius * Math.cos(a));
        } else if (rangle > 270 && rangle <= 360) {
            a = 2 * Math.PI / 360 * (rangle - 90);
            pointX = centre - (int) (radius * Math.cos(a));
            pointY = centre - (int) (radius * Math.sin(a));
        }

        //   Log.e("hbj", "rangle==" + rangle + "--pointX=" + pointX + "  pointY==" + pointY);

        pointPaint.setColor(dot_color);
        pointPaint.setStyle(Paint.Style.FILL);
        pointPaint.setAntiAlias(true);  //消除锯齿
        pointPaint.setShadowLayer(10, 0, 0, Color.GRAY);
        //  Log.d("TAG", "pointX = " + pointX + "||pointY = " + pointY);
        canvas.drawCircle(pointX, pointY, dotSize, pointPaint);*/


    }

    public synchronized void setMax(int maxProgress) {
        if (maxProgress < 0) {
            throw new IllegalArgumentException("maxProgress not less than 0");
        }
        this.maxProgress = maxProgress;
    }

    /**
     * 开启动画
     *
     * @param curProgress
     */
    public void setProgressWithAnimation(int curProgress) {
        this.curProgress = curProgress;
        animator = ValueAnimator.ofInt(0, curProgress);
        animator.setDuration(3000);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                tempProgress = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator.start();

    }

    /**
     * 完成测量
     *
     * @param curProgress
     */
    public void completeMeasure(int curProgress) {
        animator.cancel();
        this.curProgress = curProgress;
        tempProgress = curProgress;
        invalidate();
    }

    /**
     * 停止Progress
     */
    public void stopProgress(){
        animator.cancel();
        invalidate();
    }

}

2.自定义属性

<declare-styleable name="CircleProgress">
        <!--背景-->
        <attr name="backGroundColor" format="color"></attr>
        <!--圆环的颜色-->
        <attr name="ringColor" format="color"></attr>
        <!--圆环的宽度-->
        <attr name="ringSize" format="dimension"></attr>
        <!--进度圆环的颜色-->
        <attr name="ringprogressColor" format="color"></attr>

        <!--圆环上的小圆点颜色-->
        <attr name="dotColor" format="color"></attr>
        <!--圆环上的小圆点大小-->
        <attr name="dotSize" format="dimension"></attr>
        <!--进度字体颜色-->
        <attr name="textProgressColor" format="color"></attr>
        <!--进度字体大小-->
        <attr name="textProgressSize" format="dimension"></attr>

        <!--百分号颜色-->
        <attr name="textPercentColor" format="color"></attr>

        <!--固定字体设置-->
        <attr name="showProgressText" format="string"></attr>
        <!--固定字体颜色-->
        <attr name="texColor" format="color"></attr>
        <!--固定字体大小-->
        <attr name="texSize" format="dimension"></attr>

        <!--文字之间的距离-->
        <attr name="texMarginSize" format="dimension"></attr>

        <!--固定字体大小-->
        <attr name="setNumber" format="integer"></attr>

    </declare-styleable>

 3.布局引用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <cn.qbang.circleprogressdemo01.CircleProgress
        android:id="@+id/circle_progress"
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_gravity="center_horizontal"
        app:ringColor="#E8E8E8"
        app:ringSize="2dp"
        app:ringprogressColor="#5F96D2"
        app:showProgressText="正确率(%)"
        app:texColor="#999999"
        app:texMarginSize="25dp"
        app:texSize="16sp"
        app:textProgressColor="#5F96D2"
        app:textProgressSize="47sp"
        tools:ignore="MissingConstraints" />
</LinearLayout>

 4.Activity中使用


public class MainActivity extends AppCompatActivity {
    private CircleProgress circleProgress;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        circleProgress = (CircleProgress) findViewById(R.id.circle_progress);
        circleProgress.setProgressWithAnimation(40);
    }
}

 

其实可以看出来里面的代码有很多注释了 毕竟需求没有那么多

原图是这样的

 

做一个快乐的代码搬运工

原文奉上:https://www.jianshu.com/p/745ea4c646d1

(他的github上面可有很多自定义view  很厉害的以为自定义大佬)

github：https://github.com/baojie0327/ViewAndGroup

 

我的头上没有犄角
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android自定义控件实现圆形进度条
08-31
主要为大家详细介绍了Android自定义控件实现圆形进度条的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android 自定义圆形进度条(圆环刻度)View
ShallCheek
12-31 1万+
当初最早的版本是使用美工切好的图，在上面的基础上覆盖一层背景，但多多少少的有些瑕疵。于是就自己自定义写了一个View实现效果图
Android圆弧形进度条（表盘原理）
pang9998的博客
04-10 935
有图有真相，先来看看效果图： 其实基本原理并不复杂，无非就是根据当前进度来计算对应的弧度，然后绘制出圆弧即可。 主要的难点在于进度条按钮（图标，thumb）的绘制，需要根据当前进度来计算出图标的坐标，然后将icon绘制到合适的坐标上。算法可以参考我的上一篇博客求圆上某点旋转一定弧度之后的新坐标 下面来看看对应的布局文件： <com.pang.robot.faceloginde...
【Android】自定义一个圆形的进度条（圆形不是环形）
boulete的博客
02-11 896
使用clip标签创建一个圆形的进度条
Android 自定义View之圆形进度条
weixin_44021334的博客
09-08 2570
需求是不停的，会有这些需求：可指定画笔（宽度、颜色等）、可指定动画时长等。这些可以通过创建 Java 接口来设置，但我要学自定义View，就要用attr。未完待续~~Android Canvas的drawText()和文字居中方案。
Android自定义View之圆形进度条式按钮
09-01
本文通过实例代码给大家讲解了了android自定义view之圆形进度条式按钮的实例代码，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
android自定义view制作圆形进度条效果
08-31
主要为大家详细介绍了android自定义view制作圆形进度条效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android自定义View实现圆形进度条
01-20
本文实例为大家分享了Android自定义View实现圆形进度条的具体代码，供大家参考，具体内容如下 效果如下： 主要代码 CircularProgressView.java public class CircularProgressView extends View { private Paint ...
Android自定义圆弧进度条（半圆进度条） 圆弧渐变色进度条带指示 圆弧宽高可自由修改
yeziyfx的专栏
10-27 5900
Android 自定义圆弧进度条，支持设置为圆形进度条，弧度圆形渐变色，进度指示条，进度文字。
Android 自定义View 之 圆环进度条
晨曦
04-14 2546
  很多时候我们会使用进度条，而Android默认的进度条是长条的，从左至右。而在日常开发中，有时候UI为了让页面更美观，就需要用到圆环进度条，那么本文就是通过自定义写一个圆环进度条，首先看一下效果图：  关于自定义View的基础知识就不再做过多的讲解了，我们直接进入正题，这一次我们不需要再去创建项目了，就用我之前创建的EasyView。  根据上面的效果图，我们首先来确定XML中的属性样式，修改attrs.xml的代码如下所示：   这里你会发现一个改变，那就是文字颜色和文字大小的属性从之前的中抽出来了，
Android 自定义view 圆形进度条
最新发布
我怀里的猫的博客
10-17 266
先来看看效果，大概要实现这么一个圆形的进度条本文介绍了如何实现一个圆形进度条的自定义 View，并分析了需要实现的基本要素，包括画笔、弧度和圆弧的位置。最后给出了完整的代码。
Android 自定义View实现圆形加载进度条
Android_Gt
03-06 3242
Android 自定义view圆形加载进度条
Android高手进阶之自定义View，自定义属性（带进度的圆形进度条）
移动编程
08-26 521
转载请注明地址：http://blog.csdn.net/xiaanming/article/details/10298163 很多的时候，系统自带的View满足不了我们功能的需求，那么我们就需要自己来自定义一个能满足我们需求的View,自定义View我们需要先继承View，添加类的构造方法，重写父类View的一些方法，例如onDraw，为了我们自定义的View在一个项目中能够重用，有时候我...
Android自定义View之可随时暂停、开启的圆形下载进度条
风一样的男人
08-29 3569
请尊重个人劳动成果，转载注明出处，谢谢！ http://blog.csdn.net/xiaxiazaizai01 这是一个一言不合就手撸一个自定义View的任性时代，因此最近一段时间一直在学习自定义View相关的知识，也看了很多与此相关的博客，有句话叫做不要重复造轮子，别人写好的直接拿过来改吧改吧，能用就行，但是，要想像那些任性的大牛一样，分分钟撸一个自定义View，就得不断的重复造轮子，学
Android自定义View--圆形进度条RoundProgress
loveqRc的博客
12-13 2923
要实现的效果需要知道的知识点 字体的高度和宽度是怎么测？ 字体的高度就是textSize的大小。 字体的宽度怎么测量呢？Paint画笔中有测量字体宽度的api，如下： //测量字体的宽度 float width = mPaint.measureText(mProgerss + "%"); 字体的原点在哪里？ 默认在字体的左下角(在drawText中用到，我们必须要让字体在控件
Android 自定义漂亮的圆形进度条
热门推荐
追梦赤子心
08-05 2万+
公司有这样一个需求所以现在就将它抽取出来不废话，直接上代码 自定义view import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.RectF
android 自定义 进度条 旋转,如何在可以旋转的Android中创建圆形进度条？
weixin_29629231的博客
05-26 325
我在我的博客demonuts.com上的android中的圆形进度栏上写了详细的示例。您也可以在此处找到完整的源代码和说明。这是我在没有任何库的情况下用纯代码在圆形内用百分比制作圆形进度条的方法。首先创建一个名为 circular.xmlandroid:innerRadiusRatio="6"android:shape="ring"android:thicknessRatio="20.0"andr...
安卓自定义进度条，自定义圆形进度条
congcongguniang的博客
02-18 1193
自定义view实现进度条 import android.annotation.SuppressLint; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; imp...
Android自定义View——圆形进度条式按钮
程序员yqy的博客
08-16 1万+
介绍今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条，先来看看他需要实现的效果图。和普通的圆形进度条类似，只是中间的地方有两个状态表示，未开始，暂停状态。而且他说圆形进度的功能已经实现了。那么我们只需要对中间的两个状态做处理就行了。先来看看实现的效果图:上面说了我们只需要处理中间状态的变化就可以了，对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj62
Android 写一个自定义View ，圆形进度条
05-26
好的，下面是一个简单的圆形进度条的自定义View实现： ```java public class CircleProgressBar extends View { private float mProgress = 0; // 当前进度值 private float mMax = 100; // 最大进度值 private ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值