2012-04-04 148 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; 
} 
} 

所以有時候這看起來不錯,但是當你到10個英寸的屏幕上的文字來說太小了,就在圖像的中心(想象一下看着一張信用卡,但數字只佔用中間8位數字的空間),並且當您進入小屏幕時,文字太大,直接進入圖像邊或經過它們。

任何解決方案?任何解釋爲什麼?

回答

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

嗨@Renard,我試着你的建議,但結果仍然是一樣的。 – tbellenger 2012-07-02 04:59:18

0

我設法在這行代碼

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。

我希望它能幫助你。並糾正我,如果我錯了