Question

我正在使用谷歌（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）下创建颜色文件夹
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-打开标签标题的自定义布局，并在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-（可选）如果要更改指示器的颜色和滑动选项卡的背景，请将以下行添加到初始化SlidingTabLayout的文件中 -

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

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

这就是它，它的外观如何。 SlidingTab with tab selector

对于仍有问题的人，请参阅项目来源的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;
}

在 onPageSelected 上调用新创建的 setTabTitlesTextColor（）方法，并在 SlidingTabLayout.java 类中调用 setViewPager 下面：

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中的两个函数中调用它：

在populateTabStrip结束时：

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

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

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

6 个答案: