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

Question

我使用以下样式和一组九个补丁图像在一些冰淇淋三明治标签的底部创建一条红线，而不是标准的蓝线：

<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。该样式选择一个可绘制对象作为分隔线。分隔线是一条黑色实线，使用以下 9patch 可绘制对象创建：

有了这个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>

这种风格定义了我的自定义分隔线，也定义了标签栏的背景。作为背景，我直接设置了如果未选择选项卡则绘制的九个补丁可绘制对象。所有这一切的结果是一个带有红色下划线的标签栏，没有任何间隙。

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

顺便提一句。这是由 android:divider 属性的 LinerLayout 类实现中的 ICS 中的巨大错误引起的。它是在 Honeycomb 中引入的，在 ICS 中被破坏并在 Jelly Bean 中再次起作用。

问题是，当您使用 android:divider 时，它会在它的子元素之间留出很小的空间来放置分隔符，但是没有将分隔符放置在这个空间中，而是在它之后，所以它会被选项卡本身重叠并且空间将保持为空。非常愚蠢的错误。尝试比较 4.0 版和 4.1 版的 LinerLayout 源代码。

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

Answer 6

根据ATom 的回答，这是一种在所有 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可绘制的示例：

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