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

Question

我正在使用谷歌的SlidingTabLayout(https://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html).

它运作良好,但我想要的是将选定的标题以粗体显示并使用不同的颜色...

关于这篇文章: 在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()方法更改为this

    @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.

就是这样,这就是它的外观.

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