自定义view实现半圆弧进度条

最新推荐文章于 2023-08-30 19:22:56 发布
最新推荐文章于 2023-08-30 19:22:56 发布
阅读量714 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java521666/article/details/125905311
版权

自定义View 圆形进度条 动画效果 Android开发 Canvas
关键词由CSDN通过智能技术生成

文章目录

一、效果图

效果图

二、使用步骤

1.新建CustomView继承自view

代码如下：

public class CustomView extends View {

}

2.定义变量

代码如下：

	//外圆弧
    private Paint outPaint;
	//内圆弧
    private Paint innerPaint;
	//文字
    private Paint mTextPaint;
    //矩形
    private RectF oval;

    //最大进度
    private int max = 10;
    //当前进度
    private int progress = 6;
    //文本内容
    private String text = "得分 "+ progress + "/" + max;
    //圆弧宽度
    private int roundWidth = 40;
	//圆点
    private int mCircleRadius = SizeUtils.dp2px(6);
    private Paint mCirclePaint;
    private float[] pos =new float[2];
   
    private int viewWidth; //宽度--控件所占区域

    private float nowPro = 0;//用于动画

    private ValueAnimator animator;

3.构造函数

public CustomView(Context context) {
        super(context);
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttrs(attrs, context);
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(attrs, context);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public CustomView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initAttrs(attrs, context);
    }

4.构造方法

public int getMax() {
        return max;
    }

    public void setMax(int max) {
        this.max = max;
    }

    public int getProgress() {
        return progress;
    }

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

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

5.初始化数据

private void initAttrs(AttributeSet attr, Context context) {

        outPaint = new Paint();
        outPaint.setColor(Color.parseColor("#F5F6FA"));
        outPaint.setAntiAlias(true);
        outPaint.setStyle(Paint.Style.STROKE);
        outPaint.setStrokeCap(Paint.Cap.ROUND);
        outPaint.setStrokeWidth(SizeUtils.dp2px(12));

        innerPaint = new Paint();
        innerPaint.setColor(Color.parseColor("#667CFF"));
        innerPaint.setAntiAlias(true);
        innerPaint.setStyle(Paint.Style.STROKE);
        innerPaint.setStrokeCap(Paint.Cap.ROUND);
        innerPaint.setStrokeWidth(SizeUtils.dp2px(12));

        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(Color.parseColor("#131936"));
        mTextPaint.setFakeBoldText(true);
        mTextPaint.setTextSize(SizeUtils.sp2px(20));

        //动画
        animator = ValueAnimator.ofFloat(0, progress);
        animator.setDuration(1800);
        animator.setInterpolator(new DecelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                nowPro = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();
    }

6.onMeasure()

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        final int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        final int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        setMeasuredDimension(widthMeasureSpec, (widthSpecSize / 2) + (int) (Math.cos(20) * (widthSpecSize / 2)));

    }

7.onSizeChanged()

@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        viewWidth = w;//得到宽度以此来计算控件所占实际大小
        //计算画布所占区域
        oval = new RectF();
        oval.left = roundWidth + getPaddingLeft();
        oval.top = roundWidth + getPaddingTop();
        oval.right = viewWidth - roundWidth - getPaddingRight();
        oval.bottom = viewWidth - roundWidth - getPaddingBottom();

    }

8.onDraw()

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        Path outerPath = new Path();
        outerPath.arcTo(oval,180,180);
        canvas.drawPath(outerPath,outPaint);

        SweepGradient sweepGradient = new SweepGradient(getWidth()/2,getWidth()/2,Color.parseColor("#FFFFFF"),Color.parseColor("#0047F7"));
        innerPaint.setShader(sweepGradient);

        canvas.drawArc(oval, 180, 180 * nowPro / max, false, innerPaint); //绘制圆弧

        mCirclePaint = new Paint();
        mCirclePaint.setColor(Color.WHITE);
        mCirclePaint.setStyle(Paint.Style.FILL);

        PathMeasure pathMeasure = new PathMeasure(outerPath,false);
        boolean posTan = pathMeasure.getPosTan(pathMeasure.getLength() * nowPro / max, pos, null);
        canvas.drawCircle(pos[0],pos[1],mCircleRadius,mCirclePaint);

        float textWidth = mTextPaint.measureText(text);
        canvas.drawText(text, viewWidth / 2 - textWidth / 2, viewWidth / 2, mTextPaint);
    }

9.xml文件

<com.wuchen.viewdemo.CustomView
        android:id="@+id/customView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

三、完整代码（附Demo地址）

package com.wuchen.juexiaofakao;

import android.animation.ValueAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.graphics.Typeface;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.DecelerateInterpolator;
import com.blankj.utilcode.util.SizeUtils;

public class CustomView extends View {

    private Paint outPaint;

    private Paint innerPaint;

    private Paint mTextPaint;

    private RectF oval;

    //最大进度
    private int max = 10;
    //当前进度
    private int progress = 6;
    //文本内容
    private String text = "得分 "+ progress + "/" + max;
    //圆弧宽度
    private int roundWidth = 40;

    private int mCircleRadius = SizeUtils.dp2px(6);
    private Paint mCirclePaint;
    private float[] pos =new float[2];
    private final int[] colors = {Color.parseColor("#95ACFF"),Color.parseColor("#4379FF")};

    private int viewWidth; //宽度--控件所占区域

    private float nowPro = 0;//用于动画


    private ValueAnimator animator;


    public CustomView(Context context) {
        super(context);
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttrs(attrs, context);
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(attrs, context);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public CustomView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initAttrs(attrs, context);
    }

    public int getMax() {
        return max;
    }

    public void setMax(int max) {
        this.max = max;
    }

    public int getProgress() {
        return progress;
    }

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

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    private void initAttrs(AttributeSet attr, Context context) {

        outPaint = new Paint();
        outPaint.setColor(Color.parseColor("#F5F6FA"));
        outPaint.setAntiAlias(true);
        outPaint.setStyle(Paint.Style.STROKE);
        outPaint.setStrokeCap(Paint.Cap.ROUND);
        outPaint.setStrokeWidth(SizeUtils.dp2px(12));

        innerPaint = new Paint();
        innerPaint.setColor(Color.parseColor("#667CFF"));
        innerPaint.setAntiAlias(true);
        innerPaint.setStyle(Paint.Style.STROKE);
        innerPaint.setStrokeCap(Paint.Cap.ROUND);
        innerPaint.setStrokeWidth(SizeUtils.dp2px(12));

        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(Color.parseColor("#131936"));
        mTextPaint.setFakeBoldText(true);
        mTextPaint.setTextSize(SizeUtils.sp2px(20));

        //动画
        animator = ValueAnimator.ofFloat(0, progress);
        animator.setDuration(1800);
        animator.setInterpolator(new DecelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                nowPro = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        final int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        final int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        setMeasuredDimension(widthMeasureSpec, (widthSpecSize / 2) + (int) (Math.cos(20) * (widthSpecSize / 2)));

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        viewWidth = w;//得到宽度以此来计算控件所占实际大小
        //计算画布所占区域
        oval = new RectF();
        oval.left = roundWidth + getPaddingLeft();
        oval.top = roundWidth + getPaddingTop();
        oval.right = viewWidth - roundWidth - getPaddingRight();
        oval.bottom = viewWidth - roundWidth - getPaddingBottom();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        Path outerPath = new Path();
        outerPath.arcTo(oval,180,180);
        canvas.drawPath(outerPath,outPaint);

        SweepGradient sweepGradient = new SweepGradient(getWidth()/2,getWidth()/2,Color.parseColor("#FFFFFF"),Color.parseColor("#0047F7"));
        innerPaint.setShader(sweepGradient);

        canvas.drawArc(oval, 180, 180 * nowPro / max, false, innerPaint); //绘制圆弧

        mCirclePaint = new Paint();
        mCirclePaint.setColor(Color.WHITE);
        mCirclePaint.setStyle(Paint.Style.FILL);

        PathMeasure pathMeasure = new PathMeasure(outerPath,false);
        boolean posTan = pathMeasure.getPosTan(pathMeasure.getLength() * nowPro / max, pos, null);
        canvas.drawCircle(pos[0],pos[1],mCircleRadius,mCirclePaint);

        float textWidth = mTextPaint.measureText(text);
        canvas.drawText(text, viewWidth / 2 - textWidth / 2, viewWidth / 2, mTextPaint);
    }
}

Demo地址

浮空over
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android 固定进度刻度,Android 效果之带刻度的半圆环进度条小述
weixin_36283702的博客
05-25 1710
一、背景最近准备要做一个类似仪表盘样式的半圆环带刻度可拖动的进度条来展示和设置温度，网上找了找demo，都和实际的需求有点区别，感觉这种功能实现起来不难，就索性自己弄了一个。二、正文在开始之前，我们来看下实际的运行效果，看看能不能满足正在查找资料的小伙伴的项目需求：效果就是这样的啦，没什么特别的地方，我们来看下实现方法吧，如果对于自定义View的流程还有些不清楚，可以查看一下自定义简单View及获...
自定义view圆环进度条
Striver_zhq的博客
11-05 250
//MyPbActivity package com.baway.a1509a_view; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MyPbActivity extends AppCompatActivity {     @Override
自定义圆弧加载进度条
11-03
自定义view实现圆弧进度条
Android自定义圆弧进度条（半圆进度条） 圆弧渐变色进度条带指示 圆弧宽高可自由修改
yeziyfx的专栏
10-27 6394
Android 自定义圆弧进度条，支持设置为圆形进度条，弧度圆形渐变色，进度指示条，进度文字。
Android studio实现圆形进度条
最新发布
weixin_74239923的博客
08-30 1971
【代码】Android studio实现圆形进度条。
android 可配置的圆弧进度条
未来很长，但我会努力的走下去。
09-08 2946
android 可配置的圆弧进度条
使用Canvas绘制自定义View——三重半圆环进度条
qq_40694393的博客
07-04 544
android三重自定义半圆进度环
Android view自定义实现动态进度条
01-04
Android 自定义view实现动态进度条 效果图： 这个是看了梁肖的demo，根据他的思路自己写了一个，但是我写的这个貌似计算还是有些问题，从上面的图就可以看出来，左侧、顶部、右侧的线会有被截掉的部分，有懂得...
Android 自定义View实现环形带刻度的进度条
06-19
本篇文章将深入探讨如何实现一个环形带刻度的进度条，这个自定义View适用于各种需要展示进度的情况，比如加载、计时器等。我们将通过以下步骤来构建这个组件： 1. **基础布局**： 首先，我们需要一个圆形的布局...
Android自定义圆弧进度条（手动控制进度）
03-26
本文将深入探讨如何在Android中创建一个自定义的圆弧进度条，并实现手动控制进度的功能，包括通过拖动或按钮来改变进度。 首先，我们从基础开始，创建一个新的`View`类作为自定义圆弧进度条的核心。在`onDraw()`...
Android自定义半圆进度条
01-08
android自定义半圆进度条，可以自己根据里面备注的参数，调整半圆的长度。这里是使用说明：http://blog.csdn.net/beibaokongming/article/details/79002646
Android自定义带动画的半圆环型进度效果
01-20
本文实例为大家分享了Android半圆环型进度效果的具体代码，供大家参考，具体内容如下 package com.newair.ondrawtext; import android.animation.ValueAnimator; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import androi
Android 自定义View实现环形带刻度颜色渐变的进度条
07-01
详情请查看博客：https://blog.csdn.net/qq_20785431/article/details/80872856
android 弧形进度条
01-15
一个弧形进度条demo，类似于Progressbar和Seekbar。希望对大家有帮助。
Android编程基于自定义View实现绚丽的圆形进度条功能示例
08-31
在Android开发中，自定义View是实现个性化UI和复杂交互的重要手段。本示例将详细讲解如何通过自定义View来创建一个具有动画效果的圆形进度条。首先，我们从标题和描述中了解到，我们要实现的是一个自定义的圆形...
Android利用Paint自定义View实现进度条控件方法示例
08-28
在Android开发中，自定义View是一项重要的技能，它允许开发者根据需求创建独特的用户界面元素。本文将探讨如何利用Paint类自定义一个进度条控件，适用于那些希望在应用中实现个性化进度显示的开发者。 首先，我们...
Android 自定义View实现圆形加载进度条
Android_Gt
03-06 3266
Android 自定义view圆形加载进度条
自定义View之可拖拽的圆环进度条(android)
一个黑曼巴的博客
09-30 1700
可手动控制的圆环进度条
android自定义view实现水平进度条
04-26
好的，下面是Android自定义View实现水平进度条的步骤： 1. 创建自定义View类 在Android Studio中创建一个自定义View类，可以命名为HorizontalProgressBar。 2. 定义属性 在自定义View类中定义进度条的属性，例如进度颜色、背景颜色、进度值等。 3. 实现onMeasure方法 在onMeasure方法中设置View的宽高，可以根据布局文件中设置的宽高和padding值来计算。 4. 实现onDraw方法 在onDraw方法中绘制进度条，包括进度条的背景和进度。 5. 实现setProgress方法 在setProgress方法中设置进度条的进度值，并调用invalidate方法来重新绘制进度条。 6. 使用自定义View 在布局文件中使用自定义View，设置属性和进度值即可显示水平进度条。 以上就是Android自定义View实现水平进度条的步骤，希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值