Question

我写了一张自定义的imageview来显示信用卡。为了创建信用卡，我有一个基本图像，我有设置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位数字的空间），当你进入小屏幕时，文字太大，直到图像边或经过它们。

任何解决方案？有什么解释吗？

Answer 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);
    }
}

Answer 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。

我希望它可以帮到你。如果错了，请纠正我

在自定义imageview中缩放图像上的文本

2 个答案: