Skalieren Sie Text über Bild in benutzerdefinierter Bildansicht

Question

Ich habe eine benutzerdefinierte Bildansicht zum Anzeigen einer Kreditkarte geschrieben. Um die Kreditkarte zu erstellen, habe ich ein Basisbild und ich habe Setter, um die PAN, Kartenhalter, Verfall einzustellen. Dieser Text muss auf das Basiskartenbild gezeichnet werden. Mein Problem besteht darin, die Position und Größe des Textes beizubehalten, so dass er immer korrekt aussieht, egal wie groß das Basisbild ist. Das einzige, auf das ich mich verlassen kann, ist das Seitenverhältnis des Bildes, das mit einer normalen Kreditkarte übereinstimmt.

Mein individuelles Image

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

Also manchmal sieht ok, aber wie Sie auf 10-Zoll-Bildschirme der Text erhalten, ist viel zu klein, direkt in der Mitte des Bildes (man stellte Blick auf einer Kreditkarte, aber die Nummer nimmt nur den Platz der mittleren 8 Ziffern), und wenn Sie zu kleinen Bildschirmen kommen, ist der Text zu groß, geht bis zu den Bildseiten oder über sie hinaus.

Irgendwelche Lösungen? Irgendeine Erklärung warum?

Answer 1

Sie müssen die Textgrößen von der Größe Ihres Bildes abhängig machen.

versuchen mit unterschiedlichen Werten für yourPanFactor und yourCardholderFactor zu experimentieren, bis Sie das gewünschte Ergebnis

@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

ich diese Arbeit machen es geschafft, in dieser Zeilen Code

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

Hinweis erhalten, dass die editText hat die Standardtextgröße, die 14 SP ist.

Ich hoffe, es hilft Ihnen. und korrigieren Sie mich, wenn ich falsch bin