文本未显示在每个灰色矩形的中心

Question

我试图创建一个文本视图（黑色），其中包含数字1到7（每个数字位于每个灰色矩形的顶部和中心），但不幸的是，根据我的代码atm，这些数字似乎聚集在一起。如何解决这个问题？

还可以使用字符串中的字符串资源。用于数字1到7的xml文件，而不是使用整数。toString（i 1）？

期望成果

当前不希望的结果

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

    private TextPaint mTextPaint;

    public RectangleTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        int valueInPx = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics());
        int valueInSp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics());

        mRedPaint.setColor(Color.RED);

        mBackPaint.setAntiAlias(false);
        mBackPaint.setColor(Color.BLACK);
        mBackPaint.setStrokeWidth(valueInPx);
        mBackPaint.setStyle(Paint.Style.STROKE);

        mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        mTextPaint.setTextSize(valueInSp);
    }

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

        //draw end rectangles
        int mSideRectWidth = 10;
        canvas.drawRect(0, 0, mSideRectWidth, getHeight(), mRedPaint); //draw left end rectangle
        canvas.drawRect(getWidth() - mSideRectWidth, 0, getWidth(), getHeight(), mRedPaint); //draw right end rectangle

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


        for (int i = 0; i < 7; i++) {
            //draw black lines
            canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);

            //draw text views
            canvas.drawText(Integer.toString(i + 1), getWidth() / 2, getHeight() / 2, mTextPaint);
        }
    }
}

更新

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

    private TextPaint mTextPaint;

    public RectangleTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        int valueInPx = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics());
        int valueInSp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics());

        mRedPaint.setColor(Color.RED);

        mBackPaint.setAntiAlias(false);
        mBackPaint.setColor(Color.BLACK);
        mBackPaint.setStrokeWidth(valueInPx);
        mBackPaint.setStyle(Paint.Style.STROKE);

        mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        mTextPaint.setTextSize(valueInSp);
    }

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

        //draw end rectangles
        int mSideRectWidth = 10;
        canvas.drawRect(0, 0, mSideRectWidth, getHeight(), mRedPaint); //draw left end rectangle
        canvas.drawRect(getWidth() - mSideRectWidth, 0, getWidth(), getHeight(), mRedPaint); //draw right end rectangle

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


        for (int i = 0; i < 7; i++) {
            //draw black lines
            canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);

            //draw text views
            canvas.drawText(Integer.toString(i + 1), (i * boxWidth) + (boxWidth / 2), ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)), mTextPaint);
        }
    }
}

Answer 1

尝试：

canvas.drawText(Integer.toString(i + 1), (i * boxWidth) + (boxWidth / 2), (getHeight() / 2) + (valueInSp / 2), mTextPaint);