成都网站建设设计

将想法与焦点和您一起共享

Android如何自定义TextView实现文字图片居中显示

这篇文章主要介绍Android如何自定义TextView实现文字图片居中显示,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联专注于济源企业网站建设,响应式网站设计,成都商城网站开发。济源网站建设公司,为济源等地区提供建站服务。全流程按需策划,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

我们先来分析下TextView的源码,因为TextView有上下左右四个方向的图片,上下咱就先不考虑了,因为一般来说图片垂直居中是没有问题的,我们就只处理这个left,和right方向上的图片, 我们直接看TextView的ondraw方法,因为TextView 也是继承自View,所有的绘制都将会在这里操作

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

从上面可以看到有个canvas.translate方法,大概意思是,save后,将画布向X轴和Y轴分别平移了scrollX ..和scrollY,平移后,将left方向的图片绘制上去,最后restore还原到上个画布中,Right同理。

那这样,咱基本上就明白原理,TextView的四个方向都是通过Canvas的translate来绘制到文字的上下左右了,那咱们就只改这个scrollX 和 scrollY就可以实现咱的需求了吧。

具体实现

1.下面写有注释,不是特别麻烦,适配drawableLeft 和 drawableRight图片,PS,xml中不要设置Gravity,这样就可以居中了,代码如下:

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

更新效果图(因为之前有看到网友回复,最近又用到了再更新下这个博客)

title是用的就是EmailCenterTextView,那个箭头上下的就是设置的drawableRight,演示的未读和垃圾箱EmailCenterTextView没有设置图片

Android如何自定义TextView实现文字图片居中显示

以上是“Android如何自定义TextView实现文字图片居中显示”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


文章标题:Android如何自定义TextView实现文字图片居中显示
分享地址:http://chengdu.cdxwcx.cn/article/jjcsog.html