Méthode de réglage de l'intervalle de Tab dans TabLayout (explication pratique)

L'utilisation de TabLayout avec ViewPager offre beaucoup de commodités, mais TabLayout a encore beaucoup de choses qui sont critiquées.

Voici comment configurer l'intervalle entre les tabs, j'ai cherché sur le web et toutes les méthodes que j'ai trouvées, que ce soit padding ou margin, ne fonctionnent pas, il n'y a qu'une seule solution, si vous voulez utiliser TabLayout, vous devez trouver une autre solution. Voici l'effet :

Première méthode, puisqu'il est difficile de le configurer, faisons quelque chose sur le fond, voici le code de mise en page :

<android.support.design.widget.TabLayout
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@"+id/tl_download_tabs"
  android:layout_width="wrap_content"
  android:layout_height=""30dp"
  android:layout_marginTop=""10dp"
  android:layout_gravity="center_horizontal"
  android:overScrollMode="never"
  app:tabMode="fixed"
  app:tabPaddingStart=""30dp"
  app:tabPaddingEnd=""30dp"
  app:tabIndicatorHeight="0dp"
  app:tabBackground="@drawable"/download_tab_bg_selector"
  app:tabSelectedTextColor="#000000"
  app:tabTextColor="#ffffff"/>

Deuxième section, l'endroit clé est dans le selector de l'arrière-plan, voici le code :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_selected="true">
  <!--<shape>
   <solid android:color="#ffffff"/>
   <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
  </shape>-->
  <!--Pour que les tabs à l'intérieur de TabLayout aient un espace, on ne trouve pas d'autre méthode de configuration, on ne peut que configurer l'intervalle dans l'image de fond-->
  <layer-list>
   <item>
    <shape>
     <solid android:color="@android:color/transparent"/>
    </shape>
   </item>
   <item android:left="5dp" android:right="5dp">
    <shape>
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
     <solid android:color="#ffffff"/>
    </shape>
   </item>
  </layer-list>
 </item>
 <item android:state_selected="false">
  <!--<shape>
   <solid android:color="#bcbcbc"/>
   <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
  </shape>-->
  <layer-list>
   <item>
    <shape>
     <solid android:color="@android:color/transparent"/>
    </shape>
   </item>
   <item android:left="5dp" android:right="5dp">
    <shape>
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
     <solid android:color="#bcbcbc"/>
    </shape>
   </item>
  </layer-list>
 </item>
</selector>

Les commentaires sont les zones où le selector original n'avait pas d'intervalle, ici, le padding latéral de l'arrière-plan a été directement ajusté, l'effet est excellent.

Inconvénient : si l'intervalle est trop grand, ce mode a un petit défaut, c'est que l'on peut sélectionner un tab en cliquant sur une zone vide.

Cependant, pour des espaces pas très grands, cela ne se remarque pas vraiment.

Troisième section : l'utilisation de l'Activity est très simple :

TabLayout mTabLayout = (TabLayout) findViewById(R.id.tl_download_tabs);
  mTabLayout.addTab(mTabLayout.newTab().setText("Téléchargé"));
  mTabLayout.addTab(mTabLayout.newTab().setText("Téléchargement en cours"));
  mTabLayout.setupWithViewPager(mViewPager);

Quatre, à l'origine, sous le layout linéaire, avec TabLayout et ViewPager, essayez d'envelopper un RelativeLayout supplémentaire autour du TabLayout, et vous trouverez que le texte des Tab ne s'affiche pas. En ce qui concerne l'ordre de permutation de addTab et setupWithViewPager mentionné sur Internet, c'est aussi un trou, vous pouvez voir qu'il s'affiche, mais il y a aussi des situations plus absurdes, deux espaces vides en avant, et deux normaux en arrière, en un mot, c'est très bizarre.

Enfin, il faut traiter cela dans l'Adapter, il suffit de réécrire la méthode suivante, en fait, cela pourrait être plus raisonnable, au moins cela garantit que le nombre de Tab est identique au nombre de pages du ViewPager.

@Override
  public CharSequence getPageTitle(int position) {
   if(position == 0){
    return "Téléchargé";
   } 1{
    return "Téléchargement en cours";
   }
   return "";
  }

Cet article basé sur la méthode de mise en page de l'intervalle de TabLayout (explication d'exemple) est tout le contenu que l'éditeur partage avec vous, j'espère que cela peut vous donner une référence, et j'espère que vous soutenirez également le tutoriel de cri.

Déclaration : Le contenu de cet article est extrait du réseau, propriété du propriétaire original, le contenu est apporté par les utilisateurs d'Internet, ce site Web ne détient pas de propriété, n'a pas été traité par l'éditeur humain et n'assume pas de responsabilité juridique. Si vous trouvez du contenu suspect de violation de copyright, bienvenue à envoyer un e-mail à : notice#w pour signaler.3Déclaration : Le contenu de cet article est issu du réseau, propriété du propriétaire original, le contenu est apporté par les utilisateurs d'Internet, ce site Web ne détient pas de propriété, n'a pas été traité par l'éditeur humain et n'assume pas de responsabilité juridique. Si vous trouvez du contenu suspect de violation de copyright, veuillez envoyer un e-mail à : notice#w pour signaler, et fournir des preuves pertinentes. Une fois confirmé, ce site supprimera immédiatement le contenu suspect de violation de droit d'auteur.