Android 下的 Actionbar 自定义风格

最新推荐文章于 2021-05-25 17:39:24 发布

BGCONEC

最新推荐文章于 2021-05-25 17:39:24 发布

阅读量748

点赞数

分类专栏： Android 文章标签： android layout ui actionbar actionbartab

本文链接：https://blog.csdn.net/coming_chen/article/details/27638985

版权

Android 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

由于要在Android下做导航的效果 ActionBar 就成了学习的对象，在用ActionBar时遇到的一点问题，记录一下（这里只考虑4.0以上的系统，即14以上）

想要做的效果：

如上所展示，第一行是ActionBar，第二行是3个ActionBar Tab

ActionBar 和 ActionBarTab 的自定义风格步骤：

0.文件目录概览

1.首先是 res/values/styles.xml 文件

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        
    </style>
    
    <style name="AppBaseTheme" parent="@android:style/Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/FMPActionBarStyle</item>
    	<item name="android:actionBarTabStyle">@style/FMPActionBarTabStyle</item>
    	<item name="android:actionBarTabBarStyle">@style/FMPActionBarTabBarStyle</item>
    </style>
    
    <!-- ActionBar styles -->
    <style name="FMPActionBarStyle"
        parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@color/actionbar_background</item>
    </style>
    
    <!-- ActionBar Tab styles -->
    <style name="FMPActionBarTabStyle"
        parent="@android:style/Widget.Holo.ActionBar.TabView"
        >
        <item name="android:background">@drawable/actionbar_tab_indicator</item>
    </style>
    
    <!-- ActionBar Tab Bar styles -->
    <style name="FMPActionBarTabBarStyle"
        parent="@android:style/Widget.Holo.ActionBar.TabBar"
        >
        <item name="android:showDividers">none</item>
    </style>

</resources>

2.res/drawable/actionbar_tab_indicator.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- STATES WHEN BUTTON IS NOT PRESSED -->

    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false"
          android:state_pressed="false"
          android:drawable="@drawable/tab_unselected" />
    <item android:state_focused="false" android:state_selected="true"
          android:state_pressed="false"
          android:drawable="@drawable/tab_selected" />

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <item android:state_focused="true" android:state_selected="false"
          android:state_pressed="false"
          android:drawable="@drawable/tab_unselected_focused" />
    <item android:state_focused="true" android:state_selected="true"
          android:state_pressed="false"
          android:drawable="@drawable/tab_selected_focused" />


<!-- STATES WHEN BUTTON IS PRESSED -->

    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false"
          android:state_pressed="true"
          android:drawable="@drawable/tab_unselected_pressed" />
    <item android:state_focused="false" android:state_selected="true"
        android:state_pressed="true"
        android:drawable="@drawable/tab_selected_pressed" />

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <item android:state_focused="true" android:state_selected="false"
          android:state_pressed="true"
          android:drawable="@drawable/tab_unselected_pressed" />
    <item android:state_focused="true" android:state_selected="true"
          android:state_pressed="true"
          android:drawable="@drawable/tab_selected_pressed" />
</selector>

3.@drawable/tab_unselected 类的文件，这里展示 /drawable/tab_unselected.xml 的代码

<?xml version="1.0" encoding="utf-8"?>
<color xmlns:android="http://schemas.android.com/apk/res/android" 
    android:color="@color/actionbar_tab_unselected_unpressed">
</color>

这个文件的编写涉及 drawable 资源的知识，可参考官方文档 http://developer.android.com/intl/zh-cn/guide/topics/resources/drawable-resource.html

或中文博客 http://blog.csdn.net/lonelyroamer/article/category/1221987 里关于drawable 的知识博客

4.colors.xml 文件的编码

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="actionbar_background">#f00</color>
    <color name="actionbar_tab_unselected_unpressed">#303030</color>
    <color name="actionbar_tab_unselected_pressed">#404040</color>
    <color name="actionbar_tab_selected_unpressed">#404040</color>
    <color name="actionbar_tab_selected_pressed">#505050</color>
</resources>

5.当然，还要在 Manifest 里面添加 android:theme 指向你的主题，即 1 定义的 AppTheme

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity>
            <!-- ... -->
        </activity>
    </application>