Android ActionBar

ActionBar

1建立ActionBar

Action bar 最基本的形式,就是为 Activity 显示标题,它告知用户他们当前所处的位置,并为你的 app 维护了持续的同一标识。

actionbar-basic

从 Android 3.0(API lever 11) 开始,所有使用 Theme.Holo 主题(或者它的子类)的 Activity 都包含了 action bar,当 targetSdkVersionminSdkVersion 属性被设置成 “11” 或更大时,它是默认主题。

2添加ActionBar按钮

Action bar 允许我们为当前环境下最重要的操作添加按钮。那些直接出现在 action bar 中的 icon 和/或文本被称作action buttons(操作按钮)。安排不下的或不足够重要的操作被隐藏在 action overflow
在这里插入图片描述

在 XML 中指定操作

所有的操作按钮和 action overflow 中其他可用的条目都被定义在 menu资源 的 XML 文件中。通过在项目的 res/menu 目录中新增一个 XML 文件来为 action bar 添加操作。

为想要添加到 action bar 中的每个条目添加一个 元素。例如:

res/menu/main_activity_actions.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 搜索, 应该作为动作按钮展示-->
    <item android:id="@+id/action_search"
          android:icon="@drawable/ic_action_search"
          android:title="@string/action_search"
          android:showAsAction="ifRoom" />
    <!-- 设置, 在溢出菜单中展示 -->
    <item android:id="@+id/action_settings"
          android:title="@string/action_settings"
          android:showAsAction="never" />
</menu>

为操作按钮添加响应事件

当用户按下某一个操作按钮或者 action overflow 中的其他条目,系统将调用 activity 中onOptionsItemSelected()的回调方法。在该方法的实现里面调用MenuItemgetItemId()来判断哪个条目被按下 - 返回的 ID 会匹配我们声明对应的 元素中 android:id 属性的值。

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // 处理动作按钮的点击事件
    switch (item.getItemId()) {
        case R.id.action_search:
            openSearch();
            return true;
        case R.id.action_settings:
            openSettings();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

为下级 Activity 添加向上按钮

在不是程序入口的其他所有屏中(activity 不位于主屏时),需要在 action bar 中为用户提供一个导航到逻辑父屏的up button(向上按钮)

actionbar-up.png

图 2. Gmail 中的 up button。

当运行在 Android 4.1(API level 16) 或更高版本,或者使用 Support 库中的 ActionBarActivity 时,实现向上导航需要在 manifest 文件中声明父 activity ,同时在 action bar 中设置向上按钮可用。

如何在 manifest 中声明一个 activity 的父类,例如:

<application ... >
    ...
    <!-- 主 main/home 活动 (没有上级活动) -->
    <activity
        android:name="com.example.myfirstapp.MainActivity" ...>
        ...
    </activity>
    <!-- 主活动的一个子活动-->
    <activity
        android:name="com.example.myfirstapp.DisplayMessageActivity"
        android:label="@string/title_activity_display_message"
        android:parentActivityName="com.example.myfirstapp.MainActivity" >
        <!--  meta-data 用于支持 support 4.0 以及以下来指明上级活动 -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.example.myfirstapp.MainActivity" />
    </activity>
</application>

然后,通过调用setDisplayHomeAsUpEnabled() 来把 app icon 设置成可用的向上按钮:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_displaymessage);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    // 如果你的minSdkVersion属性是11活更高, 应该这么用:
    // getActionBar().setDisplayHomeAsUpEnabled(true);
}

由于系统已经知道 MainActivityDisplayMessageActivity 的父 activity,当用户按下向上按钮时,系统会导航到恰当的父 activity - 你不需要去处理向上按钮的事件。

3自定义ActionBar的风格

Action bar 为用户提供一种熟悉可预测的方式来展示操作和导航,但是这并不意味着我们的 app 要看起来和其他 app 一样。如果想将 action bar 的风格设计的合乎我们产品的定位,只需简单地使用 Android 的 样式和主题 资源。

使用一个 Android 主题

Android 包含两个基本的 activity 主题,这两个主题决定了 action bar 的颜色:

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

这些主题即可以被应用到 app 全局,也可以通过在 manifest 文件中设置 application 元素 或 activity 元素的 android:theme 属性,对单一的 activity 进行设置。

例如:

<application android:theme="@android:style/Theme.Holo.Light" ... />

可以通过声明 activity 的主题为 Theme.Holo.Light.DarkActionBar 来达到如下效果:action bar 为dark,其他部分为light。

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

自定义背景

为改变 action bar的背景,可以通过为 activity 创建一个自定义主题,并重写 actionBarStyle 属性来实现。actionBarStyle 属性指向另一个样式;在该样式里,通过指定一个 drawable 资源来重写 background 属性。

actionbar-theme-custom@2x.png

如果我们的 app 使用了 navigation tabssplit action bar ,也可以通过分别设置 backgroundStackedbackgroundSplit 属性来为这些条指定背景。

Note:为自定义主题和样式声明一个合适的父主题,这点很重要。如果没有父样式,action bar将会失去很多默认的样式属性,除非我们自己显式的对他们进行声明。

当仅支持 Android 3.0 和更高版本时,可以通过如下方式定义 action bar 的背景:

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 应用于程序或者活动的主题 -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>

    <!-- ActionBar 样式 -->
    <style name="MyActionBar"
           parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/actionbar_background</item>
    </style>
</resources>

然后,将主题应用到 app 全局或单个的 activity 之中:

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

自定义文本颜色

修改 action bar 中的文本颜色,需要分别设置每个元素的属性:

  • Action bar 的标题:创建一种自定义样式,并指定 textColor 属性;同时,在自定义的 actionBarStyle 中为 titleTextStyle 属性指定为刚才的自定义样式。

注意:被应用到 titleTextStyle 的自定义样式应该使用 TextAppearance.Holo.Widget.ActionBar.Title 作为父样式。

当仅支持 Android 3.0 和更高时,样式 XML 文件应该是这样的:

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 应用于程序或者活动的主题 -->
    <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 样式 -->
    <style name="MyActionBar"
           parent="@style/Widget.Holo.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    </style>

    <!-- ActionBar 标题文本 -->
    <style name="MyActionBarTitleText"
           parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>

    <!-- ActionBar Tab标签 文本样式 -->
    <style name="MyActionBarTabText"
           parent="@style/Widget.Holo.ActionBar.TabText">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>
</resources>

4ActionBar的覆盖叠加

默认情况下,action bar 显示在 activity 窗口的顶部,会稍微地减少其他布局的有效空间。如果在用户交互过程中要隐藏和显示 action bar,可以通过调用 ActionBar 中的 hide()show()来实现。但是,这将导致 activity 基于新尺寸重新计算与绘制布局。

为避免在 action bar 隐藏和显示过程中调整布局的大小,可以为 action bar 启用叠加模式(overlay mode)。在叠加模式下,所有可用的空间都会被用来布局就像ActionBar不存在一样,并且 action bar 会叠加在布局之上。这样布局顶部就会有点被遮挡,但当 action bar 隐藏或显示时,系统不再需要调整布局而是无缝过渡。

actionbar-overlay@2x

图 1. 叠加模式下的 gallery action bar

启用叠加模式(Overlay Mode)

要为 action bar 启用叠加模式,需要自定义一个主题,该主题继承于已经存在的 action bar 主题,并设置 android:windowActionBarOverlay 属性的值为 true

如果 minSdkVersion11 或更高,自定义主题必须继承 Theme.Holo 主题(或者其子主题)。例如:

<resources>
    <!-- 为程序或者活动应用的主题样式 -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.Holo">
        <item name="android:windowActionBarOverlay">true</item>
    </style>
</resources>

注意,该主题包含两种不同的 windowActionBarOverlay 式样定义:一个带 android: 前缀,另一个不带。带前缀的适用于包含该式样的 Android 系统版本,不带前缀的适用于通过从 Support 库中读取式样的旧版本。

指定布局的顶部边距

当 action bar 启用叠加模式时,它可能会遮挡住本应保持可见状态的布局。为了确保这些布局始终位于 action bar 下部,可以使用 actionBarSize 属性来指定顶部margin或padding的高度来到达。例如:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?android:attr/actionBarSize">
    ...
</RelativeLayout>

如果在 action bar 中使用 Support 库,需要移除 android: 前缀。例如:

<!-- 兼容支持库 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">
    ...
</RelativeLayout>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值