Пользовательский выбранный цвет текста вкладки в SlidingTabLayout

Ответ 1

Проблема заключается в том, что скользящая компоновка не устанавливает состояние элемента как selected. Вот мой подход к решению проблемы.

1) Создайте селектор ЦВЕТ (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;
    ...
}

Ответ 2

1) Прежде всего создайте папку цвета под res (/res/color)
2) создать xml файл selector.xml под папкой /res/color

<?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) Затем в методе populateTabStrip() в SlidingTabLayout поместите этот

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

Ответ 3

У меня была аналогичная проблема, но я использовал собственный заголовок страницы View с иконкой и текстом. Чтобы установить пользовательские цвета, когда вкладка выбрана/не выбрана, я использовал селектор, созданный @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.

И что это, вот как это будет выглядеть.

Для тех, у кого еще есть проблемы, ссылка bitbucket для источника проекта и эта ссылка для всех проектов по дизайну материалов.

Ответ 4

В случае, если кто-то заинтересован в другом решении без использования файла ресурсов XML Selector, вот почему-то на основе ответа @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;
}

Вызовите вновь созданный метод setTabTitlesTextColor() в onPageSelected и setViewPager в классе SlidingTabLayout.java, поскольку ниже:

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

Ответ 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());

2. at onPageSelected:

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

Ответ 6

Попробуйте этот фрагмент кода в методе onCreate().

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