效果图
在 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"/>