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

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源代码。

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

Answer 6

基于ATom's answer，这里有一种在所有Android版本中都有类似分隔符的方法。

为了使其工作，您不使用任何本机分隔符方法（因为它们在某些版本中被破坏）。不要忘记删除任何设置分隔符的代码。

诀窍就是在每个标签使用的视图中设置一个非常小的右边距。通过这种方式，您可以看到背景（TabHost）。要完成此操作，请在TabHost上设置背景以模拟拉伸的分隔符。

虽然这个技巧不适用于你可能想要的所有可能设计，但它适用于许多情况，例如我的设计。

以下是一个示例实现：

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

这是一个示例tab_divider drawable：

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