Android 仿信号格子强度动画效果实现

效果图
信号强度动画

在 Android 中，如果你想要绘制一个圆角矩形并使其居中显示，你可以使用 Canvas 类 drawRoundRect
方法。要使圆角矩形居中，你需要计算矩形的位置，这通常涉及到确定矩形左上角的位置（x, y），这样矩形就可以在其容器中水平和垂直居中。

以下是一个基本的步骤指南：

确定容器的尺寸：首先，你需要知道绘制圆角矩形的容器的宽度和高度。这通常是视图的宽度和高度。
计算圆角矩形的尺寸：确定你想要绘制的圆角矩形的宽度和高度。
计算圆角矩形的位置：为了居中矩形，你需要计算其左上角的 x 和 y坐标。这可以通过从容器宽度和高度中减去矩形宽度和高度，然后除以 2 来实现。例如，x = (containerWidth - rectWidth) / 2 和 y = (containerHeight - rectHeight) / 2。
绘制圆角矩形：使用 Canvas 的 drawRoundRect 方法，传递计算出的 x、y 坐标，矩形的宽度和高度，以及圆角的半径。

View源码

package com.android.circlescalebar.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;

public class SignalGridView extends View {
    private Paint mPaint = new Paint();
    private int mStrength;

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

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

    public SignalGridView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

        mPaint.setColor(Color.GRAY); // 设置文字颜色
        mPaint.setTextSize(40); // 设置文字大小
        mPaint.setAntiAlias(true); // 设置抗锯齿
        String text = "信号"; // 要绘制的文字
        float x = 20; // 文字开始的 x 坐标
        float y = 55; // 文字开始的 y 坐标
        canvas.drawText(text, x, y, mPaint); // 在指定位置绘制文

        // 绘制 5 个带弧度的矩形
        float left = 110;
        float top = 22;
        float right = 120;
        float bottom = 60;
        float radius = 5; // 圆角半径

        for (int i = 0; i < 5; i++) {
            RectF rect = new RectF(left, top, right, bottom);
            mPaint.setColor(mStrength <= i ? Color.GRAY : Color.GREEN); // 设置画笔颜色
            canvas.drawRoundRect(rect, radius, radius, mPaint);
            left += 23; // 调整下一个矩形的位置
            right += 23;
        }
    }

    public void updateSignalStrength(int strength) {
        // Invalidate the view to trigger a redraw
        mStrength = strength;
        invalidate();
    }
}

调用实现

    private Handler handler = new Handler();  
    private Runnable runnable;  
    private SignalGridView signalGridView;

    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        //..

        signalGridView = findViewById(R.id.signalGridView);

        runnable = new Runnable() {  
                private Random random = new Random();  
    
                @Override  
                public void run() {  
                    int randomNumber = random.nextInt(5); // 生成0到4之间的随机数  
                    signalGridView.updateSignalStrength(randomNumber);
                    handler.postDelayed(this, 200); // 每200毫秒执行一次  
                }  
            };  
    
        handler.post(runnable); // 开始执行   

    }
   

    @Override  
    protected void onDestroy() {  
        super.onDestroy();  
        handler.removeCallbacks(runnable); // 停止执行  
    }

布局

    <com.android.circlescalebar.view.SignalGridView
        android:id="@+id/signalGridView"
        android:layout_width="85dp"
        android:layout_height="35dp"/>