在 FragmentPagerAdapter 选项卡上显示图标

Question

这个例子是用C#在Xamarin中创建的，如果你知道Java中的答案，我也可以把它转换成C#

我正在使用 FragmentPagerAdapter 将三个不同的片段显示为选项卡。我可以在选项卡 headers 中显示一些文本，如下所示：

public override Java.Lang.ICharSequence GetPageTitleFormatted(int position)
{
    return new Java.Lang.String("Tab: " + position);
}

效果很好：我看到三个标签，标题为 Tab: 0、Tab: 1 和 Tab: 2。

现在，我想用一些图标替换文本。我正在尝试使用 SpannableString & ImageSpan .

来做与 PagerSlidingTabStrip 相同的事情

public override Java.Lang.ICharSequence GetPageTitleFormatted(int position)
{
    var image = Application.Context.Resources.GetDrawable(Resource.Drawable.icon);
    image.SetBounds(0, 0, image.IntrinsicWidth, image.IntrinsicHeight);

    var spannableString = new Android.Text.SpannableString("[icon]");
    var imageSpan = new Android.Text.Style.ImageSpan(image, Android.Text.Style.SpanAlign.Bottom);
    spannableString.SetSpan(imageSpan, 0, 1, Android.Text.SpanTypes.ExclusiveExclusive);
    return spannableString;
}

遗憾的是，我现在看到的是 [icon] 的三倍 headers。看起来好像根本没有将图标添加到 headers。

我是不是做错了什么？感谢您的帮助！

Answer 1

默认情况下，TabLayout 创建的选项卡将 textAllCaps 属性设置为 true，这会阻止渲染 ImageSpans。您可以通过更改 tabTextAppearance 属性.

来覆盖此行为

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
      <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>

<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
      <item name="textAllCaps">false</item>
</style>

然后您可以像这样将 MyCustomTabLayout 样式添加到您的 TabLayout：

<android.support.design.widget.TabLayout
 android:id="@+id/tabs"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 style="@style/MyCustomTabLayout" />

Answer 2

就像你说的那样，我们必须应用上面的样式

style="@style/MyCustomTabLayout"

但不是

android:textAppearance="@style/MyCustomTabLayout"

请参阅此以获取更多信息 https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout

在 FragmentPagerAdapter 选项卡上显示图标

Display icons on FragmentPagerAdapter tabs

tabs

android

xamarin