如何使用 onDraw 在每个矩形的中心显示文本

Question

我正在尝试创建一个包含数字 1 到 7 的文本视图（黑色）（每个数字位于每个灰色矩形的顶部和中心 - 就像我在下面绘制的图像一样）但是我'我不确定我需要添加哪些属性才能实现此目的。我相信代码需要进入循环部分，但我不知道是什么代码。怎样做才能使数字集中显示在每个灰色矩形中？

期望的结果

当前结果

public class RectangleTextView extends View {
    private final Paint mBackPaint = new Paint();
    private final Paint mRedPaint = new Paint();
    private int mSideRectWidth = 10;

    public RectangleTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBackPaint.setColor(Color.BLACK);
        mRedPaint.setColor(Color.RED);
    }

    @Override protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (getWidth() == 0)
            return;

        //draw grey boxes
        setBackgroundColor(Color.parseColor("#808080"));
        int boxWidth = getWidth() / 7;

        //draw black lines and/or draw text in centre of each rectangle
        for (int i = 0; i < 7; i++) {
            canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);
        canvas.drawText(?);
        }

        //draw text in centre of each rectangle
        ?

        //draw left end rectangle
        canvas.drawRect(0, 0, mSideRectWidth, getHeight(), mRedPaint);

        //draw right end rectangle
        canvas.drawRect(getWidth() - mSideRectWidth, 0, getWidth(), getHeight(), mRedPaint);
    }
}

Answer 1

使用canvas.drawText()。您可以在绘制黑线的同一循环中执行此操作。

for (int i = 0; i < 7; i++) {
    canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);
    float x = ...
    float y = ...
    canvas.drawText(Integer.toString(i + 1), x, y, mBlackPaint);
}

您必须计算出文本位置的 x 和 y 值。如果你使用paint.setTextAlign(Align.CENTER)，那么就简化了x值的计算，它就在黑线的中间。

Answer 2

使用Paint.getTextBounds()方法获取文本的边界区域，然后可以从生成的Rect对象中提取垂直和水平的精确中心：

    Paint paint = new Paint();
    paint.setTextSize( textSize );

    Rect bounds = new Rect();
    if( text != null )
        paint.getTextBounds(text, 0, text.length(), bounds);
    else
        bounds.set(0,0,0,0);

    location.x -= bounds.exactCenterX();
    location.y -= bounds.exactCenterY();

如何使用 onDraw 在每个矩形的中心显示文本

How show text in centre of each rectangle using onDraw

java

android

android-canvas