在上一篇文章里我们已经解释了怎么去定义一个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);
}