java - 如何在不导致Overdraw的情况下为UI中的特定组件添加背景色？

Question

背景

我有一个包含一些元素的 TabLayout。

在纵向模式下，元素没有足够的空间显示。所以我用了:

app:tabMode="scrollable"

另一方面，在横向模式下，元素有多余的空间，我希望它居中。所以我使用了这种方法:

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/Tab"
    android:layout_width="wrap_content" <!-- Used wrap_content -->
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true" <!-- And CenterHorizontal -->
    app:tabMode="scrollable" />

但是由于在我的 MainActivity 中背景颜色为空:

window.setBackgroundDrawable(null)

TabLayout 在横向模式下显示为 (Black Wings)。

我希望它有 @color/colorPrimary 翅膀。

---

所以我有两个选择:

1- 为我的 MainActivity 设置背景，不为空(又名 @color/colorPrimary)

我不想这样做，因为我在配套 ViewPager 中的所有 fragment 都会经历 Overdraw，因为它们都以编程方式设置了不同的背景。

或

2- 添加一个容器来孵化我的 TabLayout 并使用我的 @color/colorPrimary 设置它的背景，如下所示:

<RelativeLayout
    android:id="@+id/tabs_parent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        style="@style/Tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        app:tabMode="scrollable" />
</RelativeLayout>

我将在下面讨论这种方法的问题。

---

问题

使用上面的选项#2:

父 RelativeLayout 和子 TabLayout 两个 View 重叠处仍有一点点 Overdraw。

那么我怎样才能去除这部分额外的Overdraw呢？

---

想法

我正在考虑覆盖 View 类中的 OnDraw 方法以满足我的需要，但挑战在于如何知道我需要的实际位置 ClipRect()

另一个想法是想出一个，你知道，(更简单) 不同于上面选项 #2 的方法，来解决背景问题。

提前致谢。

Answer 1

我四处寻找这个确切问题的答案。在我的例子中，我动态添加和删除选项卡，所以我希望它在只有几个选项卡时填满屏幕，但在选项卡太多时开始滚动，而不是缩小它们或将标题放在两行上。使用以下自定义选项卡布局终于让它为我工作。 在调用 super.onMeasure() 之前设置最小宽度是关键。

public class CustomTabLayout extends TabLayout {

    public CustomTabLayout(Context context) {
        super(context);
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        ViewGroup tabLayout = (ViewGroup)getChildAt(0);
        int childCount = tabLayout.getChildCount();

        DisplayMetrics displayMetrics = getContext().getResources().getDisplayMetrics();
        int tabMinWidth = displayMetrics.widthPixels/childCount;

        for(int i = 0; i < childCount; ++i){
            tabLayout.getChildAt(i).setMinimumWidth(tabMinWidth);
        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

在xml中设置tab模式为可滚动

    <com.package.name.CustomTabLayout
        android:id="@+id/my_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable">