ActionBar

来源:互联网 发布:ipadian 安装软件 编辑:程序博客网 时间:2024/05/16 09:43

——ActionBar介绍
在Android 3.0中除了我们重点讲解的Fragment外,Action Bar也是一个非常重要的交互元素,Action Bar取代了传统的tittle bar和menu,在程序运行中一直置于顶部,对于Android平板设备来说屏幕更大它的标题使用Action Bar来设计可以展示更多丰富的内容,方便操控。

——ActionBar的功能
这里写图片描述
<1> ActionBar的图标,可显示软件图标,也可用其他图标代替。当软件不在最高级页面时,图标左侧会显示一个左箭头,用户可以通过这个箭头向上导航;
  <2> 如果你的应用要在不同的View中显示数据,这部分允许用户来切换视图。一般的作法是用一个下拉菜单或者是Tab选项卡。如果只有一个界面,那这里可以显示应用程序的标题或者是更长一点的商标信息;
  <3> 两个action按钮,这里放重要的按钮功能,为用户进行某项操作提供直接的访问;
  <4> overflow按钮,放不下的按钮会被置于“更多…”菜单项中,“更多…”菜单项是以下拉形式实现的。

——ActionBar的详解
1、添加ActionBar
ActionBar的添加非常简单,只需要在AndroidManifest.xml中指定Application或Activity的theme是Theme.Holo或其子类就可以了,在Android 3.0及更高的版本中,Activity中都默认包含有ActionBar组件。

2、取消ActionBar
  如果需要隐藏Action Bar可以在你的Activity的属性中设置主题风格为NoTitleBar在你的manifest文件中

  还有一种做法,在运行时调用hide()方法也可以隐藏ActionBar,调用show()方法来显示ActionBar()。
ActionBar actionBar = getActionBar();
actionBar.hide();
  当你隐藏ActionBar时,系统会将Activity的整个内容充满整个空间。
  注意:如果使用一个主题(theme)来移除Activity上得ActionBar,那么窗口将不再会有ActionBar,因此在运行时也就没有办法来添加ActionBar——调用getActionBar()方法会返回null值。
3、修改Action Bar的图标和标题
默认情况下,系统会使用或者中icon属性指定的图片来作为ActionBar的图标,但是我们也可以改变这一默认行为。如果我们想要使用另外一张图片来作为ActionBar的图标,可以在或者中通过logo属性来进行指定,而标题中的内容使用label属性来指定。比如项目的res/drawable目录下有一张cnblog_icon.png图片,就可以在AndroidManifest.xml中这样指定:

         <activity            android:name=".MainActivity"            android:label="召唤ActionBar吧"            android:logo="@drawable/cnblog_icon" >

4、添加Action按钮
ActionBar还可以根据应用程序当前的功能来提供与其相关的Action按钮,这些按钮都会以图标或文字的形式直接显示在ActionBar上。当然,如果按钮过多,ActionBar上显示不完,多出的一些按钮可以隐藏在overflow里面(最右边的三个点就是overflow按钮),点击一下overflow按钮就可以看到全部的Action按钮了。

这里写图片描述

可以看到,这里我们通过两个标签定义了三个Action按钮。标签中又有一些属性,其中id是该Action按钮的唯一标识符,icon用于指定该按钮的图标,title用于指定该按钮可能显示的文字(在图标能显示的情况下,通常不会显示文字),actionViewClass用来指定一个构建视窗所使用的布局资源,showAsAction则指定了该按钮显示的位置
这里我们注意到,显示在ActionBar上的按钮都只有一个图标而已,我们在title中指定的文字并没有显示出来。没错,title中的内容通常情况下只会在overflow中显示出来,ActionBar中由于屏幕空间有限,默认是不会显示title内容的。但是出于以下几种因素考虑,即使title中的内容无法显示出来,我们也应该给每个item中都指定一个title属性:
当ActionBar中的剩余空间不足的时候,如果Action按钮指定的showAsAction属性是ifRoom的话,该Action按钮就会出现在overflow当中,此时就只有title能够显示了。
如果Action按钮在ActionBar中显示,用户可能通过长按该Action按钮的方式来查看到title的内容。
5、响应Action按钮的点击事件
当用户点击Action按钮的时候,系统会调用Activity的onOptionsItemSelected()方法,通过方法传入的MenuItem参数,我们可以调用它的getItemId()方法和menu资源中的id进行比较,从而辨别出用户点击的是哪一个Action按钮。

6、通过Action Bar图标进行导航
启用ActionBar图标导航的功能,可以允许用户根据当前应用的位置来在不同界面之间切换。比如,A界面展示了一个列表,点击某一项之后进入了B界面,这时B界面就应该启用ActionBar图标导航功能,这样就可以回到A界面。
我们可以通过调用setDisplayHomeAsUpEnabled()方法来启用ActionBar图标导航功能,比如:
setContentView(R.layout.activity_main);
ActionBar actionBar = getActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);

6.添加Action View
ActionView是一种可以在ActionBar中替换Action按钮的控件,它可以允许用户在不切换界面的情况下通过ActionBar完成一些较为丰富的操作。比如说,你需要完成一个搜索功能,就可以将SeachView这个控件添加到ActionBar中。
为了声明一个ActionView,我们可以在menu资源中通过actionViewClass属性来指定一个控件:

这里写图片描述

7、让Overflow中的选项显示图标
如果你点击一下overflow按钮去查看隐藏的Action按钮,你会发现这部分Action按钮都是只显示文字不显示图标的。
这是官方的默认效果,Google认为隐藏在overflow中的Action按钮都应该只显示文字。当然,如果你认为这样不够美观,希望在overflow中的Action按钮也可以显示图标,我们仍然可以想办法来改变这一默认行为。
其实,overflow中的Action按钮应不应该显示图标,是由MenuBuilder这个类的setOptionalIconsVisible变量来决定的,如果我们在overflow被展开的时候将这个变量赋值为true,那么里面的每一个Action按钮对应的图标就都会显示出来了。赋值的方法当然仍然是用反射了,代码如下所示:

这里写图片描述

package com.xspacing.actionbar;import android.app.ActionBar;import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.SearchView;import android.widget.SearchView.OnQueryTextListener;import android.widget.Toast;public class MainActivity extends Activity {    private ActionBar actionBar;    private Context mContext;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mContext = this;        actionBar = getActionBar();        // 设置返回图标        actionBar.setDisplayHomeAsUpEnabled(true);    }    public void show(View v) {        actionBar.show();    }    public void hide(View v) {        actionBar.hide();    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.main, menu);        // 获取搜索控件        MenuItem item = menu.findItem(R.id.menu_search);        SearchView searchView = (SearchView) item.getActionView();        // 查找文字监听        searchView.setOnQueryTextListener(new OnQueryTextListener() {            //提交时候回调            @Override            public boolean onQueryTextSubmit(String query) {                Toast.makeText(mContext, query, Toast.LENGTH_SHORT).show();                return true;            }            //每当输入框字体发生改变的时候回调            @Override            public boolean onQueryTextChange(String newText) {                Toast.makeText(mContext, newText, Toast.LENGTH_SHORT).show();                return true;            }        });        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        int id = item.getItemId();        switch (id) {        case R.id.menu_1:            Toast.makeText(this, "摇一摇", Toast.LENGTH_SHORT).show();            break;        case R.id.menu_2:            Toast.makeText(this, "扫一扫", Toast.LENGTH_SHORT).show();            break;        case R.id.menu_3:            Toast.makeText(this, "附近人", Toast.LENGTH_SHORT).show();            break;        case android.R.id.home:            finish();            Toast.makeText(this, "返回", Toast.LENGTH_SHORT).show();            break;        default:            break;        }        return true;    }}
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.xspacing.actionbar.MainActivity" >    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:onClick="show"        android:text="显示actionBar" />    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:onClick="hide"        android:text="隐藏actionBar" /></LinearLayout>
0 0