Android 自定义控件圆形进度条末端带原点

最新推荐文章于 2024-06-06 15:00:24 发布
最新推荐文章于 2024-06-06 15:00:24 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： Android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SMITHKANG/article/details/108834600
版权

先上效果图
在这里插入图片描述

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;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * 自定义带圆点的进度条
 */
public class HalfProgressBar extends View {

    /**
     * 当前进度
     */
    private int progress = 150;
    /**
     * 最大进度
     */
    private int maxProgress = 360;
    //设置进度条背景宽度
    private float progressStrokeWidth = 15;
    //设置进度条进度宽度
//    private float marxArcStorkeWidth = 6;
    //设置进度条圆点的宽度
    private float circularDotWidth = 30;


    /**
     * 画笔对象的引用
     */
    private Paint paintBackGround;
    private Paint paintProgress;
    private Paint paintDot;
    private float progressTextSize;

    public synchronized int getProgress() {
        return progress;
    }

    /**
     * Android提供了Invalidate方法实现界面刷新，但是Invalidate不能直接在线程中调用，因为他是违背了单线程模型：Android UI操作并不是线程安全的，并且这些操作必须在UI线程中调用。
     * 而postInvalidate()在工作者线程中被调用 使用postInvalidate则比较简单，不需要handler，直接在线程中调用postInvalidate即可。
     *
     * @param progress 传过来的进度
     */
    public void setProgress(int progress) {
        if (progress < 0) {
            progress = 0;
        }
        if (progress > maxProgress) {
            progress = maxProgress;
        }
        if (progress <= maxProgress) {
            this.progress = progress;
            postInvalidate();
        }
    }



    private RectF oval;
    private int roundProgressColor;
    private int roundColor;
    private int circularDotColor;
    private int progressTextColor;

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

    public HalfProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public HalfProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        paintBackGround = new Paint();
        paintProgress = new Paint();
        paintDot = new Paint();
        oval = new RectF();
        //这是自定义view 必须要写的
        TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.MyHalfProgressBar);
        roundProgressColor = mTypedArray.getColor(R.styleable.MyHalfProgressBar_roundProgressColor1, Color.YELLOW);
        roundColor = mTypedArray.getColor(R.styleable.MyHalfProgressBar_roundColor1, Color.YELLOW);
        circularDotColor = mTypedArray.getColor(R.styleable.MyHalfProgressBar_circularDotColor1, Color.YELLOW);
        progressTextSize = mTypedArray.getDimension(R.styleable.MyHalfProgressBar_progressTextSize, 15);
        progressTextColor = mTypedArray.getInteger(R.styleable.MyHalfProgressBar_progressTextColor, Color.YELLOW);
    }

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    float width = getWidth();
    float height = getWidth();
    paintBackGround.setAntiAlias(false); // 设置画笔为抗锯齿
    paintBackGround.setColor(roundColor); // 设置画笔颜色
    paintBackGround.setStrokeWidth(progressStrokeWidth); // 线宽
    paintBackGround.setStyle(Paint.Style.STROKE);

    //进度条颜色
    paintProgress.setColor(roundProgressColor);
    paintProgress.setStrokeWidth(progressStrokeWidth);
    paintProgress.setAntiAlias(false); // 设置画笔为抗锯齿
    paintProgress.setStyle(Paint.Style.STROKE);

    oval.left = circularDotWidth / 2; //
    oval.top = circularDotWidth/2; //
    oval.right = width - circularDotWidth / 2; //
    oval.bottom = width - circularDotWidth / 2; //
    float banjing = (width/2 - progressStrokeWidth / 2);//半径
    //调整圆背景的大小
    canvas.drawArc(oval, 360, 360, false, paintBackGround); // 绘制红丝圆圈，即进度条背景
    Log.i("banjing",":"+banjing);
    Log.i("banjing","width:"+width);

    canvas.drawArc(oval, 180, progress, false, paintProgress); // 绘制进度圆弧，这里是蓝色


    //画圆点
    paintDot.setColor(circularDotColor);
    paintDot.setAntiAlias(true); // 设置画笔为抗锯齿
    paintDot.setStyle(Paint.Style.FILL);
    paintDot.setStrokeWidth(circularDotWidth);
    //当画笔样式为STROKE或FILL_OR_STROKE时，设置笔刷的图形样式，如圆形样式Cap.ROUND,或方形样式Cap.SQUARE
    paintDot.setStrokeCap(Paint.Cap.ROUND);
    float jindu = ((float) progress * 1.7f);
    double a=0;
    float  x=0;
    float  y=0;
    float  v=0;
    float  v1=0;

    if (progress<90){
        a = (Math.PI / (double) 180) * (90-progress);
        v = (float) (Math.sin(a)) * banjing;
        v1 = (float) (Math.cos(a)) * banjing;
        x = width/2 + progressStrokeWidth / 2 - v;
        y = width/2 + progressStrokeWidth / 2 - v1;
    }
    if (progress==90){
        x = width/2 ;
        y = circularDotWidth/2;
    }
    if (progress>90&&progress<180){
        a = (Math.PI / (double) 180) * (180-progress);
        v = (float) (Math.sin(a)) * banjing;
        v1 = (float) (Math.cos(a)) * banjing;
        if (progress>=150){
            x = width/2 - progressStrokeWidth / 2 + v1;
            y = width/2 - v;
        }else {
            x = width/2 + v1;
            y = width/2 + progressStrokeWidth/2 - v;
        }

    }
    if (progress==180){
        x = width -progressStrokeWidth;
        y = width/2;
    }
    if (progress>180&&progress<270){
        a = (Math.PI / (double) 180) * (270-progress);
        v = (float) (Math.sin(a)) * banjing;
        v1 = (float) (Math.cos(a)) * banjing;
        if (progress>=240){
            x = width/2 - progressStrokeWidth / 2 + v;
            y = width/2 - progressStrokeWidth / 2 + v1;
        }else {
            x = width/2 - progressStrokeWidth / 2 + v;
            y = width/2 + v1;
        }

    }
    	if (progress==270){
	//            a = (Math.PI / (double) 180) * (270-progress);
	//            v = (float) (Math.sin(a)) * banjing;
	//            v1 = (float) (Math.cos(a)) * banjing;
        x = width/2;
        y = width - progressStrokeWidth ;
    }
    if (progress>270){
        a = (Math.PI / (double) 180) * (360-progress);
        v = (float) (Math.sin(a)) * banjing;
        v1 = (float) (Math.cos(a)) * banjing;
        x = width/2 + progressStrokeWidth / 2 - v1;
        y = width/2 - progressStrokeWidth / 2 + v;
    }
    canvas.drawPoint(x, y, paintDot);

    Log.i("banjing",",a:"+a);
    Log.i("banjing",",x:"+x);
    Log.i("banjing",",y:"+y);
    Log.i("banjing",",v:"+v);
    Log.i("banjing",",v1:"+v1);

    //绘制中间文本
    String testProgress =( (int)progress*100/360)+"%";
    TextPaint mPaint = new TextPaint();
    mPaint.setStrokeWidth(7);
    mPaint.setTextSize(progressTextSize);
    mPaint.setTypeface(Typeface.DEFAULT_BOLD);
    mPaint.setColor(progressTextColor);
    mPaint.setTextAlign(Paint.Align.LEFT);
    Rect bounds = new Rect();
    mPaint.getTextBounds(testProgress, 0, testProgress.length(), bounds);
    Paint.FontMetricsInt fontMetrics = mPaint.getFontMetricsInt();
    int baseline = (getMeasuredHeight() - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
    canvas.drawText(testProgress,getMeasuredWidth() / 2 - bounds.width() / 2, baseline, mPaint);



}

}

<declare-styleable name="MyHalfProgressBar">
    <attr name="roundColor1" format="color"/>
    <attr name="roundProgressColor1" format="color"/>
    <attr name="circularDotColor1" format="color"/>
    <attr name="progressTextColor" format="color"/>
    <attr name="progressTextSize" format="dimension"/>
</declare-styleable>

#44c8da
#4444c8da

SMITHKANG
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android 自定义View实现环形带刻度颜色渐变的进度条
07-01
详情请查看博客：https://blog.csdn.net/qq_20785431/article/details/80872856
canvas 画半圆的两种方式
annuobin1120的博客
04-23 2983
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
vue3中进度条上加高亮圆点
最新发布
wch19960518的博客
06-06 285
小圆点基于进度条定位（left）。
微信小程序canvas画圆环形进度条
热门推荐
韩大璐
10-30 1万+
最近做一个小程序，有用到canvas画圆环形进度条，效果图就是上图了。 为了方便日后使用，我已经封装了一个独立的js文件。 先简单说一下实现流程，封装好的文件下载地址：https://github.com/SuperDalu/wxCanvas.git 先在wxml文件中创建画布 &lt;canvas canvas-id="runCanvas" id="runCanvas" class='ca...
android 固定进度刻度,Android 效果之带刻度的半圆环进度条小述
weixin_36283702的博客
05-25 1715
一、背景最近准备要做一个类似仪表盘样式的半圆环带刻度可拖动的进度条来展示和设置温度，网上找了找demo，都和实际的需求有点区别，感觉这种功能实现起来不难，就索性自己弄了一个。二、正文在开始之前，我们来看下实际的运行效果，看看能不能满足正在查找资料的小伙伴的项目需求：效果就是这样的啦，没什么特别的地方，我们来看下实现方法吧，如果对于自定义View的流程还有些不清楚，可以查看一下自定义简单View及获...
canvas实现半圆环形进度条
weixin_30894583的博客
03-05 932
html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉，您的浏览器不支持canvas</p> </canvas> js部分 toCanvas('canvas','red',30); /** * 生成环形进度...
Android自定义控件实现圆形进度条
08-31
首先，我们从标题和描述了解到，我们将创建一个自定义控件`ProgressView`，用于显示圆形的进度条。 **一、布局文件** 在项目的主布局文件中，我们需要引入自定义的`ProgressView`。这是一个简单的`LinearLayout`，...
Android自定义漂亮的圆形进度条
01-05
这几天对Android中实现画圆弧及圆弧效果中所实现的效果进行了修改，改为进度圆心进度条，效果如图所示 TasksCompletedView.java 代码如下 import android.content.Context; import android.content.res....
Android自定义View圆形进度条控件（三）
08-31
Android自定义View圆形进度条控件详解 Android自定义View圆形进度条控件是Android开发中非常常用的控件，它可以用来显示进度、百分比等信息。在本文中，我们将详细介绍Android自定义View圆形进度条控件的实现过程和...
Android自定义控件之圆形进度条动画
01-03
本文实例为大家分享了Android实现圆形进度条动画的具体代码，供大家参考，具体内容如下 首先贴上图片： 额，感觉还行吧，就是进度条的颜色丑了点，不过咱是程序员，不是美工，配色这种问题当然不在考虑范围之内了。...
Android自定义圆环进度条/刻度仪表盘(单环单点带动画)
jin_pan的博客
07-14 635
Android自定义圆环进度条/刻度仪表盘(单环单点带动画)
Canvas半圆环进度条动画特效
06-24
Canvas半圆环进度条动画特效是一款半圆环的已领优惠券进度条特效，适用于圆环图表统计代码。
【Android】自定义圆形进度条效果（有进度标识点）
12-31
总共分为三层：一层为圆形边线，一层为进度边线，一层用来显示标识进度节点。 public class CircleProgressBar extends View { private int maxProgress = 100; private int progress = 15; private int progressStrokeWidth = 2; private int marxArcStorkeWidth = 16; // 画圆所在的距形区域 RectF oval; Paint paint; public CircleProgressBar(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub oval = new RectF(); paint = new Paint(); } @Override protected void onDraw(Canvas canvas) { // TODO 自动生成的方法存根 super.onDraw(canvas); int width = this.getWidth(); int height = this.getHeight(); width = (width > height) ? height : width; height = (width > height) ? height : width; paint.setAntiAlias(true); // 设置画笔为抗锯齿 paint.setColor(Color.WHITE); // 设置画笔颜色 canvas.drawColor(Color.TRANSPARENT); // 白色背景 paint.setStrokeWidth(progressStrokeWidth); // 线宽 paint.setStyle(Style.STROKE); oval.left = marxArcStorkeWidth / 2; // 左上角x oval.top = marxArcStorkeWidth / 2; // 左上角y oval.right = width - marxArcStorkeWidth / 2; // 左下角x oval.bottom = height - marxArcStorkeWidth / 2; // 右下角y canvas.drawArc(oval, -90, 360, false, paint); // 绘制白色圆圈，即进度条背景 paint.setColor(Color.rgb(0x57, 0x87, 0xb6)); paint.setStrokeWidth(marxArcStorkeWidth); canvas.drawArc(oval, -90, ((float) progress / maxProgress) * 360, false, paint); // 绘制进度圆弧，这里是蓝色 paint.setStrokeWidth(1); String text = progress + "%"; int textHeight = height / 4; paint.setTextSize(textHeight); int textWidth = (int) paint.measureText(text, 0, text.length()); paint.setStyle(Style.FILL); canvas.drawText(text, width / 2 - textWidth / 2, height / 2 + textHeight / 2, paint); } public int getMaxProgress() { return maxProgress; } public void setMaxProgress(int maxProgress) { this.maxProgress = maxProgress; } /** * 设置进度 * * @param progress * 进度百分比 * @param view * 标识进度的节点视图 */ public void setProgress(int progress, View view) { this.progress = progress; view.setAnimation(pointRotationAnima(0, (int) (((float) 360 / maxProgress) * progress))); this.invalidate(); } /** * 非ＵＩ线程调用 */ public void setProgressNotInUiThread(int progress, View view) { this.progress = progress; view.setAnimation(pointRotationAnima(0, (int) (((float) 360 / maxProgress) * progress))); this.postInvalidate(); } /** * 进度标注点的动画 * * @param fromDegrees * @param toDegrees * @return */ private Animation pointRotationAnima(float fromDegrees, float toDegrees) { int initDegress = 306;// 进度点起始位置(图片偏移约54度) RotateAnimation animation = new RotateAnimation(fromDegrees, initDegress + toDegrees, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); animation.setDuration(1);// 设置动画执行时间 animation.setRepeatCount(1);// 设置重复执行次数 animation.setFillAfter(true);// 设置动画结束后是否停留在结束位置 return animation; } }
Android自定义圆环进度条/刻度仪表盘(单环单点带进度动画)
jin_pan的博客
07-14 895
Android自定义圆环进度条/刻度仪表盘(单环单点带进度动画)
canvas的简单圆形进度条
weixin_30787531的博客
11-03 83
window.onload = function(){ function arc(canvas,number){ var canvas = document.getElementById(canvas), //获取canvas元素 context = canvas.getContext('2d'), //获取画图环境，指明为2d ...
canvas圆形、半圆形进度条
weixin_30915275的博客
10-17 587
http://www.17sucai.com/pins/21154.html 转载于:https://www.cnblogs.com/liujinyu/p/9805659.html
Android自定义圆环进度条/刻度仪表盘(单环双点带动画)
jin_pan的博客
07-14 593
Android自定义圆环进度条/刻度仪表盘(单环双点带动画)
自定义View---实现半圆环形进度条
Xiemarc的博客
06-30 8069
图表控件很多，这个多少能跟图表控件扯上边吧。 废话不多说，看图： 上面可以看到效果，支持各种自定义，支持点击 这里没有用到 自定义属性。有兴趣的可以自己设置下。直接看代码 public class CircleBar extends View { private static final String TAG = "CircleBar"; private RectF mCo
Android自定义半圆进度条 半圆渐变色进度条带指示 半圆开口大小可自由修改
简雨山舍
01-08 7196
Android自定义半圆进度条 半圆渐变色进度条带指示 半圆开口大小可自由修改 首先我们来看下效果图 不同的开口大小只需要修改一个参数即可 半圆1： 半圆2： 半圆3： 如果是你想要的效果，就直接滑动到文章底部，下载源码，然后结合本文章操作说明集成到自己的项目中吧 如果集成 第一步： 下载项目解压，然后用as打开。 第二步： 复制SemicircleProgr
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值