ActionBar指南

在上一篇文章里我们已经解释了怎么去定义一个ActionBar，然后去处理它的点击事件，下面我们接着说。

配置ActionBar图标的顺序

你可以控制ActionBar中每个条目的顺序，使用orderinCategory ，数据类型为整形，数字越低，优先权越高

<item
   android:id="@+id/menu_ordinary"
   android:orderInCategory="200"
   app:showAsAction="ifRoom"
   android:title="Ordinary" />

<item
   android:id="@+id/menu_important"
   android:orderInCategory="20"
   app:showAsAction="ifRoom"
   android:title="Important" />

这个把重要的action放到前面，显示的使用它很有用。

自定义ActionBar样式

我们可以通过创建我们自己的ActionBar的样式来更改。比如说我们可以在res/values/styles.xml:加上如下的代码

<resources>

    <!--定义颜色 -->
    <color name="simple_yellow">#ECD078</color>
    <color name="primary_blue">#53777A</color>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>

        <!-- 兼容性 -->
        <item name="actionBarStyle">@style/MyActionBar</item>
        <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
    </style>

    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@color/simple_yellow</item>
        <item name="android:titleTextStyle">@style/MyActionBar.TitleTextStyle</item>

        <!-- 兼容性 -->
        <item name="background">@color/simple_yellow</item>
        <item name="titleTextStyle">@style/MyActionBar.TitleTextStyle</item>
    </style>

    <style name="MyActionBar.TitleTextStyle"
        parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/primary_blue</item>
    </style>

    <style name="MyActionBarTabText" parent="@style/Widget.AppCompat.ActionBar.TabText">
        <item name="android:textColor">@color/primary_blue</item>
    </style>

</resources>

确保在清单文件中使用了相应的主题

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.codepath.example.servicesdemo"
    ...>
    <application
        ...
        android:theme="@style/AppTheme" >
</manifest>

现在你的ActionBar就拥有了新的样式了

自定义ActionBar布局

在有些情况下，你想改变ActionBar的布局，比如说你想改变icon，改变title的大小，改变颜色等等。首先定义你的布局文件res/layout/actionbar_title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/app_title"
        android:textColor="#ffffff"
        android:id="@+id/mytext"
        android:textSize="18dp" />
</LinearLayout>

现在我们已经定义了布局文件，我们需要在Activity中加载它

import android.support.v7.app.ActionBar;
// in Activity#onCreate
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); 
getSupportActionBar().setCustomView(R.layout.actionbar_title);

好了我们已经把ActionBar换成了我们的

如果说你还想加上app的icon，你需要加上这样一句

getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_SHOW_HOME); 

注意：你仍然可以重写onCreateOptionsMenu 方法去定义自己的action按钮，自定义的view回合action butto共享空间，通常会放到右边

给ActionView增加条目

如果说你想提供一个菜单条目不简简单单的是图标或者文本，比如说想要提供一个可以交互的组件。最常见的ActionVIew就是SearchView，只有再点击查询按钮才会显示。你也可以使用ActionView来穿件一个自定义的布局。

首先你要创建一个xml布局文件

<!-- res/layout/action_view_button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <Button
        android:id="@+id/btnCustomAction"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

然后通过app:action_layou属性把任意的item放置到menu里

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/miActionButton"
        app:showAsAction="ifRoom"
        app:actionLayout="@layout/action_view_button" 
        android:title="Loading..." />
</menu>

效果如下

可以通过onPrepareOptionsMenu 来获取响应的按钮

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    MenuItem actionViewItem = menu.findItem(R.id.miActionButton);
        // Retrieve the action-view from menu
    View v = MenuItemCompat.getActionView(actionViewItem);
        // Find the button within action-view
    Button b = (Button) v.findViewById(R.id.btnCustomAction);
    // Handle button click here
    return super.onPrepareOptionsMenu(menu);
}

给ActionBar增加SerachView

一个ActionView很好的例子就是SerachView。
首先你需要把SerachView增加到你的menu文件里

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" >
   <item android:id="@+id/action_search"
          android:orderInCategory="5"
          android:title="Search"
          android:icon="@android:drawable/ic_menu_search"
          app:showAsAction="ifRoom|collapseActionView"
          app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

注意app:showAsAction属性包含collapseActionView。意思是在没点击的时候值显示一个查询的图标，知道用户点击。下面是例子

代码

// Make sure to import the support version of the SearchView
import android.support.v7.widget.SearchView;

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main, menu);
    MenuItem searchItem = menu.findItem(R.id.action_search);
    final SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    searchView.setOnQueryTextListener(new OnQueryTextListener() {
       @Override
       public boolean onQueryTextSubmit(String query) {
            // perform query here

            // workaround to avoid issues with some emulators and keyboard devices firing twice if a keyboard enter is used
            // see https://code.google.com/p/android/issues/detail?id=24599
            searchView.clearFocus();

            return true;
       }

       @Override
       public boolean onQueryTextChange(String newText) {
           return false;
       }
   });
   return super.onCreateOptionsMenu(menu);
}

我们可以通过代码的形式任何时候对SerachView进行拓展（展开）

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // ... lookup the search view
    MenuItem searchItem = menu.findItem(R.id.action_search);
    final SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    // Expand the search view and request focus 
    searchItem.expandActionView();
    searchView.requestFocus();
}

我们也可以自定义图标、颜色等等

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // ... lookup the search view
    MenuItem searchItem = menu.findItem(R.id.action_search);
    final SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    // Use a custom search icon for the SearchView in AppBar
    int searchImgId = android.support.v7.appcompat.R.id.search_button; 
    ImageView v = (ImageView) searchView.findViewById(searchImgId);
    v.setImageResource(R.drawable.search_btn);
    // Customize searchview text and hint colors
    int searchEditId = android.support.v7.appcompat.R.id.search_src_text;
    EditText et = (EditText) searchView.findViewById(searchEditId);
    et.setTextColor(Color.BLACK);
    et.setHintTextColor(Color.BLACK);
}