Scale text over image in customviewview

Question

Я написал собственное изображение для показа кредитной карты. Для создания кредитной карты у меня есть базовое изображение, и у меня есть сеттеры для установки PAN, держателя карты, истечения срока действия. Этот текст нужно нарисовать поверх изображения базовой карты. Моя проблема заключается в поддержании позиции и размера текста, чтобы он всегда выглядел корректно независимо от изменяющегося размера базового изображения. Единственное, на что я могу положиться, это соотношение сторон изображения, которое совпадает с нормальной кредитной картой.

Мой заказ ImageView

public class CardView extends ImageView { 
private String mPan = "4321"; 
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.

Я надеюсь, что это вам поможет. и исправьте меня, если я ошибаюсь