Android UI开发之Action Bar

什么是Action
Bar呢

ActionBar 是 Android
3.0(API level 11) 引入的一个新控件，它代表了应用程序标题栏，如果要开发兼容的程序，可以使用 v7 包下的 ActionBar 。Action
Bar取代了传统的tittle bar和menu，在程序运行中一直置于顶部，对于Android平板设备来说屏幕更大它的标题使用Action Bar来设计可以展示更多丰富的内容，方便操控。

通过官方API可以看到：

The action bar is a window feature that identifies the user location, and provides user actions and navigation modes. Using the action bar offers your users a familiar interface across applications that the system gracefully adapts for different screen configurations.



An
action bar that includes the [1] app icon, [2] two action items, and [3] action overflow.

General Organization

The action bar is split into four different functional areas that apply to most apps.



1.App icon: 应用的图标，左侧图标说明可以触摸返回，相当于触摸 back 返回键

2.ViewControl: 下拉列表导航

3.Action button: 相当于普通的 Button 可以监听点击事件

4.Action overflow: 三个点，相当于手机上的 menu 键，可以显示隐藏的 action button。

在使用Action Bar之前，要注意：

如果API低于11，要导入android.support.v7.app.ActionBar

如果API高于11，要导入 android.app.ActionBar

如何使用ActionBar呢

(1)导入android-support-v7库，这个库其实在你的sdk里面就有(前提是你已经下载下来了)，如我的路径：D:\android-sdk-windows\extras\android\support\v7\appcompat



（2）Activity要继承自ActionBarActivity,在Manifest文件中为Application或者Activity设置主题为Theme.AppCompat或其子主题，例如：

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







效果图如下：



一般情况下，ActionBar的app Icon使用你在Manifest文件中为<application>或<activity>元素指定的icon属性的图片，在这里不知道为什么没有显示，下面通过添加代码的方法将icon调出。

通过在MainActivity下添加以下代码，可以设置自己喜欢的icon。

ActionBar actionBar = getSupportActionBar();
actionBar.setLogo(R.mipmap.ic_launcher);
actionBar.setDisplayUseLogoEnabled(true);
actionBar.setDisplayShowHomeEnabled(true);

可以看到，logo已经出来。logo的修改也是通过上述方法实现的。



隐藏ActionBar

如果想要隐藏ActionBar，有以下两个方法可以隐藏。

（1）修改Activity的主题。

style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"

（2）通过代码实现

ActionBar actionBar = getSupportActionBar();
actionBar.hide();

这里要提醒一下：由于ActionBar在隐藏的时候会重现绘制Activity的界面，从而填充ActionBar的空白，所以当你频繁的隐藏和显示ActionBar时，会导致Activity的界面频繁重绘，为了避免这种情况发生，你可以再actionBarStyle中将
windowActionBarOverlay这个属性设置为true,也就是说ActionBar会在Activity的上面，隐藏和显示不会影响Activity。

在应用中添加ActionBar
1.在 res/menu/ 目录中修改menu_main.xml，代码如下：

<pre name="code" class="java"><menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.ahuang.actionbar.MainActivity">
<item
android:id="@+id/icon_save"
android:orderInCategory="100"
android:icon="@drawable/ic_action_save"
android:title="@string/save"
app:showAsAction="ifRoom|withText"></item>
<item
android:id="@+id/icon_delete"
android:orderInCategory="100"
android:icon="@drawable/ic_action_discard"
android:title="@string/delete"
app:showAsAction="ifRoom|withText"></item>
<item
android:id="@+id/icon_email"
android:orderInCategory="100"
android:icon="@drawable/ic_action_email"
android:title="@string/email"
app:showAsAction="ifRoom"></item>
<item
android:id="@+id/icon_import"
android:orderInCategory="100"
android:icon="@drawable/ic_action_important"
android:title="@string/inport"
app:showAsAction="ifRoom"></item>
<item
android:id="@+id/icon_setting"
android:orderInCategory="100"
android:icon="@drawable/ic_action_settings"
android:title="@string/setting"
app:showAsAction="ifRoom"></item>
</menu>

说明一下几个属性的意思。

属性名	解释
android:orderInCategory	表示每个 item 的优先级，值越大优先级越低，actionbar 地方不够就会放到 overflow 中。
android:title	item 的标题。
android:icon	item 显示的图标。
app:showAsAction	item 显示的方式。

其 showAsAction 属性接受如下一些值：

ifRoom

会显示在 Item 中，但是如果已经有 4 个或者 4 个以上的Item 时会隐藏在溢出列表中。当然个数并不仅仅局限于 4个，依据屏幕的宽窄而定

never

永远不会显示。只会在溢出列表中显示，而且只显示标题，所以在定义 item 的时候，最好把标题都带上。

always

无论是否溢出，总会显示。

withText

withText 值示意 Action bar 要显示文本标题。 Action bar会尽可能的显示这个标题，但是，如果图标有效并且受到Action bar 空间的限制，文本标题有可能显示不全。

collapseActionView

声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。否则，这个操作视窗在默认的情况下是不可见的。一般要配合 ifRoom 一起使用才会有效果。
2.重写 ActionBarActivity 中的onCreateOptionsMenu（）方法。

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

3.重写onOptionsItemSelected（）监听事件；

<pre name="code" class="java">@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
switch (id){
case R.id.icon_save:
return true;
case R.id.icon_delete:
return true;
case R.id.icon_setting:
return true;
case R.id.icon_email:
return true;
case R.id.icon_import:
return true;
}

return super.onOptionsItemSelected(item);
}

运行效果如图所示：


显示OverflowMenu的Icon
在Activity下添加以下两个方法：

@Override
public boolean onMenuOpened(int featureId, Menu menu) {
setOverflowIconVisible(featureId, menu);
return super.onMenuOpened(featureId, menu);
}

/**
* 利用反射让隐藏在Overflow中的MenuItem显示Icon图标
* @param featureId
* @param menu
* onMenuOpened方法中调用
*/
public static void setOverflowIconVisible(int featureId, Menu menu) {
if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {
if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
try {
Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, true);
} catch (Exception e) {
}
}
}
}

ActionBar的导航功能

ActionBar最重要的功能就是其导航功能，使用其导航功能时，需要进行如下配置

1、显示导航按钮

ActionBar actionBar = getSupportActionBar();

actionBar.setDisplayHomeAsUpEnabled(true);

配置完了后，运行如下图，你会发现Actionbar多了一个类似返回的icon



然后为导航添加事件

actionBar.setDisplayHomeAsUpEnabled(true); //<span style="color: rgb(0, 130, 0); font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 14px; line-height: 15.4px; white-space: pre;">这句就可以让actionBar的图标可以响应点击事件</span>

然后在onOptionsItemSelected（）方法里添加如下分支：

case android.R.id.home:
Intent intent=new Intent(this,MainActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP |Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(intent);
finish();
return true;

这样点击ActionBar会跳到主Activity。

ActionBar实现搜索视图

1.添加搜索Item

<item
android:id="@+id/icon_serch"
android:orderInCategory="100"
android:icon="@drawable/ic_action_search"
android:title="搜索"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="collapseActionView|ifRoom"></item>

2.在Activity里写一个方法实现ActionBar的搜索功能。并在onCreateOptionsMenu（）方法里调用。

/**
* 为ActionBar实现查询功能
* @param menu
*/

private void setSearch(Menu menu){
final MenuItem item=menu.findItem(R.id.icon_serch);
SearchView sv=(SearchView) MenuItemCompat.getActionView(item);
if(sv!=null){
sv.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
@Override
public boolean onQueryTextSubmit(String s) {
MenuItemCompat.collapseActionView(item);
return true;
}

@Override
public boolean onQueryTextChange(String s) {
return false;
}
});
}

}

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

3.在onOptionsItemSelected（）方法里添加响应事件。

case R.id.icon_serch:
return true;