AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Android自定义View——体重表盘

2022-05-31 142
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Android自定义View——体重表盘分析起始角度圆弧指针代码初始化属性画布绘制内圆弧绘制外圆弧绘制中间指针绘制中间文字绘制左右两边文字动画全部代码


分析


起始角度


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

image.png


圆弧


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

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


指针


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

image.png


代码

初始化属性

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();
    }
}



文章标签：
Android开发
关键词：
Android自定义
Android自定义View
Android View
FranzLiszt1847
目录
相关文章
阿迷创客
|
23天前
|
存储 Shell Android开发
基于Android P，自定义Android开机动画的方法
本文详细介绍了基于Android P系统自定义开机动画的步骤，包括动画文件结构、脚本编写、ZIP打包方法以及如何将自定义动画集成到AOSP源码中。
阿迷创客
42 2
基于Android P，自定义Android开机动画的方法
请看我回答~
|
21天前
|
供应链 物联网 区块链
未来触手可及：探索新兴技术的趋势与应用安卓开发中的自定义视图：从基础到进阶
【8月更文挑战第30天】随着科技的飞速发展，新兴技术如区块链、物联网和虚拟现实正在重塑我们的世界。本文将深入探讨这些技术的发展趋势和应用场景，带你领略未来的可能性。
请看我回答~
33 6
请看我回答~
|
22天前
|
测试技术 Android开发 Python
探索软件测试的艺术：从基础到高级安卓应用开发中的自定义视图
【8月更文挑战第29天】在软件开发的世界中，测试是不可或缺的一环。它如同艺术一般，需要精细的技巧和深厚的知识。本文旨在通过浅显易懂的语言，引领读者从软件测试的基础出发，逐步深入到更复杂的测试策略和工具的使用，最终达到能够独立进行高效测试的水平。我们将一起探索如何通过不同的测试方法来确保软件的质量和性能，就像艺术家通过不同的色彩和笔触来完成一幅画作一样。
请看我回答~
42 1
mrq4nk6ni2neg
|
5天前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中，自定义视图控件是一种高级技巧，它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例，引导你了解如何在安卓项目中实现自定义视图控件，包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者，这篇文章都会为你提供有价值的见解和技巧。
mrq4nk6ni2neg
13 3
天下无贼001
|
6天前
|
前端开发 Android开发 开发者
安卓应用开发中的自定义视图基础
【9月更文挑战第13天】在安卓开发的广阔天地中，自定义视图是一块神奇的画布，它允许开发者将想象力转化为用户界面的创新元素。本文将带你一探究竟，了解如何从零开始构建自定义视图，包括绘图基础、触摸事件处理，以及性能优化的实用技巧。无论你是想提升应用的视觉吸引力，还是追求更流畅的交互体验，这里都有你需要的金钥匙。
天下无贼001
12 4
请看我回答~
|
9天前
|
缓存 搜索推荐 Android开发
安卓应用开发中的自定义View组件实践
【9月更文挑战第10天】在安卓开发领域，自定义View是提升用户体验和实现界面个性化的重要手段。本文将通过一个实际案例，展示如何在安卓项目中创建和使用自定义View组件，包括设计思路、实现步骤以及可能遇到的问题和解决方案。文章不仅提供了代码示例，还深入探讨了自定义View的性能优化技巧，旨在帮助开发者更好地掌握这一技能。
请看我回答~
25 7
Ant.Dream
|
11天前
|
Android开发
Android中SurfaceView的双缓冲机制和普通View叠加问题解决办法
本文介绍了 Android 平台上的 SurfaceView，这是一种高效的图形渲染控件，尤其适用于视频播放、游戏和图形动画等场景。文章详细解释了其双缓冲机制，该机制通过前后缓冲区交换来减少图像闪烁，提升视觉体验。然而，SurfaceView 与普通 View 叠加时可能存在 Z-Order 不一致、同步问题及混合渲染难题。文中提供了使用 TextureView、调整 Z-Order 和创建自定义组合控件等多种解决方案。
Ant.Dream
45 9
Ant.Dream
|
15天前
|
Android开发 容器
Android经典实战之如何获取View和ViewGroup的中心点
本文介绍了在Android中如何获取`View`和`ViewGroup`的中心点坐标，包括计算相对坐标和屏幕上的绝对坐标，并提供了示例代码。特别注意在视图未完成测量时可能出现的宽高为0的问题及解决方案。
Ant.Dream
25 7
请看我回答~
|
21天前
|
XML 搜索推荐 Android开发
安卓开发中的自定义View组件实践
【8月更文挑战第30天】探索Android世界，自定义View是提升应用界面的关键。本文以简洁的语言带你了解如何创建自定义View，从基础到高级技巧，一步步打造个性化的UI组件。
请看我回答~
59 2
阿迷创客
|
23天前
|
Android开发
Android在rootdir根目录创建自定义目录和挂载点的方法
本文介绍了在Android高通平台的根目录下创建自定义目录和挂载点的方法，通过修改Android.mk文件并使用`LOCAL_POST_INSTALL_CMD`变量在编译过程中添加目录，最终在ramdisk.img的系统根路径下成功创建了`/factory/bin`目录。
阿迷创客
45 1

热门文章

最新文章

  • 1
    Cause for NullPointerException android.support.v7.widget.RecyclerView.onMeasure
  • 2
    Android第二十九期 - 各种Android的App框架
  • 3
    解决Gradle DSL method not found: ‘android()’
  • 4
    Android虚拟机安装
  • 5
    Android关于Bitmap的缩放方法
  • 6
    Android O 后台startService限制简析
  • 7
    Android 组件化/模块化之路——在展示层搭建MVP结构
  • 8
    Android模拟、实现、触发系统按键事件的方法
  • 9
    【移动开发】Android中强大的适配功能----Fragment（碎片）总结
  • 10
    Android官方开发文档Training系列课程中文版：布局性能优化之布局层级优化
  • 1
    安卓应用开发：构建一个高效的用户登录系统
    67
  • 2
    构建高效Android应用：从系统优化到用户体验
    70
  • 3
    构建高效Android应用：探究Kotlin与Java的性能差异
    50
  • 4
    构建高效Android应用：采用Kotlin进行内存优化
    195
  • 5
    提升Android应用性能的实用策略
    47
  • 6
    构建高效Android应用：采用Kotlin与Jetpack的实践指南
    49
  • 7
    提升安卓应用性能的关键策略
    38
  • 8
    构建高效Android应用：探究Kotlin与Java的性能差异
    63
  • 9
    提升安卓应用性能的实用策略
    35
  • 10
    提升安卓应用性能的五大技巧
    56

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline

    • 推荐镜像

    更多
  • android.googlesource.com
    • 下一篇
    通义千问API入门教程