不能设定画面和文字垂直居中的Android PagerTabStrip的Android(Cannot

我有问题，当我尝试设置图片和文字垂直居中。 所以我使用SpannableStringBuilder和ImageSpan。 我试图通过这个代码combile图片和文字：

@Override
        public CharSequence getPageTitle(int position) {
            Locale l = Locale.getDefault();
            Drawable drawableIcon = null;

            // space added before text for convenience
            SpannableStringBuilder sb = new SpannableStringBuilder(" ");

            ImageSpan span = null;
            switch (position) {
                case 0:
                    drawableIcon = getResources().getDrawable(R.drawable.ic_action_unread);
                    drawableIcon.setBounds(0, 0, drawableIcon.getIntrinsicWidth(), drawableIcon.getIntrinsicHeight());
                    span = new ImageSpan(drawableIcon, ImageSpan.ALIGN_BASELINE);
                    sb.append(getString(R.string.title_task_fragment).toUpperCase(l));
                    sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

                    //return getString(R.string.title_task_fragment).toUpperCase(l);
                    return sb;
                case 1:
                    drawableIcon = getResources().getDrawable(R.drawable.ic_action_camera);
                    drawableIcon.setBounds(0, 0, drawableIcon.getIntrinsicWidth(), drawableIcon.getIntrinsicHeight());
                    span = new ImageSpan(drawableIcon, ImageSpan.ALIGN_BASELINE);
                    sb.append(getString(R.string.title_news_fragment).toUpperCase(l));
                    sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

                    //return getString(R.string.title_news_fragment).toUpperCase(l);
                    return sb;
                case 2:
                    drawableIcon = getResources().getDrawable(R.drawable.ic_action_settings_white);
                    drawableIcon.setBounds(0, 0, drawableIcon.getIntrinsicWidth(), drawableIcon.getIntrinsicHeight());
                    span = new ImageSpan(drawableIcon, ImageSpan.ALIGN_BASELINE);
                    sb.append(getString(R.string.title_settings_fragment).toUpperCase(l));
                    sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

                    //return getString(R.string.title_settings_fragment).toUpperCase(l);
                    return sb;
            }
            return null;
        }

这是一个包含PagerTabStrip我的XML布局

<android.support.v4.view.ViewPager android:id="@+id/container"
        android:layout_width="match_parent" android:layout_height="match_parent"
        tools:context=".WrapperMainActivity" >
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_tab_strip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="@color/title_strip_background1"
            android:textColor="#fff" />
    </android.support.v4.view.ViewPager>

我已经设定的ImageSpan.ALIGN_BASELINE，但我没有得到预期的结果。 文本保持在底部，在同一条直线上的图像图标的不对齐...

我错过了什么？

谢谢...

Answer 1:

PagerTabStrip：
高度 - 48dp填充 - 从底部从底部的文字，12dp单行文本的两行文字12dp左右，20dp

在我来说，我是做一行文本

<android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_gravity="top"
        android:paddingBottom="20dp"
        android:textColor="#ffffff" />

Answer 2:

这个解决方案应该工作。 我测试了它和使用它的某个时候我。 它不考虑上升和体面的，但它在对齐中心的绘制。 该解决方案是

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.annotation.NonNull;
import android.text.style.ImageSpan;

import java.lang.ref.WeakReference;

public class CustomImageSpan extends ImageSpan {

  /**
   * A constant indicating that the center of this span should be aligned
   * with the center of the surrounding text
   */
  public static final int ALIGN_CENTER = -12;
  private WeakReference<Drawable> mDrawable;
  private int mAlignment;

  public CustomImageSpan(Context context, final int drawableRes, int alignment) {
    super(context, drawableRes);
    mAlignment = alignment;
  }

  @Override
  public int getSize(Paint paint, CharSequence text,
                     int start, int end,
                     Paint.FontMetricsInt fm) {
    Drawable d = getCachedDrawable();
    Rect rect = d.getBounds();
    if (fm != null) {
      Paint.FontMetricsInt pfm = paint.getFontMetricsInt();
      fm.ascent = pfm.ascent;
      fm.descent = pfm.descent;
      fm.top = pfm.top;
      fm.bottom = pfm.bottom;
    }
    return rect.right;
  }

  @Override
  public void draw(@NonNull Canvas canvas, CharSequence text,
                   int start, int end, float x,
                   int top, int y, int bottom, @NonNull Paint paint) {
    if (mAlignment == ALIGN_CENTER) {
      Drawable cachedDrawable = getCachedDrawable();
      canvas.save();
      //Get the center point and set the Y coordinate considering the drawable height for aligning the icon vertically
      int transY = ((top + bottom) / 2) - cachedDrawable.getIntrinsicHeight() / 2;
      canvas.translate(x, transY);
      cachedDrawable.draw(canvas);
      canvas.restore();
    } else {
      super.draw(canvas, text, start, end, x, top, y , bottom, paint);
    }
  }

  // Redefined locally because it is a private member from DynamicDrawableSpan
  private Drawable getCachedDrawable() {
    WeakReference<Drawable> wr = mDrawable;
    Drawable d = null;
    if (wr != null) {
      d = wr.get();
    }
    if (d == null) {
      d = getDrawable();
      mDrawable = new WeakReference<>(d);
    }
    return d;
  }
}

文章来源: Cannot Set Image and Text in Center Vertical Android PagerTabStrip Android