在 SlidingTabLayout 中自定义选定的选项卡文本颜色

Question

我正在使用来自 google (https://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html) 的 SlidingTabLayout。

效果很好，但我想要的是将所选标题以粗体和不同颜色显示...

关于这篇文章： Custom unselected tab text color in SlidingTabLayout

我用选择器在 drawable 中创建了一个 text_tab.xml：

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:color="@android:color/selected" android:state_selected="true" />
 <item android:color="@android:color/unselected" />
 </selector>

当我放入 populateTabStrip() 方法时

 tabTitleView.setTextColor(getResources().getColorStateList(R.drawable.text_tab));

颜色始终是未选中的颜色...

我可能做错了什么，或者可能有另一种方法来自定义选定的标签标题。

有人有想法吗？

谢谢

Answer 1

问题是，滑动布局没有将项目的状态设置为selected。这是我解决问题的方法。

1) 为您的视图创建 COLOR 选择器 (ColorStateList)。你可以这样想：

/res/color/tab_text_color.xml：

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

2) 将创建的选择器放置到您的项目视图 textColor（或其他必需的）属性中：

<TextView
  ...
  android:textColor="@color/tab_text_color"
  ... />

3) 在文件 SlidingTabLayout.java 中做此更改：

View oldSelection = null; // new field indicating old selected item

// method to remove `selected` state from old one
private void removeOldSelection() { 
    if(oldSelection != null) {
        oldSelection.setSelected(false);
    }
}

// improve method scrollToTab() as follows
private void scrollToTab(int tabIndex, int positionOffset) {
    final int tabStripChildCount = mTabStrip.getChildCount();
    if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {
        return;
    }

    View selectedChild = mTabStrip.getChildAt(tabIndex);
    if (selectedChild != null) {

        if(positionOffset == 0 && selectedChild != oldSelection) { // added part
            selectedChild.setSelected(true);
            removeOldSelection();
            oldSelection = selectedChild;
        }

        int targetScrollX = selectedChild.getLeft() + positionOffset;

        if (tabIndex > 0 || positionOffset > 0) {
            // If we're not at the first child and are mid-scroll, make sure we obey the offset
            targetScrollX -= mTitleOffset;
        }

        scrollTo(targetScrollX, 0);
    }
}

private void populateTabStrip() {
    removeOldSelection(); // add those two lines
    oldSelection = null;
    ...
}

Answer 2

1) 首先在res(/res/color)下创建color文件夹
2) 在/res/color文件夹下创建xml文件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="@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);
        }
    }    

Answer 3

我遇到了类似的问题，但我使用的是带有图标和文本的自定义页面标题视图。为了在选择/取消选择选项卡时设置自定义颜色，我使用了@PanayiotisIrakleous 创建的选择器，非常感谢他发布它。

我是这样做的：-

1- 为选择器创建一个 xml 文件。我创建了一个文件，slidingtab_title_color.xml 并将其放在Drawable 文件夹中。

<?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> 

2- 打开标签标题的自定义布局，并在android:textColor 属性中添加selector 文件。我的自定义文件命名为slidingtab_title_color.xml，代码如下-

<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"
    android:background="@drawable/ripple_effect">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
<!--Adding the selector file in textColor attribute-->
    <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>

3-（可选）如果你想改变指示器的颜色和滑动标签的背景，那么将以下行添加到你正在初始化SlidingTabLayout的文件中@-

mSlidingTab.setBackgroundColor(getResources().getColor(R.color.primaryColor));
mSlidingTab.setSelectedIndicatorColors(getResources().getColor(R.color.accentColor));

只需确保在为SlidingTabLayout 设置ViewPager 之前添加这些行。

就是这样，这就是它的外观。

对于那些仍有问题的人，这里是项目源代码的bitbucket 链接和材料设计所有项目的this 链接。

Answer 4

如果有人对不使用 Selector XML 资源文件的另一种解决方案感兴趣，这里有一个基于 @Panayiotis 的答案的解决方案。

将以下方法添加到 SlidingTabStrip.java 类中：

public void setTabTitlesTextColor(int selectedPosition) {
    for (int i = 0; i < getChildCount(); i++) {
        if (TextView.class.isInstance(getChildAt(i))) {
            ((TextView) getChildAt(i)).setTextColor((selectedPosition == i) ? getTabColorizer().getIndicatorColor(i) : Color.argb(90, 0,0,0)  );
        }
    }
}

public SlidingTabLayout.TabColorizer getTabColorizer() {
    if (mCustomTabColorizer != null)
        return mCustomTabColorizer;
    else
        return mDefaultTabColorizer;
}

在SlidingTabLayout.java类的onPageSelected和setViewPager中调用新创建的setTabTitlesTextColor()方法为下面：

public void setViewPager(ViewPager viewPager) {
    mTabStrip.removeAllViews();

    mViewPager = viewPager;
    if (viewPager != null) {
        viewPager.setOnPageChangeListener(new InternalViewPagerListener());
        populateTabStrip();
        mTabStrip.setTabTitlesTextColor(viewPager.getCurrentItem());
    }
}

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

        mTabStrip.setTabTitlesTextColor(position);

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

Answer 5

我创建了一个函数

private void setTabTextSelected(TextView textView, boolean selected){
        if (selected){
            textView.setTextColor(getResources().getColor(R.color.Black));
            textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
        }
        else{
            textView.setTextColor(getResources().getColor(R.color.ColorPrimaryDark));
            textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 13);

        }

    }

并在 SlidingTabLayout 的两个函数中调用它：

1. populateTabStrip 结尾：

setTabTextSelected(tabTitleView, i == mViewPager.getCurrentItem());

1. 在 onPageSelected：

for (int i = 0; i < mTabStrip.getChildCount(); i++) {
              TextView textView = (TextView) mTabStrip.getChildAt(i);
              setTabTextSelected(textView, position == i);
            }

Answer 6

在你的 onCreate() 方法中尝试这段代码。

tabTitleView.setTabTextColors(
    getResources().getColor(R.color.active), 
    getResources().getColor(R.color.inactive));