有没有办法在TabLayout中使用SpannableString？

Question

我想要使用两种不同的文本大小来设置TabLayout的标题，就像下面给出的图片一样。或者采用其他方法来实现这一点！

我尝试使用类似下面的SpannableString。这段代码在for循环中执行5次！

SpannableString mSpannableString=  new SpannableString(s);
mSpannableString.setSpan(new RelativeSizeSpan(2f), 0,5, 0); // set size
mSpannableString.setSpan(new ForegroundColorSpan(Color.RED), 0, 5, 0);// set color
mTabLayout.getTabAt(i).setText(mSpannableString);

但是，正如CommonaSware所提到的那样，setText()并不会接受富文本内容！

- android_griezmann

---

也许你可以使用 fromHtml()。 - Krunal Kapadiya

@SahilMunjal Html.fromHtml() 这个也不行！ - android_griezmann

那么你应该为选项卡使用自定义布局。 - Sahil Munjal

@CommonsWare 感谢您的建议，是的，这似乎是TabLayout的错误。不过我已经编辑了我的问题！ - android_griezmann

当然，我一有机会就会在这里发布它。 - Mike M.

Answer 1

TabLayout 的默认样式中，对于其 TextView 使用了一个 TextAppearance，其中的 textAllCaps 属性设置为 true。该属性的转换方法将 CharSequence 作为平坦的 String 处理，因此任何 Spannable 信息都会丢失。

为了防止这种情况，我们可以为 TabLayout 创建一个样式，禁用 textAllCaps。例如：

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

将这个设置为TabLayout上的tabTextAppearance将允许你的SpannableString按预期工作。

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabTextAppearance="@style/TabTextAppearance" />

如评论中所述，在这里使用自定义的View作为选项卡的另一个选项，因为它不会默认设置有问题的属性。

- Mike M.

Answer 2

另一种方法是使用SpannableString文本来实现TabLayout：

@Override
    public CharSequence getPageTitle(int position) {
        // Generate title based on item position
        SpannableString sb = new SpannableString( tabTitles[position]);
        sb.setSpan(new RelativeSizeSpan(2f), 0,5, 0); // set size
        sb.setSpan(new ForegroundColorSpan(Color.RED), 0, 5, 0);// set color

        return sb;
    }

欲了解更多信息，请查看向TabLayout中添加图标+文本

- VIISHRUT MAVANII

Answer 3

Mike M.答案的补充

我也遇到了同样的问题，但只在Lollipop及其以前版本中出现，在Oreo中，在被样式化之前它可以正常工作，幸运的是Mike的答案解决了这个问题。

我正在使用Google Material TabLayout：

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        app:tabTextAppearance="@style/TabTextAppearance"
        android:background="@color/colorDarkGreen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabBackground="@drawable/tab_color_selector_green">

</com.google.android.material.tabs.TabLayout>

至少，如果您正在为Oreo和On工作，使用此小部件不需要放置样式。

- Axl Davalos