Question

我的TabLayout的两侧都有两个透明的垂直条。看起来像这样：

它是在我从TabLayout删除android:theme="@style/AppTheme.ActionBar"之后出现的，因为它没有显示TabLayout指示器：

可能是什么问题？

我的布局：

 <android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="my.beeline.kz.ui.ScrollableController">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/AppTheme.ActionBar"
            app:layout_collapseMode="none"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:titleMarginStart="@dimen/toolbar_title_margin"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            app:tabMinWidth="120dp"
            app:tabSelectedTextColor="@color/black"
            app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
            app:tabTextColor="@color/gray_solid"/>

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

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

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

更新：

解决方案是从AppBarLayout中删除android:background="@null"

Answer 1

此代码对我有用，我希望对您有用：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>

    <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.CoordinatorLayout>

Answer 2

在这里，我将向您展示如何在android应用中实现材料设计标签。

1。打开应用程序级别的build.gradle并添加设计支持库，因为TabLayout是Android设计支持库的一部分：

compile 'com.android.support:design:27.0.2'

2。在您的布局activity_main.xml或您想添加的任何地方添加标签页布局和查看寻呼机

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/app_bar" />

    <android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?actionBarSize"
    app:tabGravity="fill"
    app:tabIndicatorColor="@color/white"
    app:tabIndicatorHeight="4dp"
    app:tabBackground="@color/colorPrimary"
    app:tabMode="fixed">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

</LinearLayout>

3。 app_bar.xml用于工具栏

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:gravity="center_vertical"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="@style/MyToolbarTheme"
app:title="@string/app_name"/>

4。 style.xml

<style name="MyToolbarTheme"
parent="@style/ThemeOverlay.AppCompat.Dark">
 <item name="colorControlNormal">@color/white</item>
 <item name="titleTextColor">@color/white</item>
</style>

一些用于自定义标签页外观的选项：

app:tabGravity=”fill”（用于“导航”选项卡重力）。其他是从中心放置导航选项卡的中心

app:tabIndicatorColor=”@color/white”（用于标签中的指示符）。在这里您可以看到白色指示器。

app:tabIndicatorHeight=”4dp”用于指示符高度。

app:tabMode=”fixed”（用于制表符模式）。其他可以滚动查看更多标签。

app:tabTextColor=”@color/semi_yellow”用于未选择的标签文本颜色。

app:tabSelectedTextColor=”@color/yellow”用于选择的标签文本颜色。

如果要向选项卡添加图标，则要做的是调用选项卡的setIcon（）方法。创建图标数组，并为每个选项卡分配每个图标，如下所示：

带有图标的标签：

private int[] tabIcons = {
 R.drawable.home,
 R.drawable.notification,
 R.drawable.star
};
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);

结果的时间：

没有图标

快乐编码！

TabLayout视觉错误：两侧均为灰色透明条

更新：

2 个答案: