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

Question

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

期望的结果

当前结果

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 值的计算，它就在黑线之间的中间。