如何在 Android 中以编程方式更改 TabLayout 背景

Question

我正在做的是我试图改变Toolbar，StatusBar和Tablayout颜色而不是默认的theme颜色，我能够成功地改变所有widgets的颜色但是得到Tablayout 中应用主题的原色某种边界不知道为什么？谁能告诉我如何删除它？是否有任何默认样式被定义为Tablayout 的边缘也不是矩形。

屏幕：

xml：

<?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/app_bar_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".mainFlow.MainActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        android:background="@color/colorPrimaryDark"
        app:tabIndicatorHeight="2dp"
        app:tabMode="fixed"
        app:tabIndicatorColor="@color/white"/>

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

Kotlin 中的代码

首先，我们将创建CustomTabLayout

import android.content.Context
import android.graphics.Color
import android.util.AttributeSet
import com.google.android.material.tabs.TabLayout

class CustomTabLayout : TabLayout {
    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    )

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        setBackgroundColor(Color.TRANSPARENT)
    }
}

那我们就直接在布局文件中使用了

<com.packagename.CustomTabLayout
                        android:id="@+id/tab"
                        app:tabInlineLabel="true"
                        app:tabIndicator="@null"
                        android:layout_marginTop="8dp"
                        android:layout_marginHorizontal="16dp"
                        app:tabBackground="@null"
                        android:hapticFeedbackEnabled="true"
                        app:tabIndicatorHeight="0dp"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        tools:layout_height="40dp" />

它可以在透明背景下使用标签布局。

您可以在customTablayout 类中根据您的要求更改颜色。

Answer 2

在我的例子中，我将标签的背景颜色设置为透明：

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:tabBackground="@android:color/transparent"/>

然后我只是在代码中设置 TabLayout 背景颜色：

tabs.setBackgroundColor()

Answer 3

我遇到了完全相同的问题。我想更改整个选项卡布局，而不仅仅是选择的选项卡，因为我将它与日/夜模式一起使用。我通过在 onCreate 中设置内容视图之前检查我为夜间主题设置的布尔值来解决它。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    SharedPreferences nightModeSwitchState = getSharedPreferences("NightModeSwitchState", 0);
    mNightModeSwitchState = nightModeSwitchState.getBoolean("NightModeSwitchState", false);

    if (mNightModeSwitchState) {
        setContentView(R.layout.activity_book_night);
    } else {
        setContentView(R.layout.activity_book);
    }

我有两个布局都包含 tabLayouts。其中一个引用了 tabLayout 的样式文件，该样式文件设置为具有深色背景的夜间模式颜色，并且布局引用了一个样式文件，该样式文件设置为 tablayout 的常规颜色。

<style name="CategoryTab" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@android:color/white</item>
    <item name="tabSelectedTextColor">@android:color/white</item>
    <item name="tabTextAppearance">@style/CategoryTabTextAppearance</item>
    <item name="tabBackground">@drawable/tab_regular_theme</item>
    <item name="android:textColorSecondary">@android:color/white</item>
</style>

<style name="CategoryTabNight" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@android:color/white</item>
    <item name="tabSelectedTextColor">@android:color/white</item>
    <item name="tabTextAppearance">@style/CategoryTabTextAppearance</item>
    <item name="tabBackground">@drawable/tab_layout_dark_mode</item>
    <item name="android:textColorSecondary">@android:color/white</item>
</style>

样式文件引用了控制背景颜色的不同可绘制对象，如您在上面看到的......这里是可绘制对象......

这是夜间模式可绘制的：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/dark_grey" android:state_selected="true"/>
<item android:drawable="@color/dark_grey"/>
</selector>

这里是普通模式的drawable：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/app_bar" android:state_selected="true"/>
<item android:drawable="@color/app_bar"/>
</selector>

其他的一切都是布局是相同的，因为不会弄乱任何东西，只是改变了 tablayouts 的样式文件。我希望这是有道理的。我测试了它，它对我有用。我已经尝试了很多其他的东西，但没有任何效果。在检查布尔值之前调用 Shared Preference 来获取值很重要。我希望这对某人有所帮助。

Answer 4

试试这个：

你的 xml：

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

和选择器 res/drawable/tab_color_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>

或以编程方式：

tabLayout.setBackground(ContextCompat.getDrawable(context, R.drawable.tab_color_selector));