ActionBar 选项卡删除填充和分隔符答案

【问题标题】：ActionBar tabs remove padding and dividerActionBar 选项卡删除填充和分隔符
【发布时间】：2015-01-08 07:02:51
【问题描述】：

在删除操作栏选项卡之间的分隔符和填充时，我面临着一个问题。我使用this 生成样式，以下是我的 values-14 条目，我在 4 以上的版本上进行测试

<style name="Theme.Example" parent="@style/Theme.Sherlock.Light.DarkActionBar">
    <item name="android:actionBarItemBackground">@drawable/selectable_background_example</item>
    <item name="android:popupMenuStyle">@style/PopupMenu.Example</item>
    <item name="android:dropDownListViewStyle">@style/DropDownListView.Example</item>

    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle.Example</item>
    <item name="android:actionDropDownStyle">@style/DropDownNav.Example</item>
    <item name="android:actionBarStyle">@style/ActionBar.Solid.Example</item>
    <item name="android:actionModeBackground">@drawable/cab_background_top_example</item>
    <item name="android:actionModeSplitBackground">@drawable/cab_background_bottom_example</item>
    <item name="android:actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Example</item>

    <!-- Light.DarkActionBar specific -->
    <item name="android:actionBarWidgetTheme">@style/Theme.Example.Widget</item>
</style>
 // It seems below code has no effect

<style name="ActionBarTabStyle.Example" parent="Widget.Sherlock.ActionBar.TabBar">
    <item name="android:showDividers">none</item>
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
    <item name="android:minWidth">0dp</item>
</style>

出于说明目的，这正是我想要的，即选项卡和操作栏之间没有线条，填充几乎为 0

【问题讨论】：

它看起来不错。您可以尝试将<item name="android:actionBarDivider">@null</item> 添加到您的主题中吗？
是的，但没有效果 :(
你错过了<item name="android:actionBarTabBarStyle">。请在下面查看我的详细答案。

标签： android tabs actionbarsherlock

【解决方案1】：

API 21 已弃用 ActionBar 选项卡。我建议您使用以下方法之一和工具栏。

1)PagerSlidingTabStrip

2)SlidingTabsBasic

正如您的屏幕截图所示，我认为这是使用工具栏和

之一实现的

PagerSlidingTabStrip 或 SlidingTabsBasic。例如，您可以查看Android PagerSlidingTabStrip (default Material Design) 的示例，了解如何实现您想要的。

【讨论】：

我不想要一个滑动的（固定标签）我也不打算瞄准现在有 0 个市场的 21 将来会考虑它，我想要的只是删除填充和线条
最后我使用了你的答案，稍作修改，但我仍在解决问题，如果没有更好的答案，我会接受你的答案

【解决方案2】：

按照下面的例子。

THEMES FOR THE ANDROID ACTIONBAR – TABS

ActionBar Style

styling-actionbartabs

可能对你有帮助

更新...

您可以更改标签分隔线颜色与标签背景颜色相同。所以这个效果就像你没有任何分隔符。

<item name="android:actionBarDivider">@color/background</item>

我希望它对你有用。

更新 - 2 这是关于如何根据我今天找到的旧代码自定义设计标签视图

在android清单中添加-

 android:theme="@style/MyTheme"

在 style.xml 中为 tabview 创建新样式

<style name="MyTheme" parent="android:Theme.Holo.Light">  
        <item name="android:actionBarTabStyle">@style/MyTheme.ActionBar.TabView</item>
    </style>    
<style name="MyTheme.ActionBar.TabView" parent="android:style/Widget.Holo.ActionBar.TabView">
        <item name="android:background">@drawable/new_tab_bar</item>
</style>

在 Drawable 中像这样创建新的标签栏

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- UNSELECTED TAB STATE -->
  <item android:state_selected="false" android:state_pressed="false">
      <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
       <item>
          <shape>
              <solid android:color="@color/transparent"/>
          </shape>
       </item>
        <!-- Bottom indicator color for the UNSELECTED tab state -->
        <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
             <shape android:shape="rectangle">
                 <stroke android:color="#65acee" android:width="0dp"/>
             </shape>
        </item>
      </layer-list>
  </item>
  <!-- SELECTED TAB STATE -->
  <item android:state_selected="true" android:state_pressed="false">
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
       <!-- Tab background color for the SELECTED tab state -->
       <item>
          <shape>
              <solid android:color="#0099CC"/>
          </shape>
       </item>
       <!-- Bottom indicator color for the SELECTED tab state -->
       <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
           <shape android:shape="rectangle">
               <stroke android:color="@color/tab_select_backgroung" android:width="0dp"/>
           </shape>
       </item>
    </layer-list>
  </item>
</selector>

将更改放入此 new_tab_bar 并在操作栏选项卡中获取您想要的更改。

【讨论】：

@danny117 感谢 sugeetion 查看更新，现在可以了

【解决方案3】：

我曾经像这样在我的项目中删除了操作栏的填充，see my answer here：

配置您的 AndroidManifest.xml 以使用自定义主题：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    <application
        ...
        android:theme="@style/AppTheme"
        ...
    >
    ...
    </application>
    ....
</manifest>

在res/values/styles.xml

中定义您的自定义主题

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Use a custom Application theme extending an existing AppCompat theme. -->
    <style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light">
    </style>

    <!-- customize parts of your theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- indicate that the actionBar uses a custom style and configure the link -->
        <item name="actionBarTabStyle">@style/TabBarStyle</item>
    </style>

    <!-- configure your real custom style for the tab bar-->
    <style name="TabBarStyle" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:paddingLeft">5dp</item>
        <item name="android:paddingRight">5dp</item>
        <item name="android:minWidth">10dp</item>
        <item name="android:maxWidth">15dp</item>
    </style>

</resources>

以下应放在res/values/styles-v11.xml和res/values/styles-v14.xml

<style name="AppTheme" parent="AppBaseTheme">
    <item name="actionBarTabStyle">@style/TabBarStyle</item>
</style>

<style name="TabBarStyle" parent="@style/Widget.AppCompat.ActionBar.TabView">
    <item name="android:paddingLeft">5dp</item>
    <item name="android:paddingRight">5dp</item>
    <item name="android:minWidth">10dp</item>
    <item name="android:maxWidth">15dp</item>
</style>

【讨论】：

【解决方案4】：

适用于 Android api 21 及更高版本

将app:tabPaddingStart="0dp" 和app:tabPaddingEnd="0dp" 添加到TabLayout。它对我有用。

<android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" app:tabPaddingStart="0dp" app:tabPaddingEnd="0dp" app:tabIndicatorColor="#FF0000" app:tabMode="fixed" />

并将xmlns:app="http://schemas.android.com/apk/res-auto" 添加到父布局

【讨论】：

【解决方案5】：

听起来您想使用“静态选项卡”，而不是 ActionBar 下方较新的“滑动选项卡”。从上面的原始样式“Theme.Example”代码中，我认为它缺少一个处理 ActionBar Tab Divider 的项目：actionBarTabBarStyle。请看下文，希望对您有所帮助。

<style name="Theme.Example" parent="@style/Theme.Sherlock.Light.DarkActionBar">
    ...
    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle.Example</item>
    <item name="android:actionBarStyle">@style/ActionBar.Solid.Example</item>
    ...
    <!-- SOLUTION-2: Add this item HERE! -->
    <item name="android:actionBarTabBarStyle">@style/ActionBarTabBarStyle.Example</item>
</style>

<style name="ActionBarTabStyle.Example" parent="Widget.Sherlock.ActionBar.TabBar">
    <!-- SOLUTION-0: ActionBar Navigation Tabs. 
         Original code. It has NO effect on the 'divider' style -->
    <item name="android:showDividers">none</item>
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
    <item name="android:minWidth">0dp</item>

    <!-- SOLUTION-1: Add drawable background HERE!. The item element below 
         is the styling for the 'Tab', which in the form of drawable 
         styling, you could code in such a way it would overwrite the 
         default 'divider' style as described by @lokesh answer -->
    <item name="android:background">@drawable/new_tab_bar</item>
</style>

<style name="ActionBarTabBarStyle.Example" parent="android:style/Widget.ActionBar.TabBar">
    <!-- SOLUTION-2: ALTERNATIVELY, This is for Actionbar Navigation 
         Tabs 'DIVIDER' Style. Now you can try to disable/hide them. -->
    <item name="android:showDividers">none</item>
    <item name="android:divider">@null</item>
    <item name="android:dividerPadding">0dp</item>
</style>

【讨论】：