android - 支持库版本 28.0.0 TabLayout bug

Question

更新到最新版本的支持库(27.1.1 -> 28.0.0)后，用户界面出现问题。

一个问题:

理想状态:

tab_layout_unselected_indicator.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="-5dp"
        android:right="-5dp"
        android:top="-5dp">
        <shape>
            <stroke
                android:width="2dp"
                android:color="@color/colorGrey" />
        </shape>
    </item>
</layer-list>

标签布局:

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorBlackDark"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:tabBackground="@drawable/tab_layout_unselected_indicator"
        app:tabIndicatorColor="@color/colorOrange"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorOrange"
        app:tabTextAppearance="@style/StrikeCustomTabText"
        app:tabTextColor="@color/colorGrey" />

看起来一个选项卡的背景与另一个选项卡交叉。我试图改变缩进并注意到这一点。现在我正在使用以前版本的支持库 (27.1.1)。我如何针对当前版本的支持库 (28.0.0) 修复此问题？

Answer 1

用这个替换你的背景图:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorGrey"/>
        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorBlackDark"/>
        </shape>
    </item>

</layer-list>

您已经正确地确定了您当前背景的问题；新的支持库允许选项卡项在其边界之外绘制，因此您现在看到负边距边框实际上出现了，而不是被剪掉了。

要解决这个问题，您可以改为绘制一个完整的灰色背景，然后绘制除 2dp 之外的所有黑色以覆盖大部分背景。这永远不会在选项卡项边界之外绘制，因此问题消失了。这里有一个小的 overdraw 成本(因为“线条”颜色必须与“背景”颜色重叠)，但我认为这不会对仅三个选项卡产生任何性能影响。