如何设计冰淇淋三明治标签之间的分隔线？

Question

我正在使用以下样式和一组九个补丁图像在一些Ice Cream Sandwich选项卡的底部创建一条红线,而不是标准的蓝线:

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

显示红线,除了标签之间的分隔线外,每条线看起来都很好.正如您在图像中的绿色框内看到的那样,线条未在分隔线下方绘制.如何为此分隔符选择可绘制或样式？

在android:divider和android:showDividers物品不负责标签之间的分隔符.它们仅选择在选项卡图标和选项卡标题之间绘制的分隔符.我隐藏了那些分隔线因为没有标题而分隔线看起来很奇怪.

---

更新在Aneal的回答中,我添加了第二个样式customTabBar.样式选择drawable作为分隔符.分隔线是使用以下9patch drawable创建的纯黑线:

使用此drawable绘制分隔符,但旁边还有一个空行:

Answer 1

删除我使用的每个样式后,我得到以下图像:

该图像还包含小间隙.因此,这似乎是某种默认行为.

但是我找到了一种解决问题的方法.我将红线设置为整个标签栏的标准背景.这样就出现了间隙,但是没有人能够看到它,因为已经显示已经包含该线的背景.

我现在使用以下样式进行所有活动:

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

此样式用于设置标签栏中每个标签的样式:

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

要设置整个Tabbar的样式,我使用以下样式:

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

此样式定义我的自定义分隔符,并定义标签栏的背景.作为背景,我直接设置了如果未选择选项卡而绘制的九个补丁绘图.所有这一切的结果是一个带有红色下划线的tabbar,没有任何间隙.

Answer 2

干得好.

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

这里@null是不提供任何分隔符,如果你想自定义你的分隔符而不是使用@ drawable/your_divider_image

Answer 4

如果你想摆脱分隔线,你可以这样做:

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

Answer 5

顺便说一句.这是由于ICS在LinerLayout类中实现android:divider属性的巨大错误造成的.它是在Honeycomb中引入的,在ICS中被打破并再次在Jelly Bean中工作.

问题是,当你使用android:divider时,它会在它之间创建一个小空间用于放置分隔符,但是将divider no放入此空间,但在它之后,它将被标签本身重叠,空间将保持为空.非常愚蠢的错误.尝试比较版本4.0和4.1的LinerLayout源代码.

是的解决方案是将分隔符放在所有选项卡的背景中,它只会在由此错误引起的选项卡之间的间隙中可见.