0

クレジット カードを表示するカスタム イメージビューを作成しました。クレジットカードを作成するには、基本イメージがあり、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 桁のスペースしか占めていないことを想像してください)。小さな画面になると、テキストが大きすぎて、画像の端まで行ったり、画像を通り過ぎたりします。

解決策はありますか？理由はありますか？

4

2 に答える 2

0

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

望ましい結果が得られるまで、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);
    }
}
于 2012-04-04T09:44:43.793 に答える