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();

Answer 3

要在位于（100,200）位置的灰色方块顶部绘制黑色数字，请尝试以下方法：

public class RectangleTextView extends View {

    Paint grayPaint;
    Paint blackPaint;

    float xPos = 100;
    float yPos = 200;

    float rectWidth = 60;
    float rectHeight = 50;

    public RectangleTextView(Context context) {
        super(context);

        grayPaint = new Paint();
        grayPaint.setColor(Color.GRAY);

        blackPaint = new Paint();
        blackPaint.setColor(Color.BLACK);
    }

    @Override
    public void onDraw() {
        canvas.drawRect(xPos - rectWidth / 2, yPos - rectHeight / 2,
                        xPos + rectWidth / 2, yPos + rectWidth /2, grayPaint);
        canvas.drawText("1", xPos, yPos, blackPaint);

        invalidate();
    }
}

这应该有助于解决这个问题。我不确定的一件事是canvas.drawText( ... )在给定的String和x处绘制了给定的y 居中。如果没有，您可能需要进行一些实验，将数字转换为居中。

祝你好运！

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

3 个答案: