Comment styliser le séparateur entre les onglets d'Ice Cream Sandwich ?

Question

J'utilise le style suivant avec un ensemble de neuf images de patch pour créer une ligne rouge au bas de certains onglets Ice Cream Sandwich au lieu de la ligne bleue standard :

<style name="customTabStyle" parent="@android:style/Widget.Holo.ActionBar.TabBar">
    <item name="android:tabStripLeft">@null</item>
    <item name="android:tabStripRight">@null</item>
    <item name="android:tabStripEnabled">false</item>
    <item name="android:showDividers">none</item>
    <item name="android:measureWithLargestChild">true</item>
    <item name="android:background">@drawable/tab_line</item>
    <item name="android:gravity">center</item>
</style>

<style name="customTabBar" parent="@android:style/Widget.Holo">
    <item name="android:showDividers">middle</item>
    <item name="android:divider">@drawable/divider2</item>
    <item name="android:dividerPadding">0dp</item>
</style>

<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
    <item name="android:actionBarTabStyle">@style/customTabStyle</item>
    <item name="android:actionBarTabBarStyle">@style/customTabBar</item>
</style>

La ligne rouge est affichée et tout semble correct, à l'exception du séparateur entre les onglets. Comme vous pouvez le voir à l'intérieur de la boîte verte dans l'image, la ligne n'est pas dessinée sous le séparateur. Comment puis-je sélectionner un objet à dessiner ou un style pour ce séparateur ?

El android:divider y android:showDividers Les articles ne sont pas responsables de l'intercalaire entre les onglets. Ils ne sélectionnent que le séparateur dessiné entre l'icône de l'onglet et le titre de l'onglet. Je cache ces séparateurs parce qu'il n'y a pas de titre et qu'un séparateur aurait l'air étrange.

---

Mise à jour En tenant compte de la réponse d'Aneal, j'ai ajouté un deuxième style de CustomTabBar. Ce style sélectionne un tableau comme séparateur. Le diviseur est une ligne noire solide créée avec le dessinable 9patch suivant :

Avec ce dessin, le séparateur est dessiné, mais il y a aussi une ligne vide à côté :

Answer 1

Après avoir supprimé tous les styles que j'utilise, j'ai obtenu l'image suivante :

Cette image contient également les petites lacunes. Il semble donc qu'il s'agisse d'une sorte de comportement par défaut.

J'ai cependant trouvé un moyen de contourner le problème. J'ai défini la ligne rouge comme arrière-plan standard pour l'ensemble de la barre d'onglets. De cette façon, l'espace apparaît mais personne ne peut le voir car l'arrière-plan, qui contient déjà la ligne, est affiché.

J'utilise maintenant le style suivant pour toutes mes activités :

<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
    <item name="android:actionBarTabBarStyle">@style/customTabBar</item>
    <item name="android:actionBarTabStyle">@style/customTabStyle</item>
</style>

Ce style est utilisé pour donner un style à chaque onglet de la barre d'onglets :

<style name="customTabStyle" parent="@android:style/Widget.Holo.ActionBar.TabView">
    <item name="android:showDividers">none</item>
    <item name="android:measureWithLargestChild">true</item>
    <item name="android:background">@drawable/tab_line</item>
    <item name="android:gravity">center</item>
</style>

Pour styliser l'ensemble du Tabbar, j'utilise le style suivant :

<style name="customTabBar" parent="@android:style/Widget.Holo.ActionBar.TabBar">
    <item name="android:showDividers">middle</item>
    <item name="android:divider">@drawable/divider</item>
    <item name="android:dividerPadding">0dp</item>
    <item name="android:background">@drawable/tab_unselected</item>
</style>

Ce style définit mon séparateur personnalisé et définit également l'arrière-plan de la barre d'onglets. En tant qu'arrière-plan, j'ai directement défini le dessinable neuf patch qui est affiché si un onglet n'est pas sélectionné. Le résultat de tout cela est une barre d'onglets avec un soulignement rouge sans aucun vide.

Answer 2

Voilà.

<style name="YourTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarTabBarStyle">@style/Divider</item>
</style>

<style name="Divider" parent="@android:style/Widget.Holo.ActionBar.TabBar">
    <item name="android:divider">@drawable/your_divider_drawable_here</item>
    <item name="android:showDividers">middle</item>
    <item name="android:dividerPadding">12dip</item>
</style>

Answer 3

<style name="AppTheme" parent="AppBaseTheme">
    <item>......
    </item>
    <item name="android:actionBarDivider">@null</item>

</style>

ici @null sert à ne pas fournir de diviseur et si vous voulez personnaliser votre séparateur, utilisez @drawable/your_divider_image.

Answer 4

Si vous souhaitez vous débarrasser des séparateurs, vous pouvez procéder ainsi :

<style name="customTabBar" parent="@android:style/Widget.Holo.ActionBar.TabBar">
    <item name="android:divider">@null</item>
</style>

Answer 5

Ce problème est causé par un énorme bogue dans l'implémentation de l'attribut Android:divider dans la classe LinerLayout du système ICS. Il a été introduit dans Honeycomb, cassé dans ICS et fonctionne à nouveau dans Jelly Bean.

Le problème est que lorsque vous utilisez Android:divider, il crée un petit espace entre l'enfant pour placer le divider, mais le divider n'est pas dans cet espace, mais après, donc il sera recouvert par l'onglet lui-même et l'espace restera vide. Bug très stupide. Essayez de comparer le code source de LinerLayout pour les versions 4.0 et 4.1.

Et oui la solution est de mettre le délimiteur en arrière plan de tous les onglets et il ne sera visible que dans les espaces entre les onglets causés par ce bug.