¿Cómo se forma el divisor entre las pestañas Ice Cream Sandwich?

Question

estoy usando el siguiente estilo junto con un conjunto de nueve imágenes de parche para crear una línea roja en la parte inferior de algunas fichas Sandwich de helado en lugar de la línea azul estándar:

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

Se muestra la línea roja y todo se ve bien, excepto por el divisor entre las pestañas. Como puede ver dentro del cuadro verde en la imagen, la línea no se dibuja debajo del divisor. ¿Cómo selecciono un dibujable, o un estilo para este divisor?

Los artículos android:divider y android:showDividers no son responsables del divisor entre pestañas. Solo seleccionan el divisor dibujado entre el icono de la pestaña y el título de la pestaña. Escondo esos divisores porque no hay un título y un divisor se vería extraño.

---

actualización Con la respuesta de Aneal en cuenta añadí una segunda customTabBar estilo. El estilo selecciona un drawable como un divisor. El divisor es una línea de color negro sólido creada con el dibujable siguiente 9patch:

Con esta dibujable se dibuja el divisor, pero también hay una línea en blanco al lado de él:

Answer 1

Después de la eliminación de todos los estilos que utilizo me dio la siguiente imagen:

Esta imagen también contiene los pequeños espacios. Por lo tanto, parece que esto es algún tipo de comportamiento predeterminado.

Sin embargo, encontré una forma de evitar el problema. Establecí la línea roja como un fondo estándar para toda la barra de pestañas. De esta manera aparece la brecha pero nadie puede verla porque se muestra el fondo, que ya contiene la línea.

ahora utilizo el siguiente estilo para todas mis actividades:

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

Este estilo se utiliza el estilo de cada una única pestaña dentro de la barra de pestañas:

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

de peinar todo el Tabbar utilizo el siguiente estilo:

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

Este estilo define mi divisor personalizado y también define el ba ckground para la tabbar. Como fondo, establecí directamente los nueve parches dibujables que se dibujan si no se selecciona una pestaña. El resultado de todo esto es una barra de tabulación con un subrayado rojo sin ningún espacio.

Answer 2

Aquí tienes.

<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

Si desea deshacerse de divisores que podría hacer esto:

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

Answer 4

BTW. Esto es causado por una gran falla en el ICS en la implementación de la clase LinerLayout del atributo android: divider. Fue presentado en Honeycomb, roto en ICS y trabajando nuevamente en Jelly Bean.

El problema es que cuando usas android: divider crea un espacio pequeño entre el elemento secundario para el divisor de lugar, pero coloca el divisor no en este espacio, pero después se solapará con la pestaña y el espacio permanecerá vacío . Muy estúpido error. Intente comparar el código fuente de LinerLayout para la versión 4.0 y 4.1.

Y la solución sí pone el delimitador en el fondo de todas las pestañas y será visible solo en los huecos entre las pestañas causadas por este error.

Answer 5

Basado en ATom's answer, aquí hay una manera de tener algo que se parezca a los separadores en todas las versiones de Android.

Para que esto funcione, no utilice ninguno de los métodos de divisor nativos (porque están rotos en algunas versiones). No olvides eliminar cualquier código donde establezcas divisores.

El truco es simplemente establecer un margen derecho muy pequeño en las vistas utilizadas para cada pestaña. De esta forma, habrá un pequeño espacio donde puedes ver el fondo (el TabHost). Para finalizar, configura el fondo en el TabHost para imitar el divisor alargado.

Aunque este truco no funciona para todos los diseños posibles que pueda desear, funciona bien para muchos casos como el que tuve.

Aquí está un ejemplo de implementación:

@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 

    // ... 
    //  inflate or create tabHost in code 
    //  call tabHost.setup 
    // ... 

    TabWidget tabWidget = tabHost.getTabWidget(); 
    tabWidget.setBackgroundResource(R.drawable.tab_divider); 

    // ... add tabs 

    for(int i = 0; tabWidget.getChildCount()-1; i++) { 
     View view = tabWidget.getChildAt(i); 
     LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) view.getLayoutParams(); 
     layoutParams.rightMargin = getResources().getDimensionPixelSize(R.dimen.tab_divider_width); //1dp 
     view.setLayoutParams(layoutParams); 
    } 
    return tabHost; 
} 

He aquí una muestra tab_divider dibujable:

<?xml version="1.0" encoding="utf-8"?> 
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
     <solid android:color="@color/divider_color" /> 
     <stroke android:width="@dimen/tab_divider_vertical_padding" 
       android:color="@color/tab_background_color"/> 
</shape> 

Answer 6

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

</style> 

aquí @null es para no proporcionar ninguna divisor y si desea personalizar su divisor que utilizar @ drawable/your_divider_image