Android Toolbar 和 Tab 分色

Question

我已经在 AppCompatActivity 的一侧定义了选项卡。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.TestActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            app:tabIndicatorColor="@android:color/white"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>


    </android.support.v4.view.ViewPager>

</android.support.design.widget.CoordinatorLayout>

我在活动中设置的工具栏，如下所示

        getSupportActionBar().setTitle("Test");
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

附加标签后，我看到工具栏和标签之间的颜色分离。

我怎样才能避免这种情况？

Answer 1

无论您在哪里设置操作栏，添加以下行：

getSupportActionBar().setElevation(0);

您看到的“颜色分离”是操作栏在活动内容上投射的阴影。 TabLayout 是该内容的一部分，因此如果您不想要阴影，则应移除操作栏的高度。

更新

如果您需要支持较旧的 API 版本，您可能需要在 xml 中创建自己的 Toolbar，然后调用 setSupportActionBar(toolbar)，以便您可以随意修改其外观。这个 xml 应该适合你：

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

然后在你开始调用getSupportActionBar()之前调用它

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

Answer 2

尝试在 AppBarLayout 中添加 TabLayout，我留下以下代码，您可以根据自己的设计进行调整

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main.coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="RtlHardcoded"
/>

<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>

    <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/example.collapsing"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="@string/flexible_title"
            app:expandedTitleMarginBottom="12dp"
            app:layout_scrollFlags="scroll"
            app:expandedTitleTextAppearance="@style/CollapsingTextAppearance.Inverse"
            app:contentScrim="?colorPrimary"
    />


        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@null"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="enterAlways"
                style="@style/ToolBarWithNavigationBack"
        />
            <TextView
                    android:id="@+id/toolbar_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="Toolbar Title"
                    android:textColor="@android:color/white"
                    android:textSize="18sp"
                    android:textStyle="bold"/>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
    ​
    <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
            app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
            app:tabIndicatorHeight="4dp"
    />
</android.support.design.widget.AppBarLayout>
​
<!-- The top margin value equals half height of the blue box -->
<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
​
​

Answer 3

尝试使用主题 Theme.AppCompat 。据我所知，这在操作栏和选项卡之间没有分隔符。

或者尝试将属性 windowContentOverlay 插入到您的主题中：

<style name="AppTheme" parent="android:Theme.AppCompat">
    <item name="android:windowContentOverlay">@null</item>
</style>