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

时间:2015-01-08 07:02:51

标签: android tabs actionbarsherlock

在操作栏标签之间删除分隔符和填充时遇到问题。我使用this生成了样式,以下是我的值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填充 enter image description here

5 个答案:

答案 0 :(得分:5)

从api 21弃用了ActionBar选项卡。我建议您使用以下方法之一使用工具栏。

1)PagerSlidingTabStrip

2)SlidingTabsBasic

如截图所示,我认为这是使用工具栏和

之一实现的

PagerSlidingTabStripSlidingTabsBasic。例如,您可以看到Android PagerSlidingTabStrip (default Material Design)的示例,以了解如何准确实现您想要的内容。

答案 1 :(得分:5)

按照以下示例。

THEMES FOR THE ANDROID ACTIONBAR – TABS

ActionBar Style

styling-actionbartabs

可能对您有所帮助

<强>更新...

您可以更改与标签bg颜色相同的标签分隔线颜色。所以这种效果就像你没有任何分隔。

<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中添加更改,并在操作栏标签中获取您想要的更改。

答案 2 :(得分:1)

我这样删除了项目中Action栏的填充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 .xmlres/values/ styles-v14 { {1}}

.xml

答案 3 :(得分:0)

对于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"添加到父版面

答案 4 :(得分:0)

听起来好像你想使用静态标签&#39;而不是更新的滑动标签&#39;在ActionBar下面。从您原来的风格&#39; Theme.Example&#39;上面的代码,我认为它缺少一个处理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>