puede - ice cream sandwich android

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

Question

Estoy usando el siguiente estilo junto con un conjunto de nueve imágenes de parches para crear una línea roja en la parte inferior de algunas pestañas de Ice Cream Sandwich 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 dibujo o un estilo para este divisor?

Los elementos de 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. Oculto esos divisores porque no hay un título y un divisor se vería extraño.

Actualización Con la respuesta de Aneal en mente, agregué un segundo estilo customTabBar. El estilo selecciona un dibujo como un divisor. El divisor es una línea negra sólida creada con el siguiente dibujo de 9 parcelas:

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

Answer 1

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

Basado en la respuesta de ATom , aquí hay una manera de tener algo parecido a divisores en todas las versiones de Android.

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

El truco es simplemente establecer un margen derecho muy pequeño en las vistas utilizadas para cada pestaña. De esta manera, habrá un pequeño espacio donde se puede ver el fondo (el TabHost). Para terminar esto, establece el fondo en el TabHost para imitar el divisor estirado.

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

Aquí hay una implementación de ejemplo:

@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;
}

Aquí hay un ejemplo de tab_divider :

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

Después de eliminar todos los estilos que utilizo obtuve la siguiente imagen:

Esta imagen también contiene los pequeños huecos. Por lo tanto, parece que este es un tipo de comportamiento por defecto.

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

Ahora uso 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 para diseñar cada pestaña individual 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>

Para estilizar 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 fondo para la barra de pestañas. Como fondo, configuro directamente los nueve parches dibujables que se dibujan si no se selecciona una pestaña. El resultado de todo esto es una barra de pestañas con un subrayado rojo sin ningún espacio en blanco.

Answer 4

Por cierto Esto se debe a un error enorme en el ICS en la implementación de la clase LinerLayout del atributo android: divider. Se introdujo en Honeycomb, se rompió en ICS y volvió a funcionar en Jelly Bean.

El problema es que cuando usa android: divider, crea un espacio pequeño entre su hijo para el lugar divisor, pero coloque el separador no en este espacio, pero luego, se solapará con la pestaña y el espacio quedará vacío. Error muy estúpido. Intente comparar el código fuente de LinerLayout para las versiones 4.0 y 4.1.

Y sí, la solución es poner el delimitador en el fondo de todas las pestañas y solo será visible en los espacios entre pestañas causados ​​por este error.

Answer 5

Si desea deshacerse de los divisores, podría hacer esto:

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

Answer 6

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

</style>

Aquí @null es para no proporcionar ningún divisor y si desea personalizar su divisor, use @ drawable / your_divider_image