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

Android自定义View——体重表盘

2022-05-31 121
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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 View
Android自定义View
Android自定义
FranzLiszt1847
目录
相关文章
一歲抬頭
|
4天前
|
Java API 调度
Android系统 自定义开机广播，禁止后台服务，运行手动安装应用接收开机广播
Android系统 自定义开机广播，禁止后台服务，运行手动安装应用接收开机广播
一歲抬頭
46 0
一歲抬頭
|
4天前
|
存储 Java Linux
Android Mstar增加IR 自定义遥控头码完整调试过程
Android Mstar增加IR 自定义遥控头码完整调试过程
一歲抬頭
30 1
老板这功能得加钱
|
1天前
|
Android开发 异构计算 前端开发
Android显示原理，安卓自定义view面试
Android显示原理，安卓自定义view面试
老板这功能得加钱
8 1
老板这功能得加钱
|
2天前
|
Android开发 开发者 容器
Android自定义View：MeasureSpec的真正意义与View大小控制
Android自定义View：MeasureSpec的真正意义与View大小控制
老板这功能得加钱
10 0
xiaowang_lj
|
2天前
|
Java Android开发
Android 12 自定义底部导航栏
Android 12 自定义底部导航栏
xiaowang_lj
13 4
aliyun8599273441-30642
|
4天前
|
存储 消息中间件 缓存
Android应用开发：实现自定义View的高效绘制
【5月更文挑战第12天】 在Android开发中，创建高性能的自定义视图是一项挑战，它要求开发者深入理解Android的绘图机制以及UI渲染过程。本文将探讨如何优化自定义View的绘制流程，减少不必要的重绘和布局计算，以提升应用的响应速度和流畅度。我们将介绍几种关键策略，包括利用硬件加速、缓存绘制内容和使用高效的数据结构来存储视图状态。通过实例分析和性能对比，读者将学会如何在自己的应用中运用这些技巧，从而打造出更加流畅和响应迅速的用户界面。
aliyun8599273441-30642
23 8
宁波阿成.
|
4天前
|
XML Android开发 数据格式
Android下自定义Button样式
Android下自定义Button样式
宁波阿成.
13 3
宁波阿成.
|
4天前
|
XML Java Android开发
如何美化android程序:自定义ListView背景
如何美化android程序:自定义ListView背景
宁波阿成.
9 2
宁波阿成.
|
4天前
|
搜索推荐 Android开发
自定义Android标题栏TitleBar布局
自定义Android标题栏TitleBar布局
宁波阿成.
11 1
一歲抬頭
|
4天前
|
Android开发 芯片
Android源代码定制：移除无用lunch|新建lunch|自定义customize.mk
Android源代码定制：移除无用lunch|新建lunch|自定义customize.mk
一歲抬頭
26 3

热门文章

最新文章

  • 1
    Android HAL深入探索(6): HIDL 添加SELinux 完整调试过程
  • 2
    Android 浅度解析：mk预置AAR、SO文件、APP包和签名
  • 3
    Android11以上 Audio音频调试方法
  • 4
    Android JNI 报错（signal 6 (SIGABRT), code -1 (SI_QUEUE), fault addr ）
  • 5
    RK3568 Android/Linux 系统动态更换 U-Boot/Kernel Logo
  • 6
    Android系统 文件访问权限笔记
  • 7
    Android系统 修改无源码普通应用为默认Launcher和隐藏Settings中应用信息图标
  • 8
    Android13 Root实现和原理分析
  • 9
    Android系统 init.rc开机执行shell脚本
  • 10
    FFmpeg开发笔记（九）Linux交叉编译Android的x265库
  • 1
    构建高效Android应用：Kotlin协程的实践指南
    19
  • 2
    构建高效Android应用：Kotlin与协程的完美融合
    33
  • 3
    【Android平板编程】远程Ubuntu服务器code-server编程写代码
    69
  • 4
    android 使用GSON 序列化对象出现字段被优化问题解决方案
    25
  • 5
    构建高效安卓应用：探究Kotlin与Java的性能对比
    110
  • 6
    构建高效安卓应用：探究Kotlin与Java的性能差异
    23
  • 7
    ADB 下载、安装及使用教程：让你更好地管理 Android 设备
    611
  • 8
    前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
    61
  • 9
    构建高效的安卓应用：探究Kotlin与Java的性能差异
    21
  • 10
    构建高效Android应用：探究Kotlin与Java的性能差异
    58

    • 相关课程

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

    • 相关电子书

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

    • 推荐镜像

    更多
  • android.googlesource.com
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考