黑马程序员技术交流社区

标题: 使用ActionBar搭建Android UI框架 [打印本页]
作者: 殷凯老师    时间: 2014-12-22 16:26
标题: 使用ActionBar搭建Android UI框架
使用ActionBar搭建Android UI框架

什么是ActionBar?
ActionBar最早起源于Android 3.0系统, 最初是基于平板电脑设计的顶栏操作模块, 后来Android 4.0系统将此操作模块推广的普通的手机屏幕, 旨在为所有Android用户提供统一的交互体验。
ActionBar主要分如下几个部分:
1. 标题区域
此区域位于顶栏左侧, 用来展示程序图标, 标题, 及返回按键。
2. 操作区域
此区域位于顶栏右侧, 用来展示操作选项及菜单列表。

具体可参考下图:
                                                            
                                                                            图1-1 Actionbar简介

什么是ActionBarSherlock?

由于ActionBar 起源于Android 3.0系统, 所以Android 2.x的系统无法正常运行ActionBar的所有功能。 我们可以使用第三方框架ActionBarSherlock来解决这个问题。使用这种框架的好处就是, Android任何版本都可以统一ActionBar的标准样式, 无需开发者做过多兼容。这是官方网址：http://actionbarsherlock.com。

案例分析
接下来， 我们通过一个简单的案例，来了解一下ActionBarSherlock的使用方式。

一． 下载ActionBarSherlock官方SDK
登录官方网址：http://actionbarsherlock.com 下载SDK并解压, 如图所示:


   图1-2 ActionBarSherlock SDK

其中，actionbarsherlock是我们要使用的第三方库文件，actionbarsherlock-samples是例子程序。

二． 创建Demo程序
使用eclipse创建Android项目MyActionBarDemo，并且引入上一步下载的第三方库文件actionbarsherlock， 如下图所示：


图1-3 MyActionBarDemo

右键单击项目MyActionBarDemo，选择Properties，弹窗左侧列表选择Android，点击Add按钮，选择actionbarsherlock后，点击确定。这样，我们自己的项目MyActionBarDemo就和ActionBarSherlock关联了起来，可以直接调用ActionBarSherlock中的所有资源文件和API了。


图1-4 引入ActionBarSherlock库文件（1）


图1-5 引入ActionBarSherlock库文件（2）

注：由于actionbarsherlock的libs包下已经有android-support-v4.jar，为了避免jar包冲突，我们需要将MyActionBarDemo中libs目录下的android-support-v4.jar删除掉。

三． 快速开始
1. 在AndroidManifest.xml中，修改应用程序的主题，改为Sherlock下的某种主题，比如：@style/Theme.Sherlock.Light，表示亮色风格的主题。
  1. <application
  2.         android:allowBackup="true"
  3.         android:icon="@drawable/ic_launcher"
  4.         android:label="@string/app_name"
  5.         android:theme="@style/Theme.Sherlock.Light" >
  6.         <activity
  7.             android:name="com.example.actionbardemo.MainActivity"
  8.             android:label="@string/app_name" >
  9.             <intent-filter>
  10.                 <action android:name="android.intent.action.MAIN" />

  12.                 <category android:name="android.intent.category.LAUNCHER" />
  13.             </intent-filter>
  14.         </activity>
  15. </application>
复制代码
2. 让MainActivity继承SherlockActivity。
  1. public class MainActivity extends SherlockActivity {
  2.         @Override
  3.         protected void onCreate(Bundle savedInstanceState) {
  4.                 super.onCreate(savedInstanceState);
  5.                 setContentView(R.layout.activity_main);
  6.         }
  7. }
复制代码
3. 在res目录下，新建menu文件夹，在menu下新建xml文件，名为main.xml，文件内容如下所示：
  1. <menu xmlns:android="http://schemas.android.com/apk/res/android" >
  2.     <item
  3.         android:id="@+id/action_1"
  4.         android:showAsAction="always"
  5.        android:icon="@drawable/ic_launcher"
  6.         android:title="action_1"/>
  7. </menu>
复制代码
此xml文件根标签是menu，子标签item表示一个操作选项。item有几个属性：id表示item的id标识；showAsAction表示item的展现方式，showAsAction=always表示item一直展示在actionbar的条目上；icon表示item的图标；title表示item的标题。

4. 在MainActivity中重写onCreateOptionsMenu这个方法。
  1. @Override
  2. public boolean onCreateOptionsMenu(Menu menu) {
  3.         getSupportMenuInflater().inflate(R.menu.main, menu);
  4.         return super.onCreateOptionsMenu(menu);
  5. }
复制代码
此方法可以将描述文件main.xml填充到ActionBar的条目中。
运行程序，即可发现在ActionBar的操作区域，多了一个操作选项，如图所示：


图1-6 显示操作选项
5. 为了让操作选项响应点击事件，可以在MainActivity中重写onOptionsItemSelected方法。
  1. @Override
  2. public boolean onOptionsItemSelected(MenuItem item) {
  3.         switch (item.getItemId()) {
  4.         case R.id.action_1:
  5.              Log.d("Test", "action 1 is clicked!");
  6.              break;
  7.         default:
  8.         break;
  9.         }
  10.         return super.onOptionsItemSelected(item);
  11. }
复制代码
在这个方法中，根据item的id来区分哪一个item被点击，从而执行相应的操作。

四． 扩展功能

1. 为了在ActionBar中显示子菜单功能，可以在main.xml中追加一段代码：
  1. <menu xmlns:android="http://schemas.android.com/apk/res/android" >
  2.     <item
  3.         android:id="@+id/action_1"
  4.         android:icon="@drawable/ic_launcher"
  5.         android:showAsAction="always"
  6.         android:title="action_1"/>
  7.     <item
  8.         android:id="@+id/action_more"
  9.         android:icon="@drawable/ic_launcher"
  10.         android:showAsAction="always"
  11.         android:title="action_more">
  12.         <menu>
  13.             <item
  14.                 android:id="@+id/action_2"
  15.                 android:showAsAction="always"
  16.                 android:title="action_2"/>
  17.             <item
  18.                 android:id="@+id/action_3"
  19.                 android:showAsAction="always"
  20.                 android:title="action_3"/>
  21.         </menu>
  22.     </item>
  23. </menu>
复制代码
运行项目，点击新增的item，可得到如下效果：


图1-7 ActionBar的子菜单

2. ActionBar还可以动态修改标题，logo图标，设置返回按钮等。
  1. private void updateActionBar() {
  2.         ActionBar actionbar = getSupportActionBar();//获取actionbar对象
  3.         actionbar.setTitle("自定义标题");//修改actionbar标题
  4.         actionbar.setLogo(R.drawable.logo);//修改actionbar的logo
  5.         actionbar.setDisplayHomeAsUpEnabled(true);//显示返回按键
  6. }
复制代码


图1-8 自定义actionbar
注： 返回按键的点击事件也是在onOptionsItemSelected中进行捕获，只不过采用系统默认id：android.R.id.home。

总结

随着Android系统的飞速发展，ActionBar会应用到越来越多的项目当中，比如微信近期的几个版本都采用了ActionBar的UI框架。为了保证2.x版本的兼容，我们可以直接使用ActionBarSherlock这个流行的第三方SDK，其API的调用方式几乎和Android原生ActionBar的调用方式完全一致，极大降低了开发成本，提高了开发效率。

源码下载: MyActionBarDemo.rar (1.33 MB, 下载次数: 381)
actionbarsherlock.rar (1.68 MB, 下载次数: 370)




作者: 含笑    时间: 2015-6-22 21:28
学习android开发，会用到哪些EE中学到的知识点？
作者: asinzuo    时间: 2015-6-23 10:15
厉害，写的比较详细
作者: ssclovedan    时间: 2015-6-23 23:17
支持下!!!!
作者: tangpeng    时间: 2015-6-27 07:19
挺详细的,赞一个
作者: rdzhang1010    时间: 2015-6-27 07:48
写的很详细了。。。
作者: qingger    时间: 2015-6-29 22:10
支持，加油
作者: 形而上孤独    时间: 2015-6-30 09:10
加油，大赞
作者: MAY1066    时间: 2015-7-1 23:02
很喜欢哈,真的很好的知识
作者: y137123606    时间: 2015-7-17 12:47
支持，加油！



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2