Android ViewPager自定义TabIndicator无法正常工作

Question

我已经用Google搜索了几个小时，以获得有关如何在ViewPager中更改TabIndicator颜色的解决方案。从我得到的文档中，我应该将一个PagerTabStrip作为子项添加到我的ViewPager XML中。但这不符合预期。有关解决方案的任何建议吗？

这是我的代码：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.adrissa.klea.MainActivity" >

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#934932"
    tools:context="com.adrissa.klea.MainActivity" >

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

<fragment
    android:id="@+id/navigation_drawer"
    android:name="com.adrissa.klea.NavigationDrawerFragment"
    android:layout_width="@dimen/navigation_drawer_width"
    android:layout_height="match_parent"
    android:layout_gravity="start" />

</android.support.v4.widget.DrawerLayout>

这就是它的样子：

显然我认为最终的结果是浅蓝色的tabIndicator是黑色的，但它却以某种方式落在了下面？

Answer 1

你需要用这些神奇的线条做到这一点。

 PagerTabStrip pagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_title_strip);
 pagerTabStrip.setDrawFullUnderline(true);
 pagerTabStrip.setTabIndicatorColor(Color.Black);

Answer 2

在themes.xml文件中，我添加了此代码

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="CustomActionBarTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
        <item name="actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>

<style name="MyActionBarTabs" parent="@style/Widget.AppCompat.ActionBar.TabView">

    <!-- tab indicator -->
    <item name="android:background">@drawable/actionbar_tab_indicator</item>

    <!-- Support library compatibility -->
    <item name="background">@drawable/actionbar_tab_indicator</item>
</style>

然后这是drawable文件夹中的actionbar_tab_indicator.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- STATES WHEN BUTTON IS NOT PRESSED -->

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

<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
      android:state_pressed="false"
      android:drawable="@drawable/tab_unselected_focused" />
<item android:state_focused="true" android:state_selected="true"
      android:state_pressed="false"
      android:drawable="@drawable/tab_selected_focused" />


<!-- STATES WHEN BUTTON IS PRESSED -->

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

<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
      android:state_pressed="true"
      android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="true" android:state_selected="true"
      android:state_pressed="true"
      android:drawable="@drawable/tab_selected_pressed" />
</selector>

然后，对于tab_selected状态，我创建了这个xml文件。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-6dp"
        android:left="-6dp"
        android:right="-6dp"
        android:bottom="0dp">

        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
            <stroke
                android:width="5dp"
                android:color="#07368e"/>
        </shape>
    </item>
</layer-list>

然后，对于我的布局，我得到这个标签指示。