无法在中心垂直 Android PagerTabStrip Android 中设置图像和文本

Question

当我尝试将图像和文本垂直居中设置时出现问题。 所以我使用 SpannableStringBuilder 和 ImageSpan。 我尝试通过此代码组合图像和文本：

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

这是我的 xml 布局，其中包含 PagerTabStrip

<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， 单行文字距离底部 20dp，两行文字距离底部 12dp

就我而言，我是为一行文字做的

<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

此解决方案应该有效。我已经对其进行了测试并使用了一段时间。它不考虑上升和体面，但它在中心对齐drawable。 这个解决方案是

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