2012-04-04 20 views
0

私はカスタム画像ビューを書いてクレジットカードを表示しました。クレジットカードを作成するには基本イメージがあり、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; 
} 
} 

だから、時々、これはOKに見えますが、テキストは右の画像の中央には、あまりにも小さいですあなたは10インチの画面に取得するよう(クレジットカードを見て想像するが、数字は中央の8桁のスペースを占有します)、小さな画面になると、テキストが大きすぎます。

どのようなソリューションですか?なぜどんな説明?

答えて

0

イメージのサイズに応じてテキストサイズを変更する必要があります。

は、あなたが希望する結果を得るまで、私はこのコードの行EDITTEXTが持っている

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

注この作業を行うために管理

@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); 
    } 
} 
+0

こんにちは@レナード、私はあなたが示唆したことを試みたが、結果はまだ同じです。 – tbellenger

0

yourPanFactorとyourCardholderFactorのためのさまざまな値を試してみてくださいデフォルトのテキストサイズは14 spです。

私はそれがあなたを助けてくれることを願っています。間違っている場合は私を修正してください

関連する問題