效果图
在 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);}@Overrideprotected 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 redrawmStrength = 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.SignalGridViewandroid:id="@+id/signalGridView"android:layout_width="85dp"android:layout_height="35dp"/>