web-dev-qa-db-fra.com

Couleur de texte de l'onglet sélectionné personnalisé dans SlidingTabLayout

J'utilise SlidingTabLayout de google ( https://developer.Android.com/samples/SlidingTabsBasic/src/com.example.Android.common/view/SlidingTabLayout.html ).

Ça marche bien, mais ce que je veux c'est mettre le titre sélectionné en gras et avec une couleur différente ...

Concernant cet article: Couleur de texte de l'onglet non sélectionné personnalisé dans SlidingTabLayout

Je fais un text_tab.xml en dessinable avec le sélecteur:

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

Quand dans la méthode populateTabStrip () je mets

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

La couleur est toujours celle non sélectionnée ...

Je fais probablement quelque chose de mal, ou il existe peut-être une autre façon de personnaliser le titre de l'onglet sélectionné.

Quelqu'un a une idée?

Merci

androidcolorstabs
23
Chol

Le problème est que la disposition coulissante ne définit pas l'état de l'élément comme selected. Voici mon approche pour résoudre le problème.

1) Créez COULEUR sélecteur (ColorStateList) pour votre vue. Vous pouvez l'imaginer de cette façon:

/ 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) Placez le sélecteur créé dans la vue textColor (ou autre requis) de votre élément:

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

3) Effectuez ces modifications dans le fichier 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;
    ...
}
26
skywall

1) Créez d'abord un dossier de couleurs sous res (/ res/color)
2) créer le fichier xml selector.xml sous/res/color folder

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

vous avez maintenant un sélecteur et vous pouvez changer la couleur du texte à 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) changer la méthode onPageSelected () en cette

    @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);
        }
    }
25
Panayiotis Irakleous

J'ai eu un problème similaire, mais j'utilisais une vue de titre de page personnalisée avec une icône et un texte. Pour définir des couleurs personnalisées lorsqu'un onglet est sélectionné/désélectionné, j'ai utilisé le sélecteur créé par @PanayiotisIrakleous, donc un grand merci à lui de l'avoir posté.

Voici comment je l'ai fait: -

1- Créez un fichier xml pour le sélecteur. J'ai fait un fichier, slidingtab_title_color.xml et l'a placé dans le dossier 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- Ouvrez votre mise en page personnalisée pour le titre de l'onglet et ajoutez le fichier selector dans le Android:textColor attribut. Mon fichier personnalisé est nommé slidingtab_title_color.xml et a le code suivant:

<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 Facultatif) Si vous souhaitez modifier la couleur de l'indicateur et l'arrière-plan de l'onglet coulissant, ajoutez la ligne suivante au fichier dans lequel vous initialisez votre SlidingTabLayout-

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

Assurez-vous simplement que vous ajoutez ces lignes avant de définir le ViewPager pour le SlidingTabLayout.

Et voilà, voici à quoi cela ressemblera.SlidingTab with tab selector

Pour ceux qui ont encore des problèmes, voici le lien --- (bitbucket pour la source du projet et ce lien pour tous les projets sur Material Design.

6
Rohan Kandwal

Au cas où quelqu'un serait intéressé par une autre solution sans utiliser de fichier de ressources XML Selector, en voici une basée sur la réponse de @Panayiotis.

Ajoutez les méthodes ci-dessous à la classe 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;
}

Appelez la méthode setTabTitlesTextColor () nouvellement créée dans onPageSelected et setViewPager sur la classe SlidingTabLayout.Java comme ci-dessous:

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

Essayez ce morceau de code dans votre méthode onCreate ().

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

J'ai créé une fonction

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

        }

    }

et l'a appelé dans deux fonctions dans SlidingTabLayout:

  1. à la fin de populateTabStrip:
setTabTextSelected(tabTitleView, i == mViewPager.getCurrentItem());
  1. sur onPageSelected:
for (int i = 0; i < mTabStrip.getChildCount(); i++) {
              TextView textView = (TextView) mTabStrip.getChildAt(i);
              setTabTextSelected(textView, position == i);
            }
0
bat-el.g