快捷導(dǎo)航

Android自定義TextView實(shí)現(xiàn)文字圖片居中顯示的方法

更新時(shí)間：2018年01月22日 10:33:16 作者：布丁西西

下面小編就為大家分享一篇Android自定義TextView實(shí)現(xiàn)文字圖片居中顯示的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

最近有個(gè)需求是這樣的，人民幣的符號(hào)“¥”因?yàn)榘沧渴謾C(jī)系統(tǒng)的不一致導(dǎo)致符號(hào)不是完全一樣，所以用美工的給的圖片代替，考慮到用的地方比較多，所以想著寫(xiě)一個(gè)繼承于線性布局的組合控件，后來(lái)一想，安卓中不是有TextView嗎，這個(gè)自帶圖片的控件，后來(lái)寫(xiě)了個(gè)demo，因?yàn)槲沂怯玫腗atchParent，導(dǎo)致問(wèn)題出現(xiàn)，人民幣符號(hào)不是和文字一樣的居中，因此才有了這篇博文，讓我們來(lái)自定義TextView吧，這個(gè)場(chǎng)景用的比較多。

分析下TextView的源碼

我們先來(lái)分析下TextView的源碼，因?yàn)門(mén)extView有上下左右四個(gè)方向的圖片，上下咱就先不考慮了，因?yàn)橐话銇?lái)說(shuō)圖片垂直居中是沒(méi)有問(wèn)題的，我們就只處理這個(gè)left，和right方向上的圖片，我們直接看TextView的ondraw方法，因?yàn)門(mén)extView 也是繼承自View，所有的繪制都將會(huì)在這里操作

<span style="font-size:18px;">int vspace = bottom - top - compoundPaddingBottom - compoundPaddingTop;
int hspace = right - left - compoundPaddingRight - compoundPaddingLeft;
// IMPORTANT: The coordinates computed are also used in invalidateDrawable()
// Make sure to update invalidateDrawable() when changing this code.
if (dr.mShowing[Drawables.LEFT] != null) {
  canvas.save();
  canvas.translate(scrollX + mPaddingLeft + leftOffset,
           scrollY + compoundPaddingTop +
           (vspace - dr.mDrawableHeightLeft) / 2);
  dr.mShowing[Drawables.LEFT].draw(canvas);
  canvas.restore();
}
// IMPORTANT: The coordinates computed are also used in invalidateDrawable()
// Make sure to update invalidateDrawable() when changing this code.
if (dr.mShowing[Drawables.RIGHT] != null) {
  canvas.save();
  canvas.translate(scrollX + right - left - mPaddingRight
      - dr.mDrawableSizeRight - rightOffset,
       scrollY + compoundPaddingTop + (vspace - dr.mDrawableHeightRight) / 2);
  dr.mShowing[Drawables.RIGHT].draw(canvas);
  canvas.restore();
}</span>

從上面可以看到有個(gè)canvas.translate方法，大概意思是，save后，將畫(huà)布向X軸和Y軸分別平移了scrollX ..和scrollY，平移后，將left方向的圖片繪制上去，最后restore還原到上個(gè)畫(huà)布中，Right同理。

那這樣，咱基本上就明白原理，TextView的四個(gè)方向都是通過(guò)Canvas的translate來(lái)繪制到文字的上下左右了，那咱們就只改這個(gè)scrollX 和 scrollY就可以實(shí)現(xiàn)咱的需求了吧。

具體實(shí)現(xiàn)

1.下面寫(xiě)有注釋?zhuān)皇翘貏e麻煩，適配drawableLeft 和 drawableRight圖片，PS，xml中不要設(shè)置Gravity，這樣就可以居中了,代碼如下：

<span style="font-size:18px;">package com.chaoxing.email.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.TextView;
/**
 * use in xml
 * use in code
 */
public class EmailCenterTextView extends TextView {
  public EmailCenterTextView(Context context) {
    super(context);
  }
  public EmailCenterTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }
  public EmailCenterTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    Drawable[] drawables = getCompoundDrawables();
    if (null != drawables) {
      Drawable drawableLeft = drawables[0];
      Drawable drawableRight = drawables[2];
      float textWidth = getPaint().measureText(getText().toString());
      if (null != drawableLeft) {
        setGravity(Gravity.START | Gravity.CENTER_VERTICAL);
        float contentWidth = textWidth + getCompoundDrawablePadding() + drawableLeft.getIntrinsicWidth();
        if (getWidth() - contentWidth > 0) {
          canvas.translate((getWidth() - contentWidth - getPaddingRight() - getPaddingLeft()) / 2, 0);
        }
      }
      if (null != drawableRight) {
        setGravity(Gravity.END | Gravity.CENTER_VERTICAL);
        float contentWidth = textWidth + getCompoundDrawablePadding() + drawableRight.getIntrinsicWidth();
        if (getWidth() - contentWidth > 0) {
          canvas.translate(-(getWidth() - contentWidth - getPaddingRight() - getPaddingLeft()) / 2, 0);
        }
      }
      if (null == drawableRight && null == drawableLeft) {
        setGravity(Gravity.CENTER);
      }
    }
    super.onDraw(canvas);
  }
}</span>

更新效果圖（因?yàn)橹坝锌吹骄W(wǎng)友回復(fù)，最近又用到了再更新下這個(gè)博客）

title是用的就是EmailCenterTextView,那個(gè)箭頭上下的就是設(shè)置的drawableRight,演示的未讀和垃圾箱EmailCenterTextView沒(méi)有設(shè)置圖片