web-dev-qa-db-fra.com

Comment changer la couleur du texte de SlidingTabLayout?

J'ai fait une application qui utilise le ActionBarCompat 

J'ai créé les onglets à l'aide de la classe SlidingTabLayout.

la classe est la suivante:

SlidingTabLayout.Java

mais je ne peux pas changer la couleur des onglets ...

mon fragment de viewpager est le suivant:

<swmovil.fyb.SlidingTabLayout
    Android:id="@+id/mTabs"
    Android:layout_width="match_parent"
    Android:layout_height="48dip" />

<Android.support.v4.view.ViewPager
    Android:id="@+id/mPager"
    Android:layout_width="match_parent"
    Android:layout_height="0px"
    Android:layout_weight="1"
    Android:background="@color/white" />

l'application fonctionne très bien, mais je ne peux pas changer le texte color des onglets ...

J'ai fait la demande après avoir vu l'exemple suivant:

rudsonlive/Navigation-Drawer-ViewPager-ActionBarCompat

Comment puis-je changer la couleur du texte des onglets? 

merci !!!

25
seba123neo

1) Tout d’abord créer un dossier de couleurs sous res (/ res/color)
2) créer le fichier xml selector.xml dans le dossier/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) Ensuite, dans la méthode populateTabStrip () de SlidingTabLayout, mettez ceci

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

maintenant vous avez un sélecteur et vous pouvez changer la couleur du texte pour tout événement que vous voulez

si cela ne fonctionne pas, ajoutez les lignes de code suivantes.
a) dans la méthode populateTabStrip () à la fin, ajoutez ceci 

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

et b) remplacez la méthode onPageSelected () par 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);
        }
    }    
45

Ouvrez votre fichier SlidingTabLayout.Java (celui par défaut de Google IO) et recherchez la fonction populateTabStrip(), puis après ce code. 

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

ajoutez la ligne suivante:

int color = ContextCompat.getColor(tabView.getContext(), R.color.grey);
tabTitleView.setTextColor(color);

Remplacez R.color.grey par votre couleur préférée.

14
TheOddAbhi

Vous devriez pouvoir voir le TextView que la classe utilise.

tabTitleView.setTextColor(getResources().getColor(R.color.white));

Dans ma classe, TextView était tabTitleView. Si vous utilisez l'exemple par défaut fourni par Google, vous le trouverez sous la fonction PopulateTabStrip.

4
MrLithid

copier le code de glissementtablayout et glissementtabstrip et le placer dans un fichier Java, puis créer un fichier customtab_title.xml dans votre dossier de présentation et un fichier selector.xml dans votre dossier pouvant être dessiné . ` 

<?xml version="1.0" encoding="utf-8"?>
        <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"
   >


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

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="@color/unpressed" />
    <item Android:state_focused="true" Android:color="@color/unpressed" />
    <item Android:state_pressed="true" Android:color="@color/unpressed" />
    <item Android:color="@Android:color/black" />
</selector> 

Et dans votre activité principale ou lorsque vous affichez vos onglets, ajoutez une ligne de code - tabs.setCustomTabView (R.layout.customtab_title, R.id.textView2);

ici les onglets sont des onglets coulissants;

pour changer la couleur de l'indicateur, ajoutez - tabs.setSelectedIndicatorColors (getResources (). getColor (R.color.unpressed));

4
Sniper
   @Override
    public void onPageSelected(int position) {

for (int i = 0; i < mTabStrip.getChildCount(); i++) {

  TextView tv = (TextView) mTabStrip.getChildAt(i);
 if (i==position)
  tv.setTextColor(getResources().getColorStateList(R.color.white));
 else                             
  tv.setTextColor(getResources().getColorStateList(R.color.tab_text_color));

        }

cela peut vous aider

2
Vinod Ranga

Malheureusement, cette classe ne prend pas en charge la personnalisation de la couleur du texte de l’onglet sans éditer le code et utilise toujours la couleur de texte par défaut du thème. Vous devrez corriger la classe pour permettre de définir la couleur du texte des onglets par code ou par attribut de style . Une alternative consiste à utiliser la bibliothèque PagerSlidingTabStrip .

1
BladeCoder

J'utilise la solution Panayiotis Irakleous mais je pense qu'il est préférable d'éviter de faire une boucle dans la procédure onPageSelected. 

Les étapes sont les mêmes, vous devez ajouter un membre de la classe int (exemple: mCurrentTabIndex) pour enregistrer l'index de tabulation actuel.

Dans les étapes 3.a, vous devez ajouter 

mCurrentTabIndex = i;

Donc ce sera comme ça:

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

Enfin, aux étapes 3.b, remplacez la partie en boucle par ceci:

mTabStrip.getChildAt(mCurrentTabIndex).setSelected(false);
mTabStrip.getChildAt(position).setSelected(true);
mCurrentTabIndex = position;

Donc, le code sera comme ça:

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

    mTabStrip.getChildAt(mCurrentTabIndex).setSelected(false);
    mTabStrip.getChildAt(position).setSelected(true);
    mCurrentTabIndex = position;

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

En regardant le code de SlidingTabLayout ... Vous pouvez définir un onglet personnalisé, qui vous permet de contrôler le contenu de l'onglet et de définir une couleur de texte pour l'onglet. Jetez un coup d'œil à glissementTabLayout.setCustomTabView (int layoutResId, int textViewId).

0
simplatek