xhmj12

浏览: 125365 次
性别:
来自: 北京

最近访客更多访客>>

why981229

yangmaolinpl

明月昏灯

lookwangcheng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Getting_Started-----Adding The Action Bar

博客分类：

Training

Action Bar 是在你的app的activity里最重要的的设计元素之一。提供了用户界面特性，主要功能包括：

* 提供一个专用空间来标识应用商标和用户位置

* 为用户常用的操作和行为提供便捷访问点（如搜索）

* 支持导航和视图切换（使用tab或者下拉列表）

如图：

你也应该看：

Action Bar

Implementing Effective Navigation

本文只是讲诉了Action Bar最基本的实现。更多详细信息请参阅Action Bar

大纲：

1.Setting Up the Action Bar

怎么样加你的activity里加一个简单的action bar。不管你的app支持的版本是3.0或者更高，还是低于2.1的版本，都可以通过Android Support Library实现。

2.Adding Action Buttons

怎么在Action　Bar里添加用户行为，以及相应用户行为。

3.Styling the Action Bar

怎么定制你的Action Bar的样式和外观。

4.Overlaying the Action Bar

学习怎么叠加你的action bar到你的布局上，及如何让action bar在隐藏和显示之间无缝切换

Setting Up the Action Bar

Action Bar最基本的形式是在左边展示activity的标题和app图标。即使action bar如此简单的使用，它也告诉了用户你是在哪个activity，并且在你的应用里展示统一的标识。如图：

Figure 1. An action bar with the app icon and activity title.

产生一个基本action bar要求有能支持action bar的activity theme. 怎么样获取如此一个theme，取决于你的android sdk 版本。

Support Android 3.0 and Above Only

从android3.0（API 11）开始，action bar使用Theme.Holo(或者它的子类)加到所有的activity里。当设置 “targetSdkVersion” 或者 “minSdkVersion” ，属性的值为“11”或者更高，Theme.Holo是这默认的theme。

因此，为了加action bar到你的activity里，简单的设置sdk版本等于或者高于11.例如：

       <manifest ... >
            <uses-sdk android:minSdkVersion="11" ... />
            ...
      </manifest>

注：如果你用自定义theme，确保你自定义theme使用Theme.Holo的theme之一作为她的父theme。更多详情，see Styling the Action Bar。

Support Android 2.1 and Above

在sdk3.0之下(下至android 2.1)添加action bar时，需要你导入android Support Library包。

参阅Support Library Setup文档，然后导入v7 appcompat库（如果你已下载了库包，遵循Adding libraries with resources指导安装）

如果你已集成了Support Library到你的工程里：

1、更新你的activity让其继承ActionBarActivity，例如：

 public class MainActivity extends ActionBarActivity { ... }

2.在你的Manifest.xml里更新<application>标签的Theme使用Theme.AppCompat主题之一。或者在具体的activity上指定Theme;

<activity android:theme="@style/Theme.AppCompat.Light" ... >

注：如果你使用自定义Theme，确保使用Theme.AppCompat主题之一作为你的自定义主题的父Theme.更多详情，see Styling the Action Bar。

现在，当你运行在android2.1及以上的api时，你的activity就拥有了action bar。

记住在Manifest.xml里合理的设置你的API level支持：

     <manifest ... >
              <uses-sdk android:minSdkVersion="7"           
                   android: targetSdkVersion="18" />
              ...
        </manifest>

Adding Action Buttons

action bar能添加与你的应用的当前上下文相关的重要的用户功能入口的按钮，这些直接显示在action bar上的icon或者文本被称为action buttons。不适合放在action bar或者不太重要的行为和功能放在action overflow里，见下图：

Figure 1. An action bar with an action button for Search and the action overflow, which reveals additional actions.

Specify the Actions in XML

所有的action button 和在action overflow里的action被定义在XMl menu resources里。为了加action到action bar，在你的工程的res/menu/目录里产生一个新的XML文件。

给每一个你想要include到action bar里的action item添加<item>元素。例如：

res/menu/main_activity_actions.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- Search, should appear as action button -->
    <item android:id="@+id/action_search"
          android:icon="@drawable/ic_action_search"
          android:title="@string/action_search"
          android:showAsAction="ifRoom" />
    <!-- Settings, should always be in the overflow -->
    <item android:id="@+id/action_settings"
          android:title="@string/action_settings"
          android:showAsAction="never" />
</menu>

该声明表示Search action在当空间是有效时应该作为一个action button出现，但是Settings action应该总是出现在overflow。(默认地，所有的actions出现在overflow，但是对应每一个action明晰地声明

你的设计意图是一个好的行为)。

Download action bar icons

To best match the Android iconographyguidelines, you should use icons provided in the Action Bar Icon Pack.

icon属性要求一个图片的资源ID，图片名字跟在@drawable/后，该名字必须是保存在res/drawable目录下的一个bitmap图片的名字。例如：”@drawable/ic_action_search"指向ic_action_search.png.同样地，

title属性使用string资源。该资源被定义在res/valuses/目录下，像在Building a Simple User Interface里讨论的一样。

注意：当常说icon或者其他的bitmap图片时，你应该提供不同分辨率版本的图片.这将在Support Different Screens里更详细的讨论。

如果你的app使用的是Support Library用于兼容Android2.1及以上版本，showAsAction属性不能用android:命名空间。

因为该属性是Support Library提供的一个属性。你必须定义你的自己的XML命名空间。使用自定义命名空间作为前缀。（自定义XML命名空间应该基于你的app名。但是它可以是你想要的任何名字，仅仅能在你声明它的文件范围内访问。例如：

res/menu/main_activity_actions.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
    <!-- Search, should appear as action button -->
    <item android:id="@+id/action_search"
          android:icon="@drawable/ic_action_search"
          android:title="@string/action_search"
          yourapp:showAsAction="ifRoom"  />
    ...
</menu>

Add the Actions to the Action Bar

为了将menu items放入action bar，在你的action里实现onCreateOptionsMenu()回调方法，该方法用于在相应的Menu对象上渲染menu资源。例如：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu items for use in the action bar
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_activity_actions, menu);
    return super.onCreateOptionsMenu(menu);
}

Respond to Action Buttons

当用户点击action buttons或者action overflow里的action item，系统调用activity里的onOptionsItemSelected（）回调方法。在该方法实现里，在相应的MenuItem上调用getItemId()

确定哪个item被点击 —— 返回ID与声明在相应的<item>元素的android:id属性值相匹配。

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle presses on the action bar items
    switch (item.getItemId()) {
        case R.id.action_search:
            openSearch();
            return true;
        case R.id.action_settings:
            openSettings();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

Add Up Button for Low-level Activities

并不是所有的页面都是你的app的主入口（不是“home”页面的activities），这些非主activities应该给用户提供导航到它的逻辑activity的方式——通过点击action bar里的Up按钮。

Figure 4. The Up button in Gmail.

当运行在android4.1（API level 16）或者更高的版本，或者使用Support Library的ActionBarActivity时，实现Up导航很简单，只要求你在Manifest文件里声明父Activity，然后enable action bar 里的Up按钮。

例如，下面给出了如何在manifest里声明父activity。

<application ... >
    ...
    <!-- The main/home activity (it has no parent activity) -->
    <activity
        android:name="com.example.myfirstapp.MainActivity" ...>
        ...
    </activity>
    <!-- A child of the main activity -->
    <activity
        android:name="com.example.myfirstapp.DisplayMessageActivity"
        android:label="@string/title_activity_display_message"
        android:parentActivityName="com.example.myfirstapp.MainActivity" >
        <!-- Parent activity meta-data to support 4.0 and lower -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.example.myfirstapp.MainActivity" />
    </activity>
</application>

然后通过调用setDisplayHomeAsUpEnabled()方法enable app icon作为Up按钮

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

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    // If your minSdkVersion is 11 or higher, instead use:
    // getActionBar().setDisplayHomeAsUpEnabled(true);
}

因为系统现在知道MainActivity是DisplayMessageActivity的父activity。当用户点击Up按钮时，系统导航到父activity——你不需要处理Up按钮事件。

更多关于up导航的信息，see Providing Up Navigation

Styling the Action Bar

action bar提供给用户熟悉和可预知的方式执行actions和导航你的app。但是，这并不意味着action bar的样式和风格看起来相同。如果你想要的你的action bar样式更适合你的产品品牌，你能容易通过

Android的 style and theme（http://developer.android.com/guide/topics/ui/themes.html）资源定制你的action bar样式

YOU SHOULD ALSO READ：Android Action Bar Style Generator

Android内置了几个activity themes这些主题包括“dark”或者“light” action bar样式。你也能扩展这些主题更进一步的自定义你的action bar外观。

注：如果你正使用Support Library APIs实现action bar，你必须使用或者重写 Theme.AppCompat系列样式（相比于Theme.Holo系列样式，Theme.Holo在API11或者更高的API才有效）。这样做，你声明的每一个样式属性必须声明两次：一次使用android平台的样式属性（android:属性），一次使用包含在Support Library里的样式属性（appcompat.R.attr属性———这些属性的上下文实际上是你的app）

更多详情参见下面的例子。

Use an Android Theme

Android内置了两个基本的activity主题。这两个主题表明了action bar的颜色

Theme.Holo for a "dark" theme.

Theme.Holo.Light for a "light" theme.

如图：

通过在manifest文件声明，你能在你的整个app范围内使用这些主题样式（在<application>元素上设置android:theme属性），也能将这两个主题样式单独作用于某个activity上（在<activity>元素上设置android:theme）。

例如：

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

如果你想action bar部分是黑色的样式，而activity的其他部分是亮色的，如图，你可以声明android:theme为Theme.Holo.Light.DarkActionBar主题样式。

当使用Support Library时，你必须使用Theme.AppCompat主题样式：

Theme.AppCompat:"dark"主题

Theme.AppComapt:"light”主题

Theme.AppCompat.Light.DarkActionBar:亮主题，然而action bar是黑色的主题

确保你action bar里icon颜色相比于你的action bar主题颜色是合适的。为了帮助你，action-bar-icon-pack包含了标准的action bar icon。这些icons既适用于Holo light 也适用于Holo dark action bar。

Customize the Background

为了更改action bar的背景，为你的activity产生一个重写了actionBarStyle属性的自定义主题。该属性指向另一个样式，在该样式里你能重写background属性来指定action bar的背景drawable。

如果你的app使用navigation tabs 或者split action bar，那么你也能使用backgroundStackde和backgroundSplits属性来指定action bar的背景。

注意：你应该给你自定义的主题和样式声明一个合适的父主题。没有父样式，你的action bar将缺少一些样式属性，除非你显示的自己声明它们。

For Android 3.0 and higher only

对应android3.0或者更高的版本，你能定义action bar的背景如下：

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>

单个activity或者整个app使用该主题如下：

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

For Android 2.1 and higher

当使用Support Library，上面的主题应该定义成如下：

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>

单个activity或者整个app使用该主题如下：

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

Customize the Text Color

为了修改action bar里文本的颜色，你需要重写每个文本元素的各自的属性。

Action bar title: Create a custom style that specifies the textColor property and specify that style for the titleTextStyle property in your custom actionBarStyle.

Note: The custom style applied to titleTextStyle should use TextAppearance.Holo.Widget.ActionBar.Title as the parent style.

Action bar tabs: Override actionBarTabTextStyle in your activity theme.

Action buttons: Override actionMenuTextColor in your activity theme.

For Android 3.0 and higher only

当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: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>

For Android 2.1 and higher

使用Support Library时，样式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>

Customize the Tab Indicator

为了更改用于导航选项卡的指示器，创建一个覆盖actionBarTabStyle属性的activity主题。该属性指向另一个样式资源，在该样式资源里你能重写background属性来指定一个state-list drawable。

注：state-list drawable用于表示当前那个tab被选中，当前被选中的tab同其他tabs相比，背景不同。更多关于怎么产生处理多个button状态的drawable 资源的信息请阅读State List文档。

例如，下面是一个state-list drawable。该selector针对action bar的tab的不同状态声明了特定的background image。

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>

For Android 3.0 and higher only
当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>

For Android 2.1 and higher

当使用Support Library时，你的样式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>

更多学习资源：

See more style properties for the action bar are listed in the Action Bar guide.

Learn more about how themes work in the Styles and Themes guide.

For even more complete styling for the action bar, try the Android Action Bar Style Generator.

Overlaying the Action Bar

一般地，action bar出现在你的activity窗口的顶部，这样，对于你的activity的剩余的布局，稍微的减少了有效空间。如果你想显示和隐藏action bar，你能在Action Bar上调用show()和hide()实现。然而，这引起你的activity基于新的size重新计算和绘制布局。

当action bar隐藏和显示时，为了避免重新计算和绘制，你可以对action bar enable overlay模式。当在overlay模式下，如果action bar是hide的，你的activity布局使用所有的空间。系统绘制action bar在你的布局之上。这使得layout顶部部分变得模糊。但是现在当action bar显示或者隐藏时，系统并不需要resize布局。并且转换是无缝的。

提示：如果你想要你的layout在action bar后的部分是可见的，产生action bar的自定义style。设置其透明度，如图所示。更多定义action bar背景的信息，请参阅 Styling the Action Bar。

Enable Overlay Mode

enable overlay 模式，你需要产生一个自定义主题，该主题继承自一个存在的action bar主题。设置android:windowActionBarOverlay属性为true。

For Android 3.0 and higher only

如果你的minSdkVersion设置为11或者更高，你的自定义主题应该使用Theme.Holo主题（或者其子类之一）作为你的父主题。例如：

<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.Holo">
        <item name="android:windowActionBarOverlay">true</item>
    </style>
</resources>

For Android 2.1 and higher

如果你的app是正使用Support Library以兼容运行低于3.0版本的设备，你的自定义主题应该使用Theme.AppCompat(或者其子类)作为你的父主题。例如：

<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.AppCompat">
        <item name="android:windowActionBarOverlay">true</item>

        <!-- Support library compatibility -->
        <item name="windowActionBarOverlay">true</item>
    </style>
</resources>

也主要该主题包含了windowActionBarOverlay样式的两种定义：一个使用android:为前缀，一个没有前缀。使用android:前缀的windowActionBarOverlay是针对包含了android平台样式的版本。另一个没有前缀的是为旧的版本（3.0及以下至2.1的版本）。这些版本从Support Library里读响应的样式。

Specify Layout Top-margin

当action bar是overlay模式，可能使layout里的部分view模糊。 To ensure that such items remain below the action bar at all times, add either margin or padding to the top of the view(s) using the height specified by actionBarSize. For example:

<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>

如果你正使用Support Library，你需要移除android前缀，例如：

<!-- Support library compatibility -->
<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>

在这种情况下，"?attr/actionBarSize"值可以使用于所有版本。包括Android3.0及更高的版本