在自定义图像视图中缩放图像上的文本答案

【问题标题】：Scale text over image in custom imageview在自定义图像视图中缩放图像上的文本
【发布时间】：2012-04-04 08:50:15
【问题描述】：

我编写了一个自定义图像视图来显示信用卡。要创建信用卡，我有一个基本图像，并且我有设置 PAN、持卡人、到期的设置器。此文本需要绘制在基卡图像之上。我的问题是保持文本的位置和大小，这样无论基本图像的大小如何变化，它都看起来总是正确的。我唯一可以依靠的是图像的纵横比与普通信用卡相同。

我的自定义 ImageView

public class CardView extends ImageView {
private String mPan = "4321 0123 4567 8910";
private String mExpiry = "01/16";
private String mCardholder = "MR JOHN SMITH";
private float mPanTextSize = 22;
private float mOtherTextSize = 14;
private Paint mPanPaint = new Paint();
private Paint mCardholderPaint = new Paint();

public CardView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    initCardView();
}

public CardView(Context context, AttributeSet attrs) {
    super(context, attrs);
    initCardView();
}

public CardView(Context context) {
    super(context);
    initCardView();
}

private final void initCardView() {
    mPanPaint.setColor(0xFFFFFFFF);
    mPanPaint.setShadowLayer(1, 1, 1, 0xAA000000);
    mPanPaint.setAntiAlias(true);
    mPanPaint.setTextSize(mPanTextSize * getResources().getDisplayMetrics().scaledDensity);
    mPanPaint.setTypeface(Typeface.MONOSPACE);
    mCardholderPaint.setColor(0xFFFFFFFF);
    mCardholderPaint.setShadowLayer(1, 1, 1, 0xAA000000);
    mCardholderPaint.setAntiAlias(true);
    mCardholderPaint.setTextSize(mOtherTextSize * getResources().getDisplayMetrics().scaledDensity);
    mCardholderPaint.setTypeface(Typeface.MONOSPACE);
    setPadding(0,0,0,0);
    //setAdjustViewBounds(true);
    setScaleType(ImageView.ScaleType.CENTER_INSIDE);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    float panLength = mPanPaint.measureText(mPan);
    float x = (getWidth() - panLength)/2;
    float y =  -mPanPaint.ascent() + (getHeight() * 0.46f);
    canvas.drawText(mPan, x, y, mPanPaint);
    x = (getWidth() - panLength)/1.5f;
    y = y - mCardholderPaint.ascent();
    canvas.drawText(mExpiry, x, y, mCardholderPaint);
    y = y - mCardholderPaint.ascent();
    canvas.drawText(mCardholder, x, y, mCardholderPaint);

    //super.onDraw(canvas);
}

public void setPan(String pan) {
    mPan = pan;
    invalidate();
}

public String getPan() {
    return mPan;
}

public void setExpiry(String expiry) {
    mExpiry = expiry;
    invalidate();
}

public String getExpiry() {
    return mExpiry;
}

public void setCardholder(String cardholder) {
    mCardholder = cardholder;
    invalidate();
}

public String getCardholder() {
    return mCardholder;
}
}

所以有时这看起来不错，但是当您使用 10 英寸屏幕时，文本太小了，就在图像的中心（想象一下信用卡，但数字只占用中间 8 位数字的空间)，当你进入小屏幕时，文本太大了，会直接到图像两侧或越过它们。

有什么解决办法吗？任何解释为什么？

【问题讨论】：

标签： android text imageview

【解决方案1】：

您需要使文本大小取决于图像的大小。

尝试为 yourPanFactor 和 yourCardholderFactor 尝试不同的值，直到获得所需的结果

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    if (changed) {
        final int height = bottom-top;  
        mPanPaint.setTextSize(height*yourPanFactor);
        mCardholderPaint.setTextSize(height*yourCardholderFactor);
    }
}

【讨论】：

嗨@Renard，我尝试了你的建议，但结果还是一样。

【解决方案2】：

我设法在这行代码中完成了这项工作

if (imageView.getWidth() <= resource.getWidth()) {
           ratio = (float) resource.getWidth() / (float) imageView.getWidth();
     } else {
           ratio = (float) imageView.getWidth() / (float) resource.getWidth();
     }
Paint paint = new Paint();
paint.setColor(Color.WHITE);
paint.setTextSize(editText.getTextSize() * ratio);

请注意，editText 的默认文本大小为 14 sp。

希望对你有帮助。有错请指正

【讨论】：