Android 工具栏和标签分色

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>

工具栏我设置在里面activity如下

        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

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

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

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

Answer 2

无论您在何处设置操作栏，请添加此行：

getSupportActionBar().setElevation(0);

您看到的 "color separation" 是操作栏投射在 activity 内容上的阴影。 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 3

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

<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"
/>

Android 工具栏和标签分色

Android Toolbar and Tab color separation

java

android

android-fragments

android-tablayout

更新