如何更改SlidingTabLayout的文本颜色？

Question

我创建了一个应用程序，使用了ActionBarCompat。

我使用SlidingTabLayout类创建选项卡。

这个类是：

SlidingTabLayout.java

但是我无法更改选项卡的颜色...

我的viewpager片段是这样的：

<swmovil.fyb.SlidingTabLayout
    android:id="@+id/mTabs"
    android:layout_width="match_parent"
    android:layout_height="48dip" />

<android.support.v4.view.ViewPager
    android:id="@+id/mPager"
    android:layout_width="match_parent"
    android:layout_height="0px"
    android:layout_weight="1"
    android:background="@color/white" />

应用程序运行良好，但我无法更改选项卡的文字颜色...

我制作了该应用程序，是在看到以下示例之后：

rudsonlive/Navigation-Drawer-ViewPager-ActionBarCompat

我该如何更改选项卡文本的文本颜色？

谢谢！

- seba123neo

Answer 1

首先，在res目录下创建一个名为color的文件夹 (/res/color)
其次，在/res/color文件夹下创建一个名为selector.xml的xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="@android:color/white" />
<item android:state_focused="true" android:color="@android:color/white" />
<item android:state_pressed="true" android:color="@android:color/white" />
<item android:color="#504f4f" /> 
</selector> 

3）然后在SlidingTabLayout中的populateTabStrip()方法中添加以下内容：

tabTitleView.setTextColor(getResources().getColorStateList(R.color.selector));

现在您拥有了一个选择器，您可以在任何想要的事件上更改文本的颜色。

如果这不起作用，请添加以下代码行。
a）在populateTabStrip()方法的末尾添加此内容

if (i == mViewPager.getCurrentItem()) {
    tabView.setSelected(true);
}

并且b) 将onPageSelected() 方法更改为以下内容

    @Override
    public void onPageSelected(int position) {
        if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            mTabStrip.onViewPagerPageChanged(position, 0f);
            scrollToTab(position, 0);
        }
        for (int i = 0; i < mTabStrip.getChildCount(); i++) {
            mTabStrip.getChildAt(i).setSelected(position == i);
        }
        if (mViewPagerPageChangeListener != null) {
            mViewPagerPageChangeListener.onPageSelected(position);
        }
    }    

- Panayiotis Irakleous

---

你能帮我更改点击时的背景颜色吗？目前它显示默认的 Holo 蓝色。 - Atul O Holic

@AtulOHolic 我不知道如何做到那一点。非常抱歉。 - Panayiotis Irakleous

没有问题。非常感谢以上内容。这对我来说是极大的帮助。 :) 请继续保持良好的工作状态。 :) - Atul O Holic

直到我意识到需要使用项目的包而不是 Android 包，它才能正常工作，例如：tabTitleView.setTextColor(getResources().getColorStateList(<your package name>.R.color.selector)); - kip2

@AtulOHolic，也许你还没有弄清如何设置背景。在你使用setTextColor()方法的代码中的同一位置，你可以调用tabTitleView.setBackground(getResources().getDrawable(R.drawable.selector_tab));。 - Bolic

getColorStateList已被弃用。请使用ContextCompat.getColorStateList(context, R.color.selector); - theczechsensation

Answer 2

打开你的文件 SlidingTabLayout.java（来自Google IO的默认文件），找到函数populateTabStrip()，然后在下面插入以下代码：

mTabStrip.addView(tabView);
        if (i == mViewPager.getCurrentItem()) {
            tabView.setSelected(true);
        }

添加以下行：

int color = ContextCompat.getColor(tabView.getContext(), R.color.grey);
tabTitleView.setTextColor(color);

请将R.color.grey替换为您喜欢的颜色。

- Abhishek Balani

---

是的，我也这么认为。 - Abhishek Balani

Answer 3

你应该能够看到类正在使用的TextView。

tabTitleView.setTextColor(getResources().getColor(R.color.white));

在我的类中，TextView 的名称是 tabTitleView。如果您正在使用由 Google 提供的默认示例，则可以在 populateTabStrip 函数下找到它。

- MrLithid

Answer 4

复制滑动选项卡布局（slidingtablayout）和滑动选项卡条（slidingtabstrip）的代码，并将其放入一个Java文件中。然后，在您的布局文件夹中创建一个customtab_title.xml文件以及在drawable文件夹中创建一个selector.xml文件。

<?xml version="1.0" encoding="utf-8"?>
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="horizontal"
           android:padding="10dp"
   >


<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Text"
    android:textColor="@drawable/slidingtab_title_color"/>


</LinearLayout>

selector.xml

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

在您的MainActivity或显示选项卡的位置添加一行代码 - tabs.setCustomTabView(R.layout.customtab_title, R.id.textView2);

这里的tabs是滑动选项卡布局tabs;

要更改指示器颜色，请添加 - tabs.setSelectedIndicatorColors(getResources().getColor(R.color.unpressed));

- Aman Verma

---

小注释：你的TextView不一定要在LinearLayout中。它可以是XML中唯一的视图。 - SteelBytes

Answer 5

   @Override
    public void onPageSelected(int position) {

for (int i = 0; i < mTabStrip.getChildCount(); i++) {

  TextView tv = (TextView) mTabStrip.getChildAt(i);
 if (i==position)
  tv.setTextColor(getResources().getColorStateList(R.color.white));
 else                             
  tv.setTextColor(getResources().getColorStateList(R.color.tab_text_color));

        }

这可能会对您有所帮助

- Vinod Ranga

Answer 6

很遗憾，该类不支持在不编辑代码的情况下自定义选项卡文本颜色，并始终使用主题的默认文本颜色。您需要修补该类以允许通过代码或样式属性设置选项卡文本颜色。一个替代方法是使用PagerSlidingTabStrip库。

- BladeCoder

Answer 7

我使用了Panayiotis Irakleous的解决方案，但我认为最好避免在onPageSelected过程中使用循环部分。

步骤是相同的，您需要添加一个int类成员（例如：mCurrentTabIndex）来保存当前选项卡索引。

在步骤3.a中，您需要添加

mCurrentTabIndex = i;

所以它会像这样：

if (i == mViewPager.getCurrentItem()) {
    tabView.setSelected(true);
    mCurrentTabIndex = i;
}

最后，在步骤3.b中，将循环部分替换为：

mTabStrip.getChildAt(mCurrentTabIndex).setSelected(false);
mTabStrip.getChildAt(position).setSelected(true);
mCurrentTabIndex = position;

所以代码将会是这样的：

@Override
public void onPageSelected(int position) {
    if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
        mTabStrip.onViewPagerPageChanged(position, 0f);
        scrollToTab(position, 0);
    }

    mTabStrip.getChildAt(mCurrentTabIndex).setSelected(false);
    mTabStrip.getChildAt(position).setSelected(true);
    mCurrentTabIndex = position;

    if (mViewPagerPageChangeListener != null) {
        mViewPagerPageChangeListener.onPageSelected(position);
    }
}    

- saggaf.arsyad

Answer 8

查看SlidingTabLayout的代码...您可以设置自定义选项卡视图，从而控制选项卡的内容并设置自定义选项卡文本颜色。请参阅slidingTabLayout.setCustomTabView(int layoutResId, int textViewId)。

- simplatek