Android学习之ActionBar(仿Gmail主界面)

Action Bar是一个能用于确定应用程序和用户的位置，并提供给用户操作和导航模式的窗口功能。如果需要显著地展示当前用户的操作或导航，应该使用Action Bar,因为Action Bar为用户提供了一个统一的跨应用程序和系统的接口，并且针对不同尺寸的屏幕优雅的处理了Action Bar的适配。你可以通过ActionBar API来控制它的行为和可视性,这些API添加于Android 3.0(API级别为11)。 Action Bar设计的目的是：

◆提供一个专门的空间来确定应用程序的标识和用户的位置。

这是在应用程序图标或者是左侧的logo以及Activity的标题帮助下完成的。如果当前视图的导航标签被标识,例如当前选项卡选中，你可能会选择删除该Activity名称。

◆提供统一的导航和视图细化到不同的应用程序中。

Action Bar提供了内置选项卡导航来进行在fragments之间切换。它还提供了一个下拉列表中,可以来用来替代导航模式或用来完善当前视图(比如按照不同的标准来排序列表)。

◆突出Activity的关键动作(如“搜索”、“创建”、“共享”,等等。),便于用户一个可预测的访问。

对于关键的用户操作，你可以通过将item从选项菜单直接在操作栏定义为action items来提高访问速度。action items也可以提供一个“action view”,它用一个嵌入式widget来提供更多及时的动作行为。没有晋升为成action items的菜单项在溢出菜单中还是有效的，用户既可以使用设备上的菜单按钮（设备上有按钮的时候），也可以使用Action Bar中的溢出菜单按钮（当设备上不包含菜单按钮时）。

1 添加ActionBar

从Android3.0（API level 11)开始，Action Bar包括在所有Activity中使用的Theme.Holo主题（或是继承Activity的一个子类），这是当targetSdkVersion或minSdkVersion属性设置为“11”或更高时程序默认的主题。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.actionbartest"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="11"
        android:targetSdkVersion="16" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.actionbartest.MainActivity"
            android:theme="@android:style/Theme.Holo.Light"
            android:uiOptions="splitActionBarWhenNarrow"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

本例中使用了 Theme.Holo.Light主题，并且使用了分离的ActionBar。

当你的应用程序运行在Android 4.0系统（API Level 14）或更高时，还有一个额外的模式可称action bar为“split action bar”。当在一个狭窄的屏幕运行启用split action bar时，会在屏幕的底部出现一个action bar显示所有action item。split action bar用来分开action item，确保分配合理数量的空间来在一个狭窄的屏幕上显示所有的action item，而空间留给顶端的导航和标题元素。 使用 split action bar，只需添加uiOptions=“splitActionBarWhenNarrow”，到你的<activity>或<application> manifest中。

要知道Android在各种不同的方式，根据当前的屏幕大小调整action bar的外观。采用split action bar只是一个选项，您可以启用允许action bar进一步为不同的屏幕尺寸，优化用户体验。这样做，你也可以让action bar可以折叠成主要的action bar的导航标签（navigation tabs）。也就是说，如果你在你的action bar中使用的导航标签，一旦action items狭窄的屏幕上分离，导航标签可以融入的主要action bar，而不是被分隔成的“折叠的action bar”。具体来说，如果你禁用action bar中的图标和标题（setDisplayShowHomeEnabled（false）和setDisplayShowTitleEnabled（false）），然后将主要action bar的导航标签相互重叠，如图中右边的设备。

2添加Action Items

在主程序中，下面方法：

public boolean onCreateOptionsMenu(Menu menu) {
   // Inflate the menu; this adds items to the action bar if it is present.
   getMenuInflater().inflate(R.menu.activity_main, menu);
   return true;
}

是对menu菜单的设置，我们可以自定义menu文件夹下activity_main.xml文件，来添加Action Items，如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >    
    <item
        android:id="@+id/menu_email"
        android:icon="@drawable/ic_menu_email"
        android:showAsAction="ifRoom|withText"
        android:title="Email"/>
    <item
        android:id="@+id/menu_search"
        android:icon="@drawable/ic_menu_search"
        android:showAsAction="ifRoom|withText"
        android:title="Search"/>
    <item
        android:id="@+id/menu_tag"
        android:icon="@drawable/ic_menu_tag"
        android:showAsAction="ifRoom|withText"
        android:title="Tag"/>
    <item
        android:id="@+id/menu_refresh"
        android:icon="@drawable/ic_menu_refresh"
        android:showAsAction="ifRoom|withText"
        android:title="Refresh"/>
</menu>

这里添加了4个按钮，对于每个Item的选项的具体意思大家可以看看Api。

3自定义标题栏

这个问题困扰了我一上午，上网找方法。首先遇到的问题是，如果在AndroidManifest.xml中的theme主题中指定没有titlebar则Actionbar也会消失，所以此次尝试失败了。第二，我想到了自定义titlebar，结果费了半天劲自定义了style文件，修改及了 AndroidManifest.xml文件，结果确实titlebar是自定义的了，但Actionbar也不在了。第三，让titlebar消失，在主界面的最上方添加自己写的view，但添加如下代码后：

getActionBar().setDisplayShowTitleEnabled(false);
getActionBar().setDisplayShowHomeEnabled(false);

titlebar确实隐藏了，但那一块并没有被我写的view占据，而是空白了。最后，无奈了，只有看api文档，真是柳暗花明又一村啊，绕了半天应该先找这条路，

试了一下，果然成功。添加了如下代码：

View addView = getLayoutInflater().inflate(R.layout.titlebar_main, null);
getActionBar().setCustomView(addView);

其中R.layout.titlebar_main的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_titlebar_main_body"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:padding="1dp">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/iv_title"
            android:layout_width="40dp"
            android:layout_height="30dp"
            android:layout_centerVertical="true"
            android:layout_marginRight="5dp"
            android:src="@drawable/ic_launcher_mail" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/iv_title"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/tv_title_choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="收件箱"
                android:textSize="20sp"
                android:textStyle="bold" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <TextView
                    android:id="@+id/tv_title_address"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="haohaoxuexi@gmail.com"
                    android:textSize="15sp" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginLeft="5dp"
                    android:src="@drawable/folder_parent_icon" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

    <TextView
        android:id="@+id/tv_title_mailcount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="5dp"
        android:layout_centerVertical="true"
        android:text="20"
        android:textSize="34sp"
        android:textColor="#A9A9A9"
        android:textStyle="bold" />

</RelativeLayout>

运行了一下，发现还是有问题，查找了一下原因，原来还需要加上一句代码：

getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);// 必须加上

终于大功告成。

最终效果图如下：

 

4所有源代码

主程序：

package com.example.actionbartest;

import android.os.Bundle;
import android.app.ActionBar;
import android.app.Activity;
import android.app.ActionBar.LayoutParams;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);

		View addView = getLayoutInflater()
				.inflate(R.layout.titlebar_main, null);
		getActionBar().setCustomView(addView);
		getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);// 必须加上
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

}

布局文件、配置文件如上所述

5 总结

1. 跟工程、学术相关的问题还是google靠谱些
2. 中文查不到解决方法时，试试英文的
3. 遇到不知道怎么解决的时候先看看Api文档，很有帮助