Android自定義TextView實現文字圖片居中顯示的方法

2019-12-12 01:15:31

字體：大中小

來源：轉載

供稿：網友

最近有個需求是這樣的，人民幣的符號“¥”因為安卓手機系統的不一致導致符號不是完全一樣，所以用美工的給的圖片代替，考慮到用的地方比較多，所以想著寫一個繼承于線性布局的組合控件，后來一想，安卓中不是有TextView嗎，這個自帶圖片的控件，后來寫了個demo，因為我是用的MatchParent，導致問題出現，人民幣符號不是和文字一樣的居中，因此才有了這篇博文，讓我們來自定義TextView吧，這個場景用的比較多。

分析下TextView的源碼

我們先來分析下TextView的源碼，因為TextView有上下左右四個方向的圖片，上下咱就先不考慮了，因為一般來說圖片垂直居中是沒有問題的，我們就只處理這個left，和right方向上的圖片，我們直接看TextView的ondraw方法，因為TextView 也是繼承自View，所有的繪制都將會在這里操作

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

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

那這樣，咱基本上就明白原理，TextView的四個方向都是通過Canvas的translate來繪制到文字的上下左右了，那咱們就只改這個scrollX 和 scrollY就可以實現咱的需求了吧。

具體實現

1.下面寫有注釋，不是特別麻煩，適配drawableLeft 和 drawableRight圖片，PS，xml中不要設置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>

更新效果圖（因為之前有看到網友回復，最近又用到了再更新下這個博客）

title是用的就是EmailCenterTextView,那個箭頭上下的就是設置的drawableRight,演示的未讀和垃圾箱EmailCenterTextView沒有設置圖片