Android Swipe Tab 自定义 Tab Indicator 颜色

Question

我需要更改标签指示器颜色（见下图）：

即使我遵循以下官方教程：https://developer.android.com/training/basics/actionbar/styling.html#CustomTabs 我仍然无法使其工作。

应用编译版本为：compileSdkVersion 22

应用主题为：Theme.AppCompat.Light.DarkActionBar

...res/values/styles.xml（主题自定义文件）

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorDark</item>
    <item name="android:actionBarTabBarStyle">@color/colorPrimary</item>
    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle.Example</item>
</style>

<!-- ActionBar tabs styles -->
<style name="ActionBarTabStyle.Example" parent="@style/Widget.AppCompat.Light.ActionBar.TabText">
    <item name="android:background">@drawable/tab_indicator_ab_example</item>
</style>

<color name="colorDark">#ff9800</color>
<color name="colorPrimary">#ffc107</color>
<color name="happy">#ffeb3b</color>
<color name="normal">#fff176</color>
<color name="sad">#fff59d</color>
</resources>

...res/drawable/tab_indicator_ab_example.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="false" android:state_selected="false" />
<item android:drawable="@drawable/tab_selected_example" android:state_focused="false" android:state_pressed="false" android:state_selected="true" />

<!-- Focused states -->
<item android:drawable="@drawable/tab_unselected_focused_example" android:state_focused="true" android:state_pressed="false" android:state_selected="false" />
<item android:drawable="@drawable/tab_selected_focused_example" android:state_focused="true" android:state_pressed="false" android:state_selected="true" />

<!-- Pressed -->
<!--    Non focused states -->
<item android:drawable="@drawable/tab_unselected_pressed_example" android:state_focused="false" android:state_pressed="true" android:state_selected="false" />
<item android:drawable="@drawable/tab_selected_pressed_example" android:state_focused="false" android:state_pressed="true" android:state_selected="true" />

<!--    Focused states -->
<item android:drawable="@drawable/tab_unselected_pressed_example" android:state_focused="true" android:state_pressed="true" android:state_selected="false" />
<item android:drawable="@drawable/tab_selected_pressed_example" android:state_focused="true" android:state_pressed="true" android:state_selected="true" />
</selector>

无法弄清楚问题出在哪里，一切编译都没有错误，代码一步一步按照官方文档进行。谢谢。

Answer 1

你可以轻松尝试一下

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
//Use Color Resource here or directly parse color just like this

Answer 2

我在一些项目中使用了PagerSliderTabStrip。它易于设置和使用。

gradle 文件：

compile 'com.jpardogo.materialtabstrip:library:1.1.0'

layout.xml 文件：

<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary" />

Activity.java：

// Initialize the ViewPager and set an adapter
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(new TestAdapter(getSupportFragmentManager()));

// Bind the tabs to the ViewPager
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(pager);

要更改选择器的颜色，请使用：

PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.pstsIndicatorColor(yourColor); 

Answer 3

如果你使用的是SlidingTabLayout 类和SlidingTabStrip 样式（Something like this），那么你可以简单地调用SlidingTabLayout 类的方法setSelectedIndicatorColors(int... colors) 参数是一个数组，但是在数组中你可以只放一个颜色。所以如果你想从 SlidingTabLayout 调用方法，它看起来像：

int[] color = {Color.Pink, Color.Red, Color.Awesome};
//It could be only one color if you want

SlidingTabLayout tabs = (SlidingTabLayout) findViewById(R.id.tabs);
tabs.setSelectedIndicatorColors(color);

但只有按照我上面链接的教程并使用他的 Tab 实现样式，你才能做到这一点。

注意：这是实现 Material Design 内容的推荐和支持方式。在更多 Material Design Tuts 上，只需 google 关键字“Material Design Tab Tutorial Example”

Answer 4

您可以使用此代码更改选项卡指示器颜色：

    tabs = setCustomTabColorizer(new SlidingTabLayout.TabColorizer(){
    @override 
    public int getIndicatorColor(int position)
    return getResources().getColor(R.color.colorAccent);
    }
 )};

查看此示例教程：https://www.youtube.com/watch?v=WSaSNX5QI-E&index=27&list=PLonJJ3BVjZW6CtAMbJz1XD8ELUs1KXaTD

Answer 5

为了避免所有复杂性，我建议使用PagerSlidingTabStrip

因为它非常易于使用并且还具有很多自定义功能。通过它，您将能够像在 google play 应用程序中一样创建滑动标签。