【Android UI设计与开发】第10期：顶部标题栏（一）ActionBar详细概述和简单示例

由于是刚开始写博客，所以一开始在格式上也没有太在意，今天偶然间翻阅自己的博客，却发现字体、代码以及图片什么的都几乎快挤到了一起，自己都觉得看着很难受，更别说别的读者了。为了大家能够读的清楚、看的明白，今天博主稍微花了一点时间把这个专题前几期文章的标题和格式全都改了一遍。希望读者们继续支持，你们的支持也是我最大的动力！



一、ActionBar介绍



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



二、ActionBar的功能



用图的方式来讲解它的功能





<1> 可显示软件图标，也可用其他图标代替。当软件不在最高级页面时，图标左侧会显示一个左箭头，用户可以通过这个箭头向上导航；



<2> 如果你的应用要在不同的View中显示数据，这部分允许用户来切换视图。一般的作法是用一个下拉菜单或者是Tab选项卡。如果只有一个界面，那这里可以显示应用程序的标题或者是更长一点的商标信息；



<3> 这里放重要的按钮功能，为用户进行某项操作提供直接的访问；



<4> 放不下的按钮会被置于“更多...”菜单项中，“更多...”菜单项是以下拉形式实现的。



三、使用[b]ActionBar注意事项[/b]



1、[b]得到ActionBar[/b]

在Android 3.0及更高的版本中，Activity中都默认包含有ActionBar组件。一个应用被认为是基于Android 3.0的标识是在AndroidManifest中的<uses-sdk>标签中设置了android:minSdkVersion或者android:targetSdkVersion属性值为11或者更大值时，此时的应用被系统认为是Android 3.0上的应用。

[html] view
plaincopy

<span style="font-size:12px;"><manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.helloworld"

android:versionCode="1"

android:versionName="1.0">

<uses-sdk android:minSdkVersion="4"

android:targetSdkVersion="11" />

<application ... >

...

</application>

</manifest>

</span>





2、取消ActionBar

如果需要隐藏Action Bar可以在你的Activity的属性中设置主题风格为NoTitleBar在你的manifest文件中，下面的代码在3.0以前是隐藏标题，而在3.0以后就是隐藏ActionBar了，代码为:

[html] view
plaincopy

<span style="font-size:12px;"><activity android:theme="@android:style/Theme.NoTitleBar"></span>

还有一种做法，在运行时调用hide()方法也可以隐藏ActionBar，调用show()方法来显示ActionBar()。例如：

[java] view
plaincopy

ActionBar actionBar = getActionBar();

actionBar.hide();

当你隐藏ActionBar时，系统会将Activity的整个内容充满整个空间。



注意：如果使用一个主题（theme）来移除Activity上得ActionBar，那么窗口将不再会有ActionBar，因此在运行时也就没有办法来添加ActionBar——调用getActionBar()方法会返回null值。



四、示例效果图









五、项目目录结构







六、详细代码编写



1、在menu的layout布局文件中添加一个活动条目Action Items和一个活动视图Action View，main.xml：

[html] view
plaincopy

<span style="font-size:12px;"><menu xmlns:android="http://schemas.android.com/apk/res/android" >



<item

android:id="@+id/menu_add"

android:icon="@drawable/ic_title_share_default"

android:showAsAction="ifRoom|withText"

android:title="分享"/>

<item

android:id="@+id/menu_search"

android:actionViewClass="android.widget.SearchView"

android:showAsAction="ifRoom"

android:title="Search"/>



</menu></span>

2、主界面类，MainActivity.java：

[java] view
plaincopy

package com.yangyu.myactionbar;



import android.app.ActionBar;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;



public class MainActivity extends Activity {



@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);



ActionBar actionBar = this.getActionBar();

actionBar.setDisplayOptions(ActionBar.DISPLAY_HOME_AS_UP, ActionBar.DISPLAY_HOME_AS_UP);



}



@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main, menu);

return true;

}



@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case android.R.id.home:

// 当ActionBar图标被点击时调用

System.out.println("点击了Home按钮！");

break;

}

return super.onOptionsItemSelected(item);

}

}



注意：调用getActionBar方式在你的Activity的onCreate中时需要注意必须在调用了setContentView之后。



好了，今天就写到这里吧，依然是以一个简单的示例来练练手，后面会继续更加深入的讲解关于ActionBar的更多的用法。

源码下载地址