ActionBar Tabs改头换面

先看效果

修改前

修改后

修改前

第一眼看上去上面的导航不像个ActionBar的Tabs,但是这个的确是用ActionBar实现的

看下具体的实现,实现方式主要是覆盖ActionBar的原有style,下面是需要覆盖的样式

1
2
3
4
5
6
7
 <style name="AppTheme" parent="AppBaseTheme">
     <item name="android:windowContentOverlay">@null</item>
     <item name="android:actionBarStyle">@style/MyActionBar</item>
     <item name="android:actionBarTabBarStyle">@style/MyActionBarTabBarStyle</item>
     <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
     <item name="android:actionBarTabTextStyle">@style/Widget.Holo.ActionBar.TabText</item>
 </style>

首先来设置ActionBar的背景

1
2
3
4
5
6
7
<style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:windowActionBarOverlay">true</item>
         <item name="android:height">80px</item>
        <item name="android:background">@drawable/actionbar_bg</item>
        <item name="android:backgroundStacked">@drawable/actionbar_bg</item>
        <item name="android:backgroundSplit">@drawable/actionbar_bg</item>
    </style>

其次来去掉ActionBar下面的阴影,使得整体页面的背景可以和ActionBar进行拼接

1
<item name="android:windowContentOverlay">@null</item>

接下来去掉Tabs直线的分隔竖线

1
2
3
4
5
6
<style name="MyActionBarTabBarStyle" parent="@android:style/Widget.Holo.ActionBar.TabBar">
       <item name="android:divider">?android:attr/actionBarDivider</item>
       <item name="android:showDividers">none</item>
       <item name="android:paddingLeft">80px</item>
       <item name="android:dividerPadding">24dip</item>
   </style>

接下来修改Tabs选中后下面的横条

1
2
3
4
5
6
<style name="MyActionBarTabStyle" parent="@android:style/Widget.Holo.ActionBar.TabView">
        <item name="android:paddingTop">35px</item>
        <item name="android:background">@drawable/antionbar_tab</item>
        <item name="android:paddingStart">16dip</item>
        <item name="android:paddingEnd">16dip</item>
    </style>

最后调整Tabs上文字颜色和大小

1
2
3
4
5
6
7
8
<style name="Widget.Holo.ActionBar.TabText" parent="@android:style/Widget.ActionBar.TabText">
      <item name="android:textColor">@android:color/white</item>
      <item name="android:textSize">24px</item>
      <item name="android:textStyle">bold</item>
      <item name="android:textAllCaps">true</item>
      <item name="android:ellipsize">marquee</item>
      <item name="android:maxLines">1</item>
  </style>

评论

Copyright © 2021 pangff 京ICP备14050056号-1 Design credit: Shashank Mehta