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

Custom selected tab text color in SlidingTabLayout

提问by Chol

I'm using the SlidingTabLayout from google (https://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html).

我正在使用来自谷歌的 SlidingTabLayout（https://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html）。

It works well, but what I want it is to put the selected title in bold and with a different color...

它运作良好，但我想要的是将所选标题以粗体和不同的颜色显示...

Regarding this post : Custom unselected tab text color in SlidingTabLayout

关于这篇文章： 在 SlidingTabLayout 中自定义未选择的标签文本颜色

I make a text_tab.xml in drawable with the selector:

我使用选择器在 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>

When in the populateTabStrip() method I put

当我在 populateTabStrip() 方法中

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

The color is always the one of unselected...

颜色始终是未选择的颜色之一...

I'm probably doing something wrong, or maybe there is another way to customise the selected tab title.

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

Someone has an idea?

有人有想法吗？

Thanks

谢谢

回答by skywall

The problem is, sliding layout do not set item's state as selected. Here is my approach to solve the problem.

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

1) Create COLORselector (ColorStateList) for your view. You can imagine it this way:

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

/res/color/tab_text_color.xml:

/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) Place created selector to your item's view textColor(or other required) attribute:

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

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

3) Do this changes in file SlidingTabLayout.java:

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;
    ...
}

回答by Panayiotis Irakleous

1) First of all create color folder under res (/res/color)
2) create xml file selector.xml under /res/color folder

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) Then in the populateTabStrip() method in SlidingTabLayout put this

3) 然后在 SlidingTabLayout 的 populateTabStrip() 方法中把这个

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

now you have a selector and you can change the color of the text on any event you want

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

if that is not working add the following lines of code.
a) in populateTabStrip() method at the end add this

如果这不起作用，请添加以下代码行。
a) 在 populateTabStrip() 方法的最后添加这个

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

and b) change the onPageSelected() method to this

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);
        }
    }    

回答by Rohan Kandwal

I had a similar problem but I was using a custom page title View with an icon and a text. To set custom colors when a tab is selected/unselected, I used the selector created by @PanayiotisIrakleous, so a big thanks to him for posting it.

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

Here's how I did it:-

这是我的做法：-

1- Create a xml file for the selector. I made a file, slidingtab_title_color.xmland placed it in Drawablefolder.

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- Open your custom layout for tab title and add the selectorfile in the android:textColorattribute. My custom file is named as slidingtab_title_color.xmland has the following code-

2- 打开选项卡标题的自定义布局并selector在android:textColor属性中添加文件。我的自定义文件被命名为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- (Optional) If you want to change the color of the indicator and the background of sliding tab then add the following line to the file where you are initializing your SlidingTabLayout-

3-（可选）如果要更改指示器的颜色和滑动选项卡的背景，则将以下行添加到您正在初始化的文件中SlidingTabLayout-

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

Just make sure that you are adding these lines before you are setting the ViewPagerfor the SlidingTabLayout.

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

And that's it, here's how it will look.

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

For those who still have problems, here's the bitbucketlink for the project source and thislink for the all the projects on Material design.

对于那些谁还有问题，这里的到位桶链接项目源和这对材料设计的所有的项目链接。

回答by velval

In case anyone is interested in another solution without using a Selector XML resource file, here is one somehow based on @Panayiotis' answer.

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

Add the below methods to the SlidingTabStrip.javaclass:

将以下方法添加到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;
}

Call the newly created setTabTitlesTextColor()method in onPageSelectedand setViewPageron the SlidingTabLayout.javaclass as below:

在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);
        }
    }

回答by bat-el.g

I created a function

我创建了一个函数

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);

        }

    }

and called it in two functions in SlidingTabLayout:

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

1. at the end of populateTabStrip:

1. 在 populateTabStrip 的末尾：

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

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

1. at onPageSelected:

2. 在 onPageSelected:

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

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

回答by Kathiravan S

Try this piece of code in your onCreate() method.

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

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