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

我将以下样式与一组九个补丁图像一起使用，以在一些冰淇淋三明治选项卡的底部创build一条红线，而不是标准的蓝线：

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

显示红线，除了选项卡之间的分隔符外，每个选项都很好看。 正如您在图像中的绿色框内可以看到的那样，线条不在分隔线的下方。 我如何select一个可绘制的，或这个分隔线的风格？

android:divider和android:showDividers项不负责标签之间的分隔。 他们只select在标签图标和标签标题之间绘制的分隔线。 我隐藏了这些分频器，因为没有标题，分频器看起来很奇怪。

---

更新从Aneal的回答中，我添加了第二个样式customTabBar。 样式select一个drawable作为分隔符。 分隔线是用以下9patch可绘制创build的纯黑线：

有了这个可绘制的分隔线，但它旁边还有一个空行：

Answer 1

删除我使用的每个样式后，我得到了以下图像：

这张图片也包含了很小的差距。 因此，这似乎是某种默认行为。

不过，我find了解决这个问题的方法。 我将红线设置为整个标签栏的标准背景。 这样就出现了间隙，但没有人能看到它，因为显示了已经包含该行的背景。

我现在对我所有的活动使用以下风格：

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

此样式用于设置Tabbar中的每个单个选项卡：

 <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

顺便说一句。 这是由于在LinerLayout类的android：divider属性实现ICS中的巨大bug。 它被引入Honeycomb中，在ICS中断开，再次在Jelly Bean中工作。

问题是，当你使用android：divider时，它会在它的子分隔符之间做一个小的空格，但是把分隔符号放到这个空格中，但是在它之后，所以它会被tab自身重叠，并且空格将保持为空。 非常愚蠢的错误。 尝试比较版本4.0和4.1的LinerLayout源代码。

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

Answer 6

基于ATOM的回答 ，这里有一种方法在所有的Android版本中都有类似的分隔符 。

为了使这个工作，你不使用任何本地divider方法（因为它们在某些版本中被打破）。 不要忘记在设置分频器的地方删除任何代码。

诀窍就是在每个选项卡的视图中设置一个非常小的右边距。 这样，就会有一个小小的差距，你可以看到背景（TabHost）。 要完成此操作，请在TabHost上将背景设置为模仿拉伸分隔线。

虽然这个窍门并不适用于你可能想要的所有可能的devise，但是对于像我这样的很多情况来说，这种方法很有效。

以下是一个示例实现：

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