(一)开始____2、添加操作栏-Adding the Action Bar——设计操作栏-Styling the Action Bar

目录

 [隐藏

设计操作栏

操作栏给用户提供了一个熟悉可预测的方式来进行操作并浏览应用程序,但是这并不意味着需要它和其他应用程序里的一一模一样。如果你想要设计操作栏使其更适合产品品牌,可以用安卓风格和主题资源来轻松办到。
安卓包括一些内置活动主题,比如暗或亮的操作栏样式。你还可以扩展这些主题以进一步自定义操作栏的外观。

使用Android主题

安卓包括两个决定操作栏颜色的基线活动主题:

  • Theme.Holo适用于暗色主题
  • Theme.Holo.Light适用于淡色主题

actionbar-theme-dark@2x.png

actionbar-theme-light-solid@2x.png

在清单文件中声明android:theme属性可以把这些主题在整个应用程序或者单独活动中应用。例如:
<application android:theme="@android:style/Theme.Holo.Light" ... />

当活动剩余部分通过声明 Theme.Holo.Light.DarkActionBar 主题来使用淡色主题时,你也可以使用暗色操作栏。 使用支持库时,你必须改用Theme.AppCompat 主题:

  • Theme.AppCompat适用于“黑暗”的主题。
  • Theme.AppCompat.Light适用于“淡色”的主题。
  • Theme.AppCompat.Light.DarkActionBar适用于有暗色操作栏的淡色主题。

actionbar-theme-light-darkactionbar@2x.png

请确保使用的操作栏图标已经与操作栏颜色正确匹配。为了帮助你更好使用,操作栏图标包包括了能同时用于全息亮和全息暗的标准操作图标。

自定义背景

为了改变操作栏的背景,为活动创建了覆盖actionBarStyle属性的自定义主题。该属性指向另一个风格,你可以重写background属性来为操作栏背景指定可绘制资源。
如果应用程序使用 navigation tabs或者 split action bar,那你可以用 backgroundStacked 和backgroundSplit 性质为这些栏指定背景。

actionbar-theme-custom@2x.png

Android3.0及更高版本

当仅支持Android3.0及更高版本时,你可以这样定义操作栏的背景:

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>
 
    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/actionbar_background</item>
    </style>
</resources>

把主题应用于整个应用程序或者单独活动:

<application android:theme="@style/CustomActionBarTheme" ... />

Android2.1及更高版本

使用支持库时,上方相同的主题必须替换为这样:

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
 
        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>
 
    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/actionbar_background</item>
 
        <!-- Support library compatibility -->
        <item name="background">@drawable/actionbar_background</item>
    </style>
</resources>
接着把主题应用于整个应用程序或者单独活动:
<application android:theme="@style/CustomActionBarTheme" ... />

自定义文字颜色

要修改操作栏中文本的颜色,你需要为各文本元素覆盖不同的属性:

  • 操作栏标题:创建一个自定义样式用来指定 textColor 属性,并且指定自定义tactionBarStyle中titleTextStyle属性的样式。
  • 操作栏选项卡:在您的活动主题覆盖actionBarTabTextStyle。
  • 动作按钮:在您的活动主题覆盖actionMenuTextColor。

仅为Android3.0及更高版本

当仅支持安卓3.0及以上版本时,XML文件是这样的:

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.Holo">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
        <item name="android:actionMenuTextColor">@color/actionbar_text</item>
    </style>
 
    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.Holo.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    </style>
 
    <!-- ActionBar title text -->
    <style name="MyActionBarTitleText"
           parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>
 
    <!-- ActionBar tabs text styles -->
    <style name="MyActionBarTabText"
           parent="@style/Widget.Holo.ActionBar.TabText">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>
</resources>

Android2.1及以上

使用支持库时,XML文件是这样的:

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.AppCompat">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
        <item name="android:actionMenuTextColor">@color/actionbar_text</item>
 
        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
        <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
        <item name="actionMenuTextColor">@color/actionbar_text</item>
    </style>
 
    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
 
        <!-- Support library compatibility -->
        <item name="titleTextStyle">@style/MyActionBarTitleText</item>
    </style>
 
    <!-- ActionBar title text -->
    <style name="MyActionBarTitleText"
           parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_text</item>
        <!-- The textColor property is backward compatible with the Support Library -->
    </style>
 
    <!-- ActionBar tabs text -->
    <style name="MyActionBarTabText"
           parent="@style/Widget.AppCompat.ActionBar.TabText">
        <item name="android:textColor">@color/actionbar_text</item>
        <!-- The textColor property is backward compatible with the Support Library -->
    </style>
</resources>

自定义选项卡指示器

为了更改用于导航选项卡的指示器,创建一个覆盖actionBarTabStyle属性的活动主题。

actionbar-theme-custom-tabs@2x.png

例如这里展示了一个状态列表,可以为操作栏选项卡几种不同状态绘制特定的背景图像:

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>

Android3.0及更高版本

当支持Android3.0及更高版本时,XML文件是这么的:

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.Holo">
        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>
 
    <!-- ActionBar tabs styles -->
    <style name="MyActionBarTabs"
           parent="@style/Widget.Holo.ActionBar.TabView">
        <!-- tab indicator -->
        <item name="android:background">@drawable/actionbar_tab_indicator</item>
    </style>
</resources>
 

Android2.1及更高版本

当使用支持库时,XML文件是这样的:

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.AppCompat">
        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
 
        <!-- Support library compatibility -->
        <item name="actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>
 
    <!-- ActionBar tabs styles -->
    <style name="MyActionBarTabs"
           parent="@style/Widget.AppCompat.ActionBar.TabView">
        <!-- tab indicator -->
        <item name="android:background">@drawable/actionbar_tab_indicator</item>
 
        <!-- Support library compatibility -->
        <item name="background">@drawable/actionbar_tab_indicator</item>
    </style>
</resources>
 

更多资源:

  • 查看更多操作栏样式属性,请您查阅操作栏指南。
  • 了解更多主题的工作方式,请您查阅主题和风格指南。
  • 想要了解操作栏更完整的设计,请您尝试安卓操作栏设计生成。
posted @ 2014-07-28 16:11  ╰→劉じ尛鶴  阅读(121)  评论(0)    收藏  举报