Android自定义View——体重表盘

最新推荐文章于 2024-04-03 16:35:02 发布
最新推荐文章于 2024-04-03 16:35:02 发布
阅读量603 收藏 8
点赞数 6
分类专栏： Android 文章标签： android html5 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/News53231323/article/details/120250155
版权
本文详细介绍了如何在Android中创建一个自定义View，实现体重表盘的效果，包括内圆弧、外圆弧、指针以及文字的绘制。通过设置不同角度和宽度，实现了动态变化的蓝色圆弧来展示体重数据。同时，文章还提供了中间水滴形指针的旋转动画，以及左右两侧的文字绘制方法。代码中包括了关键的初始化、测量、绘制和动画设置步骤，可供开发者参考实现类似效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Android自定义View——体重表盘

效果视频

分析

起始角度

如下图所示，起点角度为150，终点角度为240

圆弧

白色圆弧为整个圆弧范围，蓝色圆弧为根据数据变动而覆盖白色圆弧，蓝色圆弧比白色圆弧大一点，突出显示

 InnerArcPaint.setStrokeWidth( Width * (float)0.1 );
 OuterArcPaint.setStrokeWidth( Width * (float)0.12 );

指针

中间的水滴指针是一个白色的水滴图片，下图蓝色为选择文件的背景颜色（截图），由于水滴指向-135度，将图像旋转-75度，水滴尖刚好指向150度的起点。

代码

初始化属性

 private void InitPaint(){
        InnerArcPaint = new Paint(  );
        InnerArcPaint.setColor( Color.WHITE );
        InnerArcPaint.setAntiAlias( true );
        InnerArcPaint.setStyle( Paint.Style.STROKE );

        OuterArcPaint = new Paint(  );
        OuterArcPaint.setColor( Color.BLUE );
        OuterArcPaint.setAntiAlias( true );
        OuterArcPaint.setStyle( Paint.Style.STROKE );
        OuterArcPaint.setShadowLayer( (float)10,(float)10,(float)10,Color.parseColor( "#99000000" ) );

        TextPaint = new Paint(  );
        TextPaint.setColor( Color.RED );
        TextPaint.setStyle( Paint.Style.STROKE );
        TextPaint.setTextSize( 60 );
        TextPaint.setStrokeWidth( 2 );

        ScalePaint = new Paint(  );
        ScalePaint.setColor( Color.WHITE );
        ScalePaint.setTextSize( 25 );
        //硬件加速
        setLayerType( LAYER_TYPE_SOFTWARE,null );
    }

画布

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure( widthMeasureSpec, heightMeasureSpec );
        int Width = MeasureSpec.getSize( widthMeasureSpec );
        InnerArcPaint.setStrokeWidth( Width * (float)0.1 );
        OuterArcPaint.setStrokeWidth( Width * (float)0.12 );

        oval = new RectF(  );
        oval.left = Width * (float)0.2;
        oval.top = Width * (float)0.2;
        oval.right = Width * (float)0.8;
        oval.bottom = Width * (float)0.8;
        //宽、高一致，使画布无论边长如何变化，都成为一个正方形
        setMeasuredDimension( Width,Width );
    }

绘制内圆弧

 //绘制内圆弧
    private void DrawInnerArc(Canvas canvas){
        //保存之前的画布
        canvas.save();
        canvas.drawArc( oval, StartAngle,SweepAngle,false,InnerArcPaint);
    }

绘制外圆弧

//绘制外圆弧
    private void DrawOuterArc(Canvas canvas){
        canvas.save();
        canvas.drawArc( oval, StartAngle,SweepAngle * CurrentData / 300,false,OuterArcPaint);
    }

绘制中间指针

 //绘制中间指针
    private void DrawArrow(Canvas canvas){
       canvas.save();
        Bitmap bitmap = BitmapFactory.decodeResource( getResources(),R.mipmap.waterdrop );
        int width = 75;
        int height = 75;
        int NewWidth = (int)(getWidth() * 0.08);
        float ScaleWidth = (float) (NewWidth / width);
        float ScaleHeight = (float) (NewWidth / height);
        Matrix matrix = new Matrix(  );
        //顺序不能颠倒
        matrix.setRotate( -75 + (SweepAngle * CurrentData / 300),bitmap.getWidth()/2,bitmap.getHeight()/2 );
        matrix.postScale( ScaleWidth,ScaleHeight );

        Bitmap bitmap1 = Bitmap.createBitmap( bitmap,0,0,width,height,matrix,true );
        canvas.drawBitmap( bitmap1,getWidth()/2 - bitmap1.getWidth()/2,getHeight()/2 - bitmap1.getHeight()/2,InnerArcPaint );
        bitmap.recycle();
        bitmap1.recycle();
    }

绘制中间文字

private void DrawCurrentDataText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str = String.valueOf( CurrentData ) + "KG";
        TextPaint.setColor( Color.RED );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        canvas.drawText( str,getWidth()/2 - rect.width()/2,(int)(getHeight() * (float)0.38),TextPaint );
    }

绘制左右两边文字

 private void DrawScaleRightText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str =  "300KG";
        TextPaint.setTextSize( 45 );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        TextPaint.setColor( Color.WHITE );
        canvas.drawText( str,getWidth()-getWidth()/6,(getHeight()/2+getWidth()/5) ,TextPaint );
    }
    private void DrawScaleLeftText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str =  "0KG";
        TextPaint.setTextSize( 45 );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        TextPaint.setColor( Color.WHITE );
        canvas.drawText( str,(getWidth()/2-(getWidth()/3 + 75)),(getHeight()/2+getWidth()/5) ,TextPaint );
    }

动画

 public void SetCurrentData(final float data, TimeInterpolator interpolator){
        long time = ( (long)Math.abs( data- CurrentData ) *20);
        final ValueAnimator valueAnimator = ValueAnimator.ofFloat( CurrentData,data ).setDuration( time );
        valueAnimator.setInterpolator( interpolator );
        valueAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                CustomView_ClockDial.this.CurrentData = (float)valueAnimator.getAnimatedValue();
                invalidate();
            }
        } );
        valueAnimator.start();
    }

全部代码

public class CustomView_ClockDial extends View {
    //内圆弧画笔
    private Paint InnerArcPaint;
    //外圆弧画笔
    private Paint OuterArcPaint;
    //文字画笔
    private Paint TextPaint;
    //刻度画笔
    private Paint ScalePaint;
    //圆弧范围
    private RectF oval;
    //当前数据
    private float CurrentData = 0;
    //起点角度
    private float StartAngle = 150;
    //终点角度
    private float SweepAngle = 240;
    public CustomView_ClockDial(Context context) {
        super( context );
        InitPaint();
    }

    public CustomView_ClockDial(Context context, @Nullable AttributeSet attrs) {
        super( context, attrs );
        InitPaint();
    }

    public CustomView_ClockDial(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super( context, attrs, defStyleAttr );
        InitPaint();
    }
    private void InitPaint(){
        InnerArcPaint = new Paint(  );
        InnerArcPaint.setColor( Color.WHITE );
        InnerArcPaint.setAntiAlias( true );
        InnerArcPaint.setStyle( Paint.Style.STROKE );

        OuterArcPaint = new Paint(  );
        OuterArcPaint.setColor( Color.BLUE );
        OuterArcPaint.setAntiAlias( true );
        OuterArcPaint.setStyle( Paint.Style.STROKE );
        OuterArcPaint.setShadowLayer( (float)10,(float)10,(float)10,Color.parseColor( "#99000000" ) );

        TextPaint = new Paint(  );
        TextPaint.setColor( Color.RED );
        TextPaint.setStyle( Paint.Style.STROKE );
        TextPaint.setTextSize( 60 );
        TextPaint.setStrokeWidth( 2 );

        ScalePaint = new Paint(  );
        ScalePaint.setColor( Color.WHITE );
        ScalePaint.setTextSize( 25 );
        //硬件加速
        setLayerType( LAYER_TYPE_SOFTWARE,null );
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure( widthMeasureSpec, heightMeasureSpec );
        int Width = MeasureSpec.getSize( widthMeasureSpec );
        InnerArcPaint.setStrokeWidth( Width * (float)0.1 );
        OuterArcPaint.setStrokeWidth( Width * (float)0.12 );

        oval = new RectF(  );
        oval.left = Width * (float)0.2;
        oval.top = Width * (float)0.2;
        oval.right = Width * (float)0.8;
        oval.bottom = Width * (float)0.8;
        //宽、高一致，使画布无论边长如何变化，都成为一个正方形
        setMeasuredDimension( Width,Width );
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw( canvas );
        DrawInnerArc(canvas);
        DrawOuterArc(canvas);
        DrawArrow(canvas);
        DrawCurrentDataText(canvas);
        DrawScaleRightText(canvas);
        DrawScaleLeftText(canvas);
    }
    //绘制内圆弧
    private void DrawInnerArc(Canvas canvas){
        //保存之前的画布
        canvas.save();
        canvas.drawArc( oval, StartAngle,SweepAngle,false,InnerArcPaint);
    }
    //绘制外圆弧
    private void DrawOuterArc(Canvas canvas){
        canvas.save();
        canvas.drawArc( oval, StartAngle,SweepAngle * CurrentData / 300,false,OuterArcPaint);
    }
    //绘制中间指针
    private void DrawArrow(Canvas canvas){
       canvas.save();
        Bitmap bitmap = BitmapFactory.decodeResource( getResources(),R.mipmap.waterdrop );
        int width = 75;
        int height = 75;
        int NewWidth = (int)(getWidth() * 0.08);
        float ScaleWidth = (float) (NewWidth / width);
        float ScaleHeight = (float) (NewWidth / height);
        Matrix matrix = new Matrix(  );
        //顺序不能颠倒
        matrix.setRotate( -75 + (SweepAngle * CurrentData / 300),bitmap.getWidth()/2,bitmap.getHeight()/2 );
        matrix.postScale( ScaleWidth,ScaleHeight );

        Bitmap bitmap1 = Bitmap.createBitmap( bitmap,0,0,width,height,matrix,true );
        canvas.drawBitmap( bitmap1,getWidth()/2 - bitmap1.getWidth()/2,getHeight()/2 - bitmap1.getHeight()/2,InnerArcPaint );
        bitmap.recycle();
        bitmap1.recycle();
    }
    private void DrawCurrentDataText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str = String.valueOf( CurrentData ) + "KG";
        TextPaint.setColor( Color.RED );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        canvas.drawText( str,getWidth()/2 - rect.width()/2,(int)(getHeight() * (float)0.38),TextPaint );
    }
    private void DrawScaleRightText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str =  "300KG";
        TextPaint.setTextSize( 45 );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        TextPaint.setColor( Color.WHITE );
        canvas.drawText( str,getWidth()-getWidth()/6,(getHeight()/2+getWidth()/5) ,TextPaint );
    }
    private void DrawScaleLeftText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str =  "0KG";
        TextPaint.setTextSize( 45 );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        TextPaint.setColor( Color.WHITE );
        canvas.drawText( str,(getWidth()/2-(getWidth()/3 + 75)),(getHeight()/2+getWidth()/5) ,TextPaint );
    }
    public void SetCurrentData(final float data, TimeInterpolator interpolator){
        long time = ( (long)Math.abs( data- CurrentData ) *20);
        final ValueAnimator valueAnimator = ValueAnimator.ofFloat( CurrentData,data ).setDuration( time );
        valueAnimator.setInterpolator( interpolator );
        valueAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                CustomView_ClockDial.this.CurrentData = (float)valueAnimator.getAnimatedValue();
                invalidate();
            }
        } );
        valueAnimator.start();
    }
}

下载链接

gitee下载链接

Android 自定义仪表盘View
安卓兼职framework和app工程师的博客
10-10 888
最近在工作中，需要开发一个仪表盘来表示当前的百分比， 所以就需要来自定义view 效果图如下: 下面来实现仪表盘代码如下: 自定义仪表盘 import android.animation.ValueAnimator; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import andro
Android自定义View制作仪表盘界面
09-01
主要介绍了Android自定义View制作仪表盘界面的相关资料,首先需要自定义仪表盘的属性，在构造方法种获取自定义属性，本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
体重计android代码,Android 标注体重测量仪源码
weixin_34306878的博客
05-26 440
首先我们利用网友用JAVA编写的基于android的可视化GUI布局拖拉工具程序 --DroidDraw。布局以下界面：此页面位于res/layout/main.xml。制作接收值页面，页面如下：此页面位于res/layout/mainlayout.xml,到此为止准备工作全部做好了，接下来正式进入 我们的代码实现功能。。主页面代码位于src/cn.terry/BundleObject.java代...
android模拟体重秤
05-21
该示例代码模拟了一个圆盘称来称体重，点击开始按钮，指针像真实的体重秤一样转动，并且在最后要停止的位置附近还会左右摆动几下再停在一个位置上。有详细注释，如有此类需求的朋友可以拿去做个参考
Android自定义View第二弹（旋转的体重）
Mr.Dong的博客
12-15 793
废话不多说先上图：左下体重 （有旋转的动画）废话不多说上代码：一.自定义View代码/** * Created by DYJ on 2017/9/21. */public class MyCustomerView extends View{ /**圆点画笔*/ Paint pointPaint ; /**圆弧画笔*/ Paint arcPaint ; /**
Android自定义View——扇形统计图的实现代码
01-04
自定义View 定义成员变量 private int mHeight, mWidth;//宽高 private Paint mPaint;//扇形的画笔 private Paint mTextPaint;//画文字的画笔 private int centerX, centerY;//中心坐标 //其他的value //扇形...
Android自定义相机——身份证扫描界面
09-14
可以使用ImageView或自定义View实现这个框，并添加手势识别库如GestureDetector或ScaleGestureDetector，以处理用户的滑动和缩放操作。 Android 6.0引入了运行时权限管理，因此在API 23及以上版本，你需要在运行时...
Android自定义View——彩色圆环统计图
09-15
Android自定义View——彩色圆环统计图
Android自定义View——贝塞尔曲线实现直播点赞效果
12-28
Android自定义View——贝塞尔曲线实现直播点赞效果 Android自定义View——贝塞尔曲线实现直播点赞效果
Android自定义View——圆形进度式按钮
08-16
本文将详细解析"Android自定义View——圆形进度式按钮"这一主题，探讨如何构建一个具备进度显示功能且有特殊状态提示的自定义按钮。 首先，我们从标题"Android自定义View——圆形进度式按钮"可以理解，这个自定义...
Android实现仪表刻度盘
08-27
使用Canvas绘制仪表刻度盘，通过填充数据实现动态的仪表盘数据。
自定义控件-类表盘体重选择器的实现
03-01
代码为博客实例代码：有问题博客留言：http://blog.csdn.net/u013637305/article/details/50774062
Android的一款自定义的仪表盘控件
07-29
android一款仪表盘控件,测试可以安装。具体如何整合到你的应用，查看我的博客文章
Android自定义控件之双刻度仪表盘
03-13
Android自定义控件之双刻度仪表盘JAVA代码，完整工程，解包可用。开发环境：Android studio3.2 + ANDROID8.0。界面效果可去我博客查看：https://blog.csdn.net/u011266964/article/details/104839782
android：仪表盘（简单易实现）
08-26
很多仪表盘的例子比较复杂，我这个仪表盘的例子将一部分复杂成分转移给了美工人员，而在代码上非常简单明了。
android 自定义view实现表盘效果
zhouguizhi
11-06 5314
android 自定义view实现表盘效果
基于Android的体重档案应用设计与实现(源码)
最新发布
swEngineer16的博客
04-03 212
安卓Android体重档案、体重参数记录、身体指标诊断、体重图表
Android 标准体重进度条
Alva__Bai的博客
06-16 522
@标准体重进度条 第一篇博客贡献给我的自定义多段颜色进度条 项目需求要写一个标准体重展示进度条 网上没有搜到示例，所以根据自己的理解写了一个 git: https://github.com/bwyBai/-. ##代码 // An highlighted block public class WeightBarView extends View { //第一段颜色画笔 private Paint firstPaint; // 第二段颜色画笔 private Pai
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

FranzLiszt1847

嘟嘟嘟嘟嘟

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值