天天看点

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.

Android UI开发之Action Bar

  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.

Android UI开发之Action Bar

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

Android UI开发之Action Bar

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

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

Android UI开发之Action Bar
Android UI开发之Action Bar
Android UI开发之Action Bar

效果图如下:

Android UI开发之Action Bar

一般情况下,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的修改也是通过上述方法实现的。

Android UI开发之Action Bar

隐藏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);
    }
           

运行效果如图所示:        

Android UI开发之Action Bar

显示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) {
                }
            }
        }
    }
           
Android UI开发之Action Bar

ActionBar的导航功能

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

1、显示导航按钮

ActionBar actionBar = getSupportActionBar();

actionBar.setDisplayHomeAsUpEnabled(true);

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

Android UI开发之Action Bar

然后为导航添加事件

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;
           
Android UI开发之Action Bar