程序博客网 > 汉字图像数据集

Android ActionBar完全解析，使用官方推荐的最佳导航栏(上)

来源：互联网 发布：汉字图像数据集 编辑：程序博客网 时间：2024/06/05 23:57

转载请注明出处：http://blog.csdn.net/guolin_blog/article/details/18234477

本篇文章主要内容来自于Android Doc，我翻译之后又做了些加工，英文好的朋友也可以直接去读原文。

http://developer.android.com/guide/topics/ui/actionbar.html

Action Bar是一种新増的导航栏功能，在Android 3.0之后加入到系统的API当中，它标识了用户当前操作界面的位置，并提供了额外的用户动作、界面导航等功能。使用ActionBar的好处是，它可以给提供一种全局统一的UI界面，使得用户在使用任何一款软件时都懂得该如何操作，并且ActionBar还可以自动适应各种不同大小的屏幕。下面是一张使用ActionBar的界面截图：


其中，[1]是ActionBar的图标，[2]是两个action按钮，[3]是overflow按钮。

由于Action Bar是在3.0以后的版本中加入的，如果想在2.x的版本里使用ActionBar的话则需要引入Support Library，不过3.0之前版本的市场占有率已经非常小了，这里简单起见我们就不再考虑去做向下兼容，而是只考虑4.0以上版本的用法。


添加和移除Action Bar

ActionBar的添加非常简单，只需要在AndroidManifest.xml中指定Application或Activity的theme是Theme.Holo或其子类就可以了，而使用Eclipse创建的项目自动就会将Application的theme指定成Theme.Holo，所以ActionBar默认都是显示出来的。新建一个空项目并运行，效果如下图所示：


而如果想要移除ActionBar的话通常有两种方式，一是将theme指定成Theme.Holo.NoActionBar，表示使用一个不包含ActionBar的主题，二是在Activity中调用以下方法：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. ActionBar actionBar = getActionBar();
  2. actionBar.hide();
现在重新运行一下程序，就可以看到ActionBar不再显示了，如下图所示：



修改Action Bar的图标和标题

默认情况下，系统会使用<application>或者<activity>中icon属性指定的图片来作为ActionBar的图标，但是我们也可以改变这一默认行为。如果我们想要使用另外一张图片来作为ActionBar的图标，可以在<application>或者<activity>中通过logo属性来进行指定。比如项目的res/drawable目录下有一张weather.png图片，就可以在AndroidManifest.xml中这样指定：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <activity
  2. android:name="com.example.actionbartest.MainActivity"
  3. android:logo="@drawable/weather">
  4. </activity>
现在重新运行一下程序，效果如下图所示：

OK，ActionBar的图标已经修改成功了，那么标题中的内容该怎样修改呢？其实也很简单，使用label属性来指定一个字符串就可以了，如下所示：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <activity
  2. android:name="com.example.actionbartest.MainActivity"
  3. android:label="天气"
  4. android:logo="@drawable/weather">
  5. </activity>
现在重新运行一下程序，结果如下图所示：


添加Action按钮

ActionBar还可以根据应用程序当前的功能来提供与其相关的Action按钮，这些按钮都会以图标或文字的形式直接显示在ActionBar上。当然，如果按钮过多，ActionBar上显示不完，多出的一些按钮可以隐藏在overflow里面（最右边的三个点就是overflow按钮），点击一下overflow按钮就可以看到全部的Action按钮了。
当Activity启动的时候，系统会调用Activity的onCreateOptionsMenu()方法来取出所有的Action按钮，我们只需要在这个方法中去加载一个menu资源，并把所有的Action按钮都定义在资源文件里面就可以了。
那么我们先来看下menu资源文件该如何定义，代码如下所示：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <menuxmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. tools:context="com.example.actionbartest.MainActivity">
  5. <item
  6. android:id="@+id/action_compose"
  7. android:icon="@drawable/ic_action_compose"
  8. android:showAsAction="always"
  9. android:title="@string/action_compose"/>
  10. <item
  11. android:id="@+id/action_delete"
  12. android:icon="@drawable/ic_action_delete"
  13. android:showAsAction="always"
  14. android:title="@string/action_delete"/>
  15. <item
  16. android:id="@+id/action_settings"
  17. android:icon="@drawable/ic_launcher"
  18. android:showAsAction="never"
  19. android:title="@string/action_settings"/>
  21. </menu>
可以看到，这里我们通过三个<item>标签定义了三个Action按钮。<item>标签中又有一些属性，其中id是该Action按钮的唯一标识符，icon用于指定该按钮的图标，title用于指定该按钮可能显示的文字（在图标能显示的情况下，通常不会显示文字），showAsAction则指定了该按钮显示的位置，主要有以下几种值可选：always表示永远显示在ActionBar中，如果屏幕空间不够则无法显示，ifRoom表示屏幕空间够的情况下显示在ActionBar中，不够的话就显示在overflow中，never则表示永远显示在overflow中。
接着，重写Activity的onCreateOptionsMenu()方法，代码如下所示：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override
  2. public boolean onCreateOptionsMenu(Menu menu) {
  3. MenuInflater inflater = getMenuInflater();
  4. inflater.inflate(R.menu.main, menu);
  5. return super.onCreateOptionsMenu(menu);
  6. }
这部分代码很简单，仅仅是调用了MenuInflater的inflate()方法来加载menu资源就可以了。现在重新运行一下程序，结果如下图所示：

可以看到，action_compose和action_delete这两个按钮已经在ActionBar中显示出来了，而action_settings这个按钮由于showAsAction属性设置成了never，所以被隐藏到了overflow当中，只要点击一下overflow按钮就可以看到它了。
这里我们注意到，显示在ActionBar上的按钮都只有一个图标而已，我们在title中指定的文字并没有显示出来。没错，title中的内容通常情况下只会在overflow中显示出来，ActionBar中由于屏幕空间有限，默认是不会显示title内容的。但是出于以下几种因素考虑，即使title中的内容无法显示出来，我们也应该给每个item中都指定一个title属性：
  • 当ActionBar中的剩余空间不足的时候，如果Action按钮指定的showAsAction属性是ifRoom的话，该Action按钮就会出现在overflow当中，此时就只有title能够显示了。
  • 如果Action按钮在ActionBar中显示，用户可能通过长按该Action按钮的方式来查看到title的内容。

响应Action按钮的点击事件

当用户点击Action按钮的时候，系统会调用Activity的onOptionsItemSelected()方法，通过方法传入的MenuItem参数，我们可以调用它的getItemId()方法和menu资源中的id进行比较，从而辨别出用户点击的是哪一个Action按钮，比如：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override
  2. public boolean onOptionsItemSelected(MenuItem item) {
  3. switch (item.getItemId()) {
  4. case R.id.action_compose:
  5. Toast.makeText(this,"Compose", Toast.LENGTH_SHORT).show();
  6. return true;
  7. case R.id.action_delete:
  8. Toast.makeText(this, "Delete", Toast.LENGTH_SHORT).show();
  9. return true;
  10. case R.id.action_settings:
  11. Toast.makeText(this,"Settings", Toast.LENGTH_SHORT).show();
  12. return true;
  13. default:
  14. return super.onOptionsItemSelected(item);
  15. }
  16. }
可以看到，我们让每个Action按钮被点击的时候都弹出一个Toast，现在重新运行一下代码，结果如下图所示：



通过Action Bar图标进行导航

启用ActionBar图标导航的功能，可以允许用户根据当前应用的位置来在不同界面之间切换。比如，A界面展示了一个列表，点击某一项之后进入了B界面，这时B界面就应该启用ActionBar图标导航功能，这样就可以回到A界面。
我们可以通过调用setDisplayHomeAsUpEnabled()方法来启用ActionBar图标导航功能，比如：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override
  2. protected void onCreate(Bundle savedInstanceState) {
  3. super.onCreate(savedInstanceState);
  4. setTitle("天气");
  5. setContentView(R.layout.activity_main);
  6. ActionBar actionBar = getActionBar();
  7. actionBar.setDisplayHomeAsUpEnabled(true);
  8. }
现在重新运行一下程序，结果如下图所示：

可以看到，在ActionBar图标的左侧出现了一个向左的箭头，通常情况下这都表示返回的意思，因此最简单的实现就是在它的点击事件里面加入finish()方法就可以了，如下所示：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override
  2. public boolean onOptionsItemSelected(MenuItem item) {
  3. switch (item.getItemId()) {
  4. case android.R.id.home:
  5. finish();
  6. return true;
  7. ……
  8. }
  9. }
当点击ActionBar图标的时候，系统同样会调用onOptionsItemSelected()方法，并且此时的itemId是android.R.id.home，所以finish()方法也就是加在这里的了。
现在看上去，ActionBar导航和Back键的功能貌似是一样的。没错，如果我们只是简单地finish了一下，ActionBar导航和Back键的功能是完全一样的，但ActionBar导航的设计初衷并不是这样的，它和Back键的功能还是有一些区别的，举个例子吧。

上图中的Conversation List是收件箱的主界面，现在我们点击第一封邮件会进入到Conversation1 details界面，然后点击下一封邮件会进入到Conversation 2 details界面，再点击下一封邮箱会进入到Conversation3 details界面。好的，这个时候如果我们按下Back键，应该会回到Conversation 2 details界面，再按一次Back键应该回到Conversation1 details界面，再按一次Back键才会回到Conversation List。而ActionBar导航则不应该表现出这种行为，无论我们当前在哪一个Conversation details界面，点击一下导航按钮都应该回到Conversation List界面才对。
这就是ActionBar导航和Back键在设计上的区别，那么该怎样才能实现这样的功能呢？其实并不复杂，实现标准的ActionBar导航功能只需三步走。
第一步我们已经实现了，就是调用setDisplayHomeAsUpEnabled()方法，并传入true。
第二步需要在AndroidManifest.xml中配置父Activity，如下所示：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <activity
  2. android:name="com.example.actionbartest.MainActivity"
  3. android:logo="@drawable/weather">
  4. <meta-data
  5. android:name="android.support.PARENT_ACTIVITY"
  6. android:value="com.example.actionbartest.LaunchActivity"/>
  7. </activity>
可以看到，这里通过meta-data标签指定了MainActivity的父Activity是LaunchActivity，在Android 4.1版本之后，也可以直接使用android:parentActivityName这个属性来进行指定，如下所示：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <activity
  2. android:name="com.example.actionbartest.MainActivity"
  3. android:logo="@drawable/weather"
  4. android:parentActivityName="com.example.actionbartest.LaunchActivity">
  5. </activity>
第三步则需要对android.R.id.home这个事件进行一些特殊处理，如下所示：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override
  2. public boolean onOptionsItemSelected(MenuItem item) {
  3. switch (item.getItemId()) {
  4. case android.R.id.home:
  5. Intent upIntent = NavUtils.getParentActivityIntent(this);
  6. if (NavUtils.shouldUpRecreateTask(this, upIntent)) {
  7. TaskStackBuilder.create(this)
  8. .addNextIntentWithParentStack(upIntent)
  9. .startActivities();
  10. } else {
  11. upIntent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
  12. NavUtils.navigateUpTo(this, upIntent);
  13. }
  14. return true;
  15. ......
  16. }
  17. }
其中，调用NavUtils.getParentActivityIntent()方法可以获取到跳转至父Activity的Intent，然后如果父Activity和当前Activity是在同一个Task中的，则直接调用navigateUpTo()方法进行跳转，如果不是在同一个Task中的，则需要借助TaskStackBuilder来创建一个新的Task。
这样，就按照标准的规范成功实现ActionBar导航的功能了。

添加Action View

ActionView是一种可以在ActionBar中替换Action按钮的控件，它可以允许用户在不切换界面的情况下通过ActionBar完成一些较为丰富的操作。比如说，你需要完成一个搜索功能，就可以将SeachView这个控件添加到ActionBar中。
为了声明一个ActionView，我们可以在menu资源中通过actionViewClass属性来指定一个控件，例如可以使用如下方式添加SearchView：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <menuxmlns:android="http://schemas.android.com/apk/res/android">
  3. <item
  4. android:id="@+id/action_search"
  5. android:icon="@drawable/ic_action_search"
  6. android:actionViewClass="android.widget.SearchView"
  7. android:showAsAction="ifRoom|collapseActionView"
  8. android:title="@string/action_search"/>
  9. ......
  11. </menu>
注意在showAsAction属性中我们还声明了一个collapseActionView，这个值表示该控件可以被合并成一个Action按钮。
现在重新运行一下程序，效果如下图所示：

OK，果然有一个搜索样式的Action按钮出现了，现在点击一下这个搜索按钮，效果如下图所示：

可以看到，这时SearchView就会展开占满整个ActionBar，而其它的Action按钮由于将showAsAction属性设置成了ifRoom，此时都会隐藏到overflow当中。
如果你还希望在代码中对SearchView的属性进行配置（比如添加监听事件等），完全没有问题，只需要在onCreateOptionsMenu()方法中获取该ActionView的实例就可以了，代码如下所示：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override
  2. public boolean onCreateOptionsMenu(Menu menu) {
  3. MenuInflater inflater = getMenuInflater();
  4. inflater.inflate(R.menu.main, menu);
  5. MenuItem searchItem = menu.findItem(R.id.action_search);
  6. SearchView searchView = (SearchView) searchItem.getActionView();
  7. // 配置SearchView的属性
  8. ......
  9. return super.onCreateOptionsMenu(menu);
  10. }
在得到了SearchView的实例之后，就可以任意地配置它的各种属性了。关于SearchView的更多详细用法，可以参考官方文档http://developer.android.com/guide/topics/search/search-dialog.html 。
除此之外，有些程序可能还希望在ActionView展开和合并的时候显示不同的界面，其实我们只需要去注册一个ActionView的监听器就能实现这样的功能了，代码如下所示：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override
  2. public boolean onCreateOptionsMenu(Menu menu) {
  3. MenuInflater inflater = getMenuInflater();
  4. inflater.inflate(R.menu.main, menu);
  5. MenuItem searchItem = menu.findItem(R.id.action_search);
  6. searchItem.setOnActionExpandListener(new OnActionExpandListener() {
  7. @Override
  8. public boolean onMenuItemActionExpand(MenuItem item) {
  9. Log.d("TAG", "on expand");
  10. return true;
  11. }
  13. @Override
  14. public boolean onMenuItemActionCollapse(MenuItem item) {
  15. Log.d("TAG", "on collapse");
  16. return true;
  17. }
  18. });
  19. return super.onCreateOptionsMenu(menu);
  20. }
可以看到，调用MenuItem的setOnActionExpandListener()方法就可以注册一个监听器了，当SearchView展开的时候就会回调onMenuItemActionExpand()方法，当SearchView合并的时候就会调用onMenuItemActionCollapse()方法，我们在这两个方法中进行相应的UI操作就可以了。

Overflow按钮不显示的情况

虽然现在我们已经掌握了不少ActionBar的用法，但是当你真正去使用它的时候还是可能会遇到各种各样的问题，比如很多人都会碰到overflow按钮不显示的情况。明明是同样的一份代码，overflow按钮在有些手机上会显示，而在有些手机上偏偏就不显示，这是为什么呢？后来我总结了一下，overflow按钮的显示情况和手机的硬件情况是有关系的，如果手机没有物理Menu键的话，overflow按钮就可以显示，如果有物理Menu键的话，overflow按钮就不会显示出来。比如我们启动一个有Menu键的模拟器，然后将代码运行到该模拟器上，结果如下图所示：

可以看到，ActionBar最右边的overflow按钮不见了！那么此时我们如何查看隐藏在overflow中的Action按钮呢？其实非常简单，按一下Menu键，隐藏的内容就会从底部出来了，如下图所示：

看到这里相信不少朋友都想吐槽一下了，这显然是一种非常蛋疼的设计，在不同手机上竟然显示了不同的界面，而且操作方法也完全不一样，这样会给用户一种非常不习惯的感觉。话说Google为什么要把ActionBar的overflow设计成这样我也不太理解，但是我们还是有办法改变这一默认行为的。
实际上，在ViewConfiguration这个类中有一个叫做sHasPermanentMenuKey的静态变量，系统就是根据这个变量的值来判断手机有没有物理Menu键的。当然这是一个内部变量，我们无法直接访问它，但是可以通过反射的方式修改它的值，让它永远为false就可以了，代码如下所示：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override
  2. protected void onCreate(Bundle savedInstanceState) {
  3. ......
  4. setOverflowShowingAlways();
  5. }
  7. private void setOverflowShowingAlways() {
  8. try {
  9. ViewConfiguration config = ViewConfiguration.get(this);
  10. Field menuKeyField = ViewConfiguration.class.getDeclaredField("sHasPermanentMenuKey");
  11. menuKeyField.setAccessible(true);
  12. menuKeyField.setBoolean(config, false);
  13. } catch (Exception e) {
  14. e.printStackTrace();
  15. }
  16. }
这里我们在onCreate()方法的最后调用了setOverflowShowingAlways()方法，而这个方法的内部就是使用反射的方式将sHasPermanentMenuKey的值设置成false，现在重新运行一下代码，结果如下图所示：

可以看到，即使是在有Menu键的手机上，也能让overflow按钮显示出来了，这样就可以大大增加我们软件界面和操作的统一性。

让Overflow中的选项显示图标

如果你点击一下overflow按钮去查看隐藏的Action按钮，你会发现这部分Action按钮都是只显示文字不显示图标的，如下图所示：

这是官方的默认效果，Google认为隐藏在overflow中的Action按钮都应该只显示文字。当然，如果你认为这样不够美观，希望在overflow中的Action按钮也可以显示图标，我们仍然可以想办法来改变这一默认行为。
其实，overflow中的Action按钮应不应该显示图标，是由MenuBuilder这个类的setOptionalIconsVisible方法来决定的，如果我们在overflow被展开的时候给这个方法传入true，那么里面的每一个Action按钮对应的图标就都会显示出来了。调用的方法当然仍然是用反射了，代码如下所示：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override
  2. public boolean onMenuOpened(int featureId, Menu menu) {
  3. if (featureId == Window.FEATURE_ACTION_BAR && menu !=null) {
  4. if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
  5. try {
  6. Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
  7. m.setAccessible(true);
  8. m.invoke(menu, true);
  9. } catch (Exception e) {
  10. }
  11. }
  12. }
  13. return super.onMenuOpened(featureId, menu);
  14. }
可以看到，这里我们重写了一个onMenuOpened()方法，当overflow被展开的时候就会回调这个方法，接着在这个方法的内部通过返回反射的方法将MenuBuilder的setOptionalIconsVisible变量设置为true就可以了。
现在重新运行一下代码，结果如下图所示：

好了，目前为止我们已经把ActionBar的基础知识介绍完了，那么今天的讲解就到这里，下篇文章中我会带领大家一起更深入地了解ActionBar，感兴趣的朋友请继续阅读Android ActionBar完全解析，使用官方推荐的最佳导航栏(下)。

转载请注明出处：http://blog.csdn.net/guolin_blog/article/details/25466665

本篇文章主要内容来自于Android Doc，我翻译之后又做了些加工，英文好的朋友也可以直接去读原文。

http://developer.android.com/guide/topics/ui/actionbar.html

限于篇幅的原因，在上篇文章中我们只学习了ActionBar基础部分的知识，那么本篇文章我们将接着上一章的内容继续学习，探究一下ActionBar更加高级的知识。如果你还没有看过前面一篇文章的话，建议先去阅读Android ActionBar完全解析，使用官方推荐的最佳导航栏(上)。

添加Action Provider

和Action View有点类似，Action Provider也可以将一个Action按钮替换成一个自定义的布局。但不同的是，Action Provider能够完全控制事件的所有行为，并且还可以在点击的时候显示子菜单。

为了添加一个Action Provider，我们需要在<item>标签中指定一个actionViewClass属性，在里面填入Action Provider的完整类名。我们可以通过继承ActionProvider类的方式来创建一个自己的Action Provider，同时，Android也提供好了几个内置的Action Provider，比如说ShareActionProvider。

由于每个Action Provider都可以自由地控制事件响应，所以它们不需要在onOptionsItemSelected()方法中再去监听点击事件，而是应该在onPerformDefaultAction()方法中去执行相应的逻辑。

那么我们就先来看一下ShareActionProvider的简单用法吧，编辑menu资源文件，在里面加入ShareActionProvider的声明，如下所示：

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <menuxmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. tools:context="com.example.actionbartest.MainActivity">
  5. <item
  6. android:id="@+id/action_share"
  7. android:actionProviderClass="android.widget.ShareActionProvider"
  8. android:showAsAction="ifRoom"
  9. android:title="@string/action_share"/>
  10. ......
  12. </menu>
注意，ShareActionProvider会自己处理它的显示和事件，但我们仍然要记得给它添加一个title，以防止它会在overflow当中出现。

接着剩下的事情就是通过Intent来定义出你想分享哪些东西了，我们只需要在onCreateOptionsMenu()中调用MenuItem的getActionProvider()方法来得到该ShareActionProvider对象，再通过setShareIntent()方法去选择构建出什么样的一个Intent就可以了。代码如下所示：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override
  2. public boolean onCreateOptionsMenu(Menu menu) {
  3. MenuInflater inflater = getMenuInflater();
  4. inflater.inflate(R.menu.main, menu);
  5. MenuItem shareItem = menu.findItem(R.id.action_share);
  6. ShareActionProvider provider = (ShareActionProvider) shareItem.getActionProvider();
  7. provider.setShareIntent(getDefaultIntent());
  8. ......
  9. return super.onCreateOptionsMenu(menu);
  10. }
  12. private Intent getDefaultIntent() {
  13. Intent intent = new Intent(Intent.ACTION_SEND);
  14. intent.setType("image/*");
  15. return intent;
  16. }
可以看到，这里我们通过getDefaultIntent()方法来构建了一个Intent，该Intent表示会将所有可以共享图片的程度都列出来。重新运行一下程序，效果如下图所示：


细心的你一定观察到了，这个ShareActionProvider点击之后是可以展开的，有点类似于overflow的效果，这就是Action Provider的子菜单。除了使用ShareActionProvider之外，我们也可以自定义一个Action Provider，比如说如果想要建立一个拥有两项子菜单的Action Provider，就可以这样写：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public class MyActionProviderextends ActionProvider {
  3. public MyActionProvider(Context context) {
  4. super(context);
  5. }
  7. @Override
  8. public View onCreateActionView() {
  9. return null;
  10. }
  12. @Override
  13. public void onPrepareSubMenu(SubMenu subMenu) {
  14. subMenu.clear();
  15. subMenu.add("sub item 1").setIcon(R.drawable.ic_launcher)
  16. .setOnMenuItemClickListener(new OnMenuItemClickListener() {
  17. @Override
  18. public boolean onMenuItemClick(MenuItem item) {
  19. return true;
  20. }
  21. });
  22. subMenu.add("sub item 2").setIcon(R.drawable.ic_launcher)
  23. .setOnMenuItemClickListener(new OnMenuItemClickListener() {
  24. @Override
  25. public boolean onMenuItemClick(MenuItem item) {
  26. return false;
  27. }
  28. });
  29. }
  31. @Override
  32. public boolean hasSubMenu() {
  33. return true;
  34. }
  36. }
这里我们新建了一个MyActionProvider继承自ActionProvider，为了表示这个Action Provider是有子菜单的，需要重写hasSubMenu()方法并返回true，然后在onPrepareSubMenu通过调用SubMenu的add()方法添加子菜单。

接着修改menu资源，在里面加入MyActionProvider的声明：

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <menuxmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. tools:context="com.example.actionbartest.MainActivity">
  5. <item
  6. android:id="@+id/action_share"
  7. android:actionProviderClass="com.example.actionbartest.MyActionProvider"
  8. android:icon="@drawable/ic_launcher"
  9. android:showAsAction="ifRoom"
  10. android:title="@string/action_share"/>
  11. ......
  13. </menu>
现在重新运行一下代码，结果如图所示：


添加导航Tabs

Tabs的应用可以算是非常广泛了，它可以使得用户非常轻松地在你的应用程序中切换不同的视图。而Android官方更加推荐使用ActionBar中提供的Tabs功能，因为它更加的智能，可以自动适配各种屏幕的大小。比如说，在平板上屏幕的空间非常充足，Tabs会和Action按钮在同一行显示，如下图所示：


而如果是在手机上，屏幕的空间不够大的话，Tabs和Action按钮则会分为两行显示，如下图所示：


下面我们就来看一下如何使用ActionBar提供的Tab功能，大致可以分为以下几步：

1. 实现ActionBar.TabListener接口，这个接口提供了Tab事件的各种回调，比如当用户点击了一个Tab时，你就可以进行切换Tab的操作。

2.为每一个你想添加的Tab创建一个ActionBar.Tab的实例，并且调用setTabListener()方法来设置ActionBar.TabListener。除此之外，还需要调用setText()方法来给当前Tab设置标题。

3.最后调用ActionBar的addTab()方法将创建好的Tab添加到ActionBar中。

看起来并不复杂，总共就只有三步，那么我们现在就来尝试一下吧。首先第一步需要创建一个实现ActionBar.TabListener接口的类，代码如下所示：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public class TabListener<Textends Fragment> implements ActionBar.TabListener {
  2. private Fragment mFragment;
  3. private final Activity mActivity;
  4. private final String mTag;
  5. private final Class<T> mClass;
  7. public TabListener(Activity activity, String tag, Class<T> clz) {
  8. mActivity = activity;
  9. mTag = tag;
  10. mClass = clz;
  11. }
  13. public void onTabSelected(Tab tab, FragmentTransaction ft) {
  14. if (mFragment == null) {
  15. mFragment = Fragment.instantiate(mActivity, mClass.getName());
  16. ft.add(android.R.id.content, mFragment, mTag);
  17. } else {
  18. ft.attach(mFragment);
  19. }
  20. }
  22. public void onTabUnselected(Tab tab, FragmentTransaction ft) {
  23. if (mFragment != null) {
  24. ft.detach(mFragment);
  25. }
  26. }
  28. public void onTabReselected(Tab tab, FragmentTransaction ft) {
  29. }
  30. }
这段代码并不长，我们简单分析一下。当Tab被选中的时候会调用onTabSelected()方法，在这里我们先判断mFragment是否为空，如果为空的话就创建Fragment的实例并调用FragmentTransaction的add()方法，如果不会空的话就调用FragmentTransaction的attach()方法。

而当Tab没有被选中的时候，则调用FragmentTransaction的detach()方法，将UI资源释放掉。

当Tab被重新选中的时候会调用onTabReselected()方法，如果没有特殊需求的话，通常是不需要进行处理的。

接下来第二步要给每一个Tab创建一个ActionBar.Tab的实例，在此之前要先准备好每个Tab页对应的Fragment。比如说这里我们想创建两个Tab页，Artist和Album，那就要先准备好这两个Tab页对应的Fragment。首先新建ArtistFragment，代码如下所示：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public class ArtistFragmentextends Fragment {
  3. @Override
  4. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  5. Bundle savedInstanceState) {
  6. TextView textView = new TextView(getActivity());
  7. textView.setText("Artist Fragment");
  8. textView.setGravity(Gravity.CENTER_HORIZONTAL);
  9. LinearLayout layout = new LinearLayout(getActivity());
  10. LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
  11. layout.addView(textView, params);
  12. return layout;
  13. }
  15. }
没有什么实质性的代码，只是在TextView中显示了Artist Fragment这个字符串。

然后如法炮制，新建AlbumFragment，代码如下所示：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public class AlbumFragmentextends Fragment {
  3. @Override
  4. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  5. Bundle savedInstanceState) {
  6. TextView textView = new TextView(getActivity());
  7. textView.setText("Album Fragment");
  8. textView.setGravity(Gravity.CENTER_HORIZONTAL);
  9. LinearLayout layout = new LinearLayout(getActivity());
  10. LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
  11. layout.addView(textView, params);
  12. return layout;
  13. }
  15. }
Fragment都准备好了之后，接下来就可以开始创建Tab实例了，创建好了之后则再调用addTab()方法添加到ActionBar当中，这两步通常都是在Activity的onCreate()方法中执行的，代码如下：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. @Override
  2. protected void onCreate(Bundle savedInstanceState) {
  3. super.onCreate(savedInstanceState);
  4. setTitle("天气");
  5. ActionBar actionBar = getActionBar();
  6. actionBar.setDisplayHomeAsUpEnabled(true);
  7. setOverflowShowingAlways();
  8. actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
  9. Tab tab = actionBar
  10. .newTab()
  11. .setText(R.string.artist)
  12. .setTabListener(
  13. new TabListener<ArtistFragment>(this,"artist",
  14. ArtistFragment.class));
  15. actionBar.addTab(tab);
  16. tab = actionBar
  17. .newTab()
  18. .setText(R.string.album)
  19. .setTabListener(
  20. new TabListener<AlbumFragment>(this,"album",
  21. AlbumFragment.class));
  22. actionBar.addTab(tab);
  23. }
可以看到，这里是使用连缀的写法来创建Tab的。首先调用ActionBar的newTab()方法来创建一个Tab实例，接着调用了setText()方法来设置标题，然后再调用setTabListener()方法来设置事件监听器，最后再调用ActionBar的addTab()方法将Tab添加到ActionBar中。
好了，这样的话代码就编写完了，重新运行一下程序，效果如下图所示：


自定义ActionBar样式

虽说ActionBar给用户提供了一种全局统一的界面风格和操作方式，但这并不意味着所有应用程序的ActionBar都必须要长得一模一样。如果你需要修改ActionBar的样式来更加好地适配你的应用，可以非常简单地通过Android样式和主题来实现。

其实Android内置的几个Activity主题中就已经包含了"dark"或"light"这样的ActionBar样式了，同时你也可以继承这些主题，然后进行更深一步的定制。

1. 使用主题

Android中有两个最基本的Activity主题可以用于指定ActionBar的颜色，分别是：
  • Theme.Holo，这是一个深色系的主题。
  • Theme.Holo.Light，这是一个浅色系的主题。
深色系主题样式的效果如下图所示：

浅色系主题样式的效果如下图所示：

你可以将这些主题应用到你的整个应用程序，也可以只应用于某个Activity。通过在AndroidManifest.xml文件中给<application>或<activity>标签指定android:theme属性就可以实现了。比如：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <applicationandroid:theme="@android:style/Theme.Holo.Light" .../>
如果你只想让ActionBar使用深色系的主题，而Activity的内容部分仍然使用浅色系的主题，可以通过声明Theme.Holo.Light.DarkActionBar这个主题来实现，效果如下图所示：

2. 自定义背景

如果想要修改ActionBar的背景，我们可以通过创建一个自定义主题并重写actionBarStyle属性来实现。这个属性可以指向另外一个样式，然后我们在这个样式中重写background这个属性就可以指定一个drawable资源或颜色，从而实现自定义背景的功能。
编辑styles.xml文件，在里面加入一个自定义的主题，如下所示：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <resources>
  3. <stylename="CustomActionBarTheme"parent="@android:style/Theme.Holo.Light">
  4. <itemname="android:actionBarStyle">@style/MyActionBar</item>
  5. </style>
  7. <stylename="MyActionBar"parent="@android:style/Widget.Holo.Light.ActionBar">
  8. <itemname="android:background">#f4842d</item>
  9. </style>
  11. </resources>
可以看到，这里我们定义了一个CustomActionBarTheme主题，并让它继承自Theme.Holo.Light。然后在其内部重写了actionBarStyle这个属性，然后将这个属性指向了MyActionBar这个样式，我们在这个样式中又重写了background属性，并给它指定了一个背景色。
现在重新运行一下程序，效果如下图所示：

这样我们就成功修改ActionBar的背景色了。不过现在看上去还有点怪怪的，因为只是ActionBar的背景色改变了，Tabs的背景色还是原来的样子，这样就感觉不太协调。那么下面我们马上就来修改一下Tabs的背景色，编辑styles.xml文件，如下所示：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <resources>
  3. <stylename="CustomActionBarTheme"parent="@android:style/Theme.Holo.Light">
  4. <itemname="android:actionBarStyle">@style/MyActionBar</item>
  5. </style>
  7. <stylename="MyActionBar"parent="@android:style/Widget.Holo.Light.ActionBar">
  8. <itemname="android:background">#f4842d</item>
  9. <itemname="android:backgroundStacked">#d27026</item>
  10. </style>
  12. </resources>
可以看到，这里又重写了backgroundStacked属性，这个属性就是用于指定Tabs背景色的。那么再次重新运行程序，效果如下图所示：

3. 自定义文字颜色

现在整个ActionBar的颜色是属于偏暗系的，而ActionBar中文字的颜色又偏偏是黑色的，所以看起来并不舒服，那么接下来我们就学习一下如果自定义文字颜色，将文字颜色改成白色。
修改styles.xml文件，如下所示：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <resources>
  3. ......
  5. <stylename="MyActionBar"parent="@android:style/Widget.Holo.Light.ActionBar">
  6. ......
  7. <itemname="android:titleTextStyle">@style/MyActionBarTitleText</item>
  8. </style>
  10. <stylename="MyActionBarTitleText"parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
  11. <itemname="android:textColor">#fff</item>
  12. </style>
  14. </resources>
可以看到，这里在MyActionBar样式里面重写了titleTextStyle属性，并将它指向了另一个自定义样式MyActionBarTitleText，接着我们在这个样式中指定textColor的颜色是#fff，也就是白色。
现在重新运行一下程序，结果如下图所示：

OK，ActionBar标题文字的颜色已经成功改成白色了，那Tab标题的文字又该怎么修改呢？继续编辑styles.xml文件，如下所示：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <resources>
  3. <stylename="CustomActionBarTheme"parent="@android:style/Theme.Holo.Light">
  4. <itemname="android:actionBarStyle">@style/MyActionBar</item>
  5. <itemname="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
  6. </style>
  8. <stylename="MyActionBarTabText"
  9. parent="@android:style/Widget.Holo.ActionBar.TabText">
  10. <itemname="android:textColor">#fff</item>
  11. </style>
  13. </resources>
这里我们在CustomActionBarTheme主题中重写actionBarTabTextStyle属性，并将它指向一个新建的MyActionBarTabText样式，然后在这个样式中重写textColor属性，将颜色指定为白色即可。
重新运行一下程序，结果如下图所示：

4. 自定义Tab Indicator

为了可以明确分辨出我们当前选中的是哪一个Tab项，通常情况下都会在选中Tab的下面加上一条横线作为标识，这被称作Tab Indicator。那么上图中的Tab Indicator是蓝色的，明显和整体风格不相符，所以我们接下来就学习一下如何自定义Tab Indicator。
首先我们需要重写actionBarTabStyle这个属性，然后将它指向一个新建的Tab样式，然后重写background这个属性即可。需要注意的是，background必须要指定一个state-list drawable文件，这样在各种不同状态下才能显示出不同的效果。
那么在开始之前，首先我们需要准备四张图片，分别用于表示Tab的四种状态，如下所示：

这四张图片分别表示Tab选中未按下，选中且按下，未选中未按下，未选中且按下这四种状态，那么接着新建res/drawable/actionbar_tab_indicator.xml文件，代码如下所示：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <selectorxmlns:android="http://schemas.android.com/apk/res/android">
  4. <itemandroid:state_selected="false"
  5. android:state_pressed="false"
  6. android:drawable="@drawable/tab_unselected"/>
  7. <itemandroid:state_selected="true"
  8. android:state_pressed="false"
  9. android:drawable="@drawable/tab_selected"/>
  10. <itemandroid:state_selected="false"
  11. android:state_pressed="true"
  12. android:drawable="@drawable/tab_unselected_pressed"/>
  13. <itemandroid:state_selected="true"
  14. android:state_pressed="true"
  15. android:drawable="@drawable/tab_selected_pressed"/>
  17. </selector>
四种状态分别引用了四张图片，这样就把state-list drawable文件写好了。接着修改style.xml文件，代码如下所示：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <resources>
  3. <stylename="CustomActionBarTheme"parent="@android:style/Theme.Holo.Light">
  4. ......
  5. <itemname="android:actionBarTabStyle">@style/MyActionBarTabs</item>
  6. </style>
  8. <stylename="MyActionBarTabs"parent="@android:style/Widget.Holo.ActionBar.TabView">
  9. <itemname="android:background">@drawable/actionbar_tab_indicator</item>
  10. </style>
  12. </resources>
这里先是重写了actionBarTabStyle这个属性，并将它指向了另一个自定义样式MyActionBarTabs，接着在这个样式中重写background属性，然后指向我们刚才创建的actionbar_tab_indicator即可。
现在重新运行一下程序，效果如下所示：

可以看到，Tab Indicator的颜色已经变成了白色，这样看上去就协调得多了。
除此之外，Action Bar还有许许多多的属性可以进行自定义，这里我们无法一一涵盖到本篇文章中，更多的自定义属性请参考官方文档进行学习。
好了，本篇文章的讲解就到这里，结合上下两篇，我们已经把ActionBar中最常用的功能都学会了，下篇文章中我会带领大家一起实战Action Bar的用法，感兴趣的朋友请继续阅读Android ActionBar应用实战，高仿微信主界面的设计 。

转载请注明出处：http://blog.csdn.net/guolin_blog/article/details/26365683

经过前面两篇文章的学习，我想大家对ActionBar都已经有一个相对较为深刻的理解了。唯一欠缺的是，前面我们都只是学习了理论知识而已，虽然知识点已经掌握了，但是真正投入到项目实战当中时会不会掉链子还很难说。那么不用担心，本篇文章我就将带领大家一起进入ActionBar的应用实战，将理论和实践完美结合到一起。

如果你还没有看过我的前两篇文章，建议先去阅读一下 Android ActionBar完全解析，使用官方推荐的最佳导航栏(上)和 Android ActionBar完全解析，使用官方推荐的最佳导航栏(下)。

相信大家都会认定微信是在手机上最火的应用程序了，几乎每个人的手机上都有安装它。微信除了功能非常强大之外，界面也是做得相当美观，它的ActionBar让人看着有一种赏心悦目的感觉，如下图所示：


作为手机应用程序中的技术标杆，我们自然应该多多向微信学习，那么今天实战的主题，就是模仿微信主界面的实现。

首先新建一个Android项目，起名叫作WeChatSample。既然是要实现ActionBar，那么第一步当然就是编辑menu目录下的main.xml文件了，代码如下所示：

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <menuxmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. tools:context="com.example.wechatsample.MainActivity">
  5. <item
  6. android:id="@+id/action_search"
  7. android:actionViewClass="android.widget.SearchView"
  8. android:icon="@drawable/actionbar_search_icon"
  9. android:showAsAction="ifRoom|collapseActionView"
  10. android:title="@string/action_search"/>
  11. <item
  12. android:id="@+id/action_plus"
  13. android:actionProviderClass="com.example.wechatsample.PlusActionProvider"
  14. android:icon="@drawable/actionbar_add_icon"
  15. android:showAsAction="ifRoom"
  16. android:title="@string/action_plus"/>
  17. <item
  18. android:id="@+id/action_album"
  19. android:icon="@drawable/ofm_photo_icon"
  20. android:title="@string/action_album"/>
  21. <item
  22. android:id="@+id/action_collection"
  23. android:icon="@drawable/ofm_collect_icon"
  24. android:title="@string/action_collection"/>
  25. <item
  26. android:id="@+id/action_card"
  27. android:icon="@drawable/ofm_card_icon"
  28. android:title="@string/action_card"/>
  29. <item
  30. android:id="@+id/action_settings"
  31. android:icon="@drawable/ofm_setting_icon"
  32. android:title="@string/action_settings"/>
  33. <item
  34. android:id="@+id/action_feed"
  35. android:icon="@drawable/ofm_feedback_icon"
  36. android:title="@string/action_feed"/>
  38. </menu>
这个文件中每个属性的含义我在前两篇文章中都有讲解过，这里就不再重复说明了。需要注意的是，<item>标签中指定的icon图标都是我事先准备好的，指定的title文字都是定义在string.xml中的，最后我会把源码附上，大家可以在源码中找到这些图标和文字。

观察上面的main.xml，你会发现里面有一个自定义的Action Provider，叫作PlusActionProvider。这个主要是用于模拟微信中那个加号的子菜单的，下面我们就来实现这个类：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public class PlusActionProviderextends ActionProvider {
  3. private Context context;
  5. public PlusActionProvider(Context context) {
  6. super(context);
  7. this.context = context;
  8. }
  10. @Override
  11. public View onCreateActionView() {
  12. return null;
  13. }
  15. @Override
  16. public void onPrepareSubMenu(SubMenu subMenu) {
  17. subMenu.clear();
  18. subMenu.add(context.getString(R.string.plus_group_chat))
  19. .setIcon(R.drawable.ofm_group_chat_icon)
  20. .setOnMenuItemClickListener(new OnMenuItemClickListener() {
  21. @Override
  22. public boolean onMenuItemClick(MenuItem item) {
  23. return true;
  24. }
  25. });
  26. subMenu.add(context.getString(R.string.plus_add_friend))
  27. .setIcon(R.drawable.ofm_add_icon)
  28. .setOnMenuItemClickListener(new OnMenuItemClickListener() {
  29. @Override
  30. public boolean onMenuItemClick(MenuItem item) {
  31. return false;
  32. }
  33. });
  34. subMenu.add(context.getString(R.string.plus_video_chat))
  35. .setIcon(R.drawable.ofm_video_icon)
  36. .setOnMenuItemClickListener(new OnMenuItemClickListener() {
  37. @Override
  38. public boolean onMenuItemClick(MenuItem item) {
  39. return false;
  40. }
  41. });
  42. subMenu.add(context.getString(R.string.plus_scan))
  43. .setIcon(R.drawable.ofm_qrcode_icon)
  44. .setOnMenuItemClickListener(new OnMenuItemClickListener() {
  45. @Override
  46. public boolean onMenuItemClick(MenuItem item) {
  47. return false;
  48. }
  49. });
  50. subMenu.add(context.getString(R.string.plus_take_photo))
  51. .setIcon(R.drawable.ofm_camera_icon)
  52. .setOnMenuItemClickListener(new OnMenuItemClickListener() {
  53. @Override
  54. public boolean onMenuItemClick(MenuItem item) {
  55. return false;
  56. }
  57. });
  58. }
  60. @Override
  61. public boolean hasSubMenu() {
  62. return true;
  63. }
  65. }
自定义Action Provider的方法我也已经在上一篇文章中介绍过了，相信你看这个类的时候应该感觉非常简单易懂。这里我们在PlusActionProvider中定义了五个子菜单，每个子菜单中都指定了一个标题和一个图标，分别就对应了微信中的那五个子菜单。另外，这里虽然给每个子菜单都定义了一个点击事件，但是点击件事里面的实现都是空的，因为我们本篇文章只是模仿微信的界面实现而已，功能就不谈啦。

接着修改MainActivity中的代码，如下所示：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public class MainActivityextends Activity {
  3. @Override
  4. protected void onCreate(Bundle savedInstanceState) {
  5. super.onCreate(savedInstanceState);
  6. setContentView(R.layout.activity_main);
  7. setOverflowShowingAlways();
  8. }
  10. @Override
  11. public boolean onCreateOptionsMenu(Menu menu) {
  12. getMenuInflater().inflate(R.menu.main, menu);
  13. return true;
  14. }
  16. @Override
  17. public boolean onMenuOpened(int featureId, Menu menu) {
  18. if (featureId == Window.FEATURE_ACTION_BAR && menu !=null) {
  19. if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
  20. try {
  21. Method m = menu.getClass().getDeclaredMethod(
  22. "setOptionalIconsVisible", Boolean.TYPE);
  23. m.setAccessible(true);
  24. m.invoke(menu, true);
  25. } catch (Exception e) {
  26. }
  27. }
  28. }
  29. return super.onMenuOpened(featureId, menu);
  30. }
  32. private void setOverflowShowingAlways() {
  33. try {
  34. ViewConfiguration config = ViewConfiguration.get(this);
  35. Field menuKeyField = ViewConfiguration.class
  36. .getDeclaredField("sHasPermanentMenuKey");
  37. menuKeyField.setAccessible(true);
  38. menuKeyField.setBoolean(config, false);
  39. } catch (Exception e) {
  40. e.printStackTrace();
  41. }
  42. }
  44. }
代码不长，并且全都是你熟悉的，onCreateOptionsMenu()方法中去加载main.xml文件，onMenuOpened()方法用于让隐藏在overflow当中的Action按钮的图标显示出来，而setOverflowShowingAlways()方法则是屏蔽掉物理Menu键，不然在有物理Menu键的手机上，overflow按钮会显示不出来。

现在我们已经把ActionBar的界面都实现好了，但是如果你现在运行一下会发现，效果和微信还差得比较远，因为在字体的颜色和大小等方面我们还没有进行微调，因此接下来我们还需要自定义ActionBar的样子。修改styles.xml文件，代码如下所示：

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <resourcesxmlns:android="http://schemas.android.com/apk/res/android">
  3. <stylename="AppBaseTheme"parent="android:Theme.Holo.Light.DarkActionBar">
  4. <itemname="android:actionBarStyle">@style/WeChatActionBar</item>
  5. <itemname="android:itemBackground">@drawable/actionbar_bg_selector</item>
  6. <itemname="android:actionBarItemBackground">@drawable/actionbar_bg_selector</item>
  7. <itemname="android:itemTextAppearance">@style/WeChatActionBarOverflow</item>
  8. <itemname="android:actionOverflowButtonStyle">@style/WeChatActionButtonOverflow</item>
  9. </style>
  11. <stylename="WeChatActionBar"parent="@android:style/Widget.Holo.ActionBar">
  12. <itemname="android:background">#303537</item>
  13. <itemname="android:titleTextStyle">@style/WeChatActionBarTitleText</item>
  14. </style>
  16. <stylename="WeChatActionBarTitleText"parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
  17. <itemname="android:textColor">#cfcfcf</item>
  18. <itemname="android:textSize">17sp</item>
  19. </style>
  21. <stylename="WeChatActionBarOverflow"parent="@android:style/Widget.ActionButton.Overflow">
  22. <itemname="android:textSize">16sp</item>
  23. </style>
  25. <stylename="WeChatActionButtonOverflow"parent="android:style/Widget.Holo.ActionButton.Overflow">
  26. <itemname="android:src">@drawable/actionbar_more_icon</item>
  27. </style>
  29. </resources>
这里我对ActionBar的背景色，标题文字颜色和大小，子菜单背景色等方便进行了调整，使得和微信的整体样式完全一致，其中用到的各种图片也是我事先放在drawable文件夹中的。自定义ActionBar样式的方法我在上一篇文章有介绍过，不熟悉的朋友可以再去参考一下。

最后，AndroidManifest.xml中还需要稍微进行一点修改，如下所示：

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <application
  2. android:allowBackup="true"
  3. android:icon="@drawable/ic_launcher"
  4. android:label="@string/app_name"
  5. android:logo="@drawable/logo"
  6. android:theme="@style/AppTheme">
  7. <activity
  8. android:name="com.example.wechatsample.MainActivity"
  9. android:icon="@drawable/logo"
  10. android:label="@string/app_name">
  11. <SPANstyle="WHITE-SPACE: pre"></SPAN>......
  12. </activity>
  13. </application>

在<applicationi>标签中增加了一个logo属性，在<activity>标签中增加了一个icon属性。现在运行一下程序，效果如下图所示：


可以看到，我们的界面已经和微信非常相似了，几乎已经可以以假乱真了！哈哈，小得意一下。不过ActionBar如果可以写成这个样子，你在这一方面的技术也就基本算得上是过关了。

但是这还没有结束呢，虽说最顶部一行的ActionBar已经成功实现了，可下面的聊天、发现、通讯录这三个Tab我们还没做呢。如此高端大气上档次的功能是不能就这么放过的，因此下面我们就来探究一下如何才能实现微信那样的Tab效果。

虽说在上一篇文章当中已经讲解过如何在ActionBar当中创建Tab了，但是这里我并不准备使用它，因为它的灵活性不够强，很难做出和微信一模一样的Tab效果。而ActionBar Tab的替代品也很多，我们可以自己写，也可以使用网上现有的开源框架，PagerSlidingTabStrip这个框架就挺不错，这里简单和稳定起见，我们就直接使用它了。

PagerSlidingTabStrip是GitHub上的一个开源框架，由Andreas Stuetz编写，它可以完成和ActionBar Tab基本类似的功能，不过由于是完全开源的，我们可以随意修改其中的代码，因而扩展性非常好。

那么开始吧，首先需要将PagerSlidingTabStrip的源码下载下来，并集成到我们的项目当中，PagerSlidingTabStrip的GitHub主页地址是：https://github.com/astuetz/PagerSlidingTabStrip 。

具体集成的方法相信大家都会(和SlidingMenu，Universal-Image-Loader等都是一样的)，这里我就不再赘述了。需要注意的是，PagerSlidingTabStrip原生的代码也是实现不了和微信完全一样的效果的，需要我们在其源码的基础上进行修改，不过由于PagerSlidingTabStrip的源码比较长，我就不把修改过后的代码贴上来了，大家可以随后下载WeChatSample的源码，在这里可以找到修改后的PagerSlidingTabStrip代码。

那么集成完了之后接着就需要来编写功能了，修改activity_main.xml.xml(也就是MainActivity对应的布局文件)中的代码，如下所示：

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent">
  6. <com.astuetz.PagerSlidingTabStrip
  7. android:id="@+id/tabs"
  8. android:layout_width="match_parent"
  9. android:layout_height="40dp"/>
  11. <android.support.v4.view.ViewPager
  12. android:id="@+id/pager"
  13. android:layout_width="match_parent"
  14. android:layout_height="wrap_content"
  15. android:layout_below="@+id/tabs"/>
  17. </RelativeLayout>
比较简单，其中放置了两个控件，PagerSlidingTabStrip在最顶部，ViewPager在PagerSlidingTabStrip的下面。

接着创建ChatFragment、FoundFragment和ContactsFragment，分别对应着聊天、发现、通讯录这三个界面，Fragment中只需放置一个TextView用于表示这个界面即可，ChatFragment如下所示：

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public class ChatFragmentextends Fragment {
  2. @Override
  3. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  4. Bundle savedInstanceState) {
  5. LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
  6. FrameLayout fl = new FrameLayout(getActivity());
  7. fl.setLayoutParams(params);
  8. DisplayMetrics dm = getResources().getDisplayMetrics();
  9. final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,8, dm);
  10. TextView v = new TextView(getActivity());
  11. params.setMargins(margin, margin, margin, margin);
  12. v.setLayoutParams(params);
  13. v.setLayoutParams(params);
  14. v.setGravity(Gravity.CENTER);
  15. v.setText("聊天界面");
  16. v.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,12, dm));
  17. fl.addView(v);
  18. return fl;
  19. }
  20. }
FoundFragment如下所示：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public class FoundFragmentextends Fragment {
  2. @Override
  3. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  4. Bundle savedInstanceState) {
  5. LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
  6. FrameLayout fl = new FrameLayout(getActivity());
  7. fl.setLayoutParams(params);
  8. DisplayMetrics dm = getResources().getDisplayMetrics();
  9. final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,8, dm);
  10. TextView v = new TextView(getActivity());
  11. params.setMargins(margin, margin, margin, margin);
  12. v.setLayoutParams(params);
  13. v.setLayoutParams(params);
  14. v.setGravity(Gravity.CENTER);
  15. v.setText("发现界面");
  16. v.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,12, dm));
  17. fl.addView(v);
  18. return fl;
  19. }
  20. }
ContactsFragment如下所示：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public class ContactsFragmentextends Fragment {
  2. @Override
  3. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  4. Bundle savedInstanceState) {
  5. LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
  6. FrameLayout fl = new FrameLayout(getActivity());
  7. fl.setLayoutParams(params);
  8. DisplayMetrics dm = getResources().getDisplayMetrics();
  9. final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,8, dm);
  10. TextView v = new TextView(getActivity());
  11. params.setMargins(margin, margin, margin, margin);
  12. v.setLayoutParams(params);
  13. v.setLayoutParams(params);
  14. v.setGravity(Gravity.CENTER);
  15. v.setText("通讯录界面");
  16. v.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,12, dm));
  17. fl.addView(v);
  18. return fl;
  19. }
  20. }
最后修改MainActivity中的代码，加入PagerSlidingTabStrip的配置，如下所示：
[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. public class MainActivityextends FragmentActivity {
  3. /**
  4. * 聊天界面的Fragment
  5. */
  6. private ChatFragment chatFragment;
  8. /**
  9. * 发现界面的Fragment
  10. */
  11. private FoundFragment foundFragment;
  13. /**
  14. * 通讯录界面的Fragment
  15. */
  16. private ContactsFragment contactsFragment;
  18. /**
  19. * PagerSlidingTabStrip的实例
  20. */
  21. private PagerSlidingTabStrip tabs;
  23. /**
  24. * 获取当前屏幕的密度
  25. */
  26. private DisplayMetrics dm;
  28. @Override
  29. protected void onCreate(Bundle savedInstanceState) {
  30. super.onCreate(savedInstanceState);
  31. setContentView(R.layout.activity_main);
  32. setOverflowShowingAlways();
  33. dm = getResources().getDisplayMetrics();
  34. ViewPager pager = (ViewPager) findViewById(R.id.pager);
  35. tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
  36. pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
  37. tabs.setViewPager(pager);
  38. setTabsValue();
  39. }
  41. /**
  42. * 对PagerSlidingTabStrip的各项属性进行赋值。
  43. */
  44. private void setTabsValue() {
  45. // 设置Tab是自动填充满屏幕的
  46. tabs.setShouldExpand(true);
  47. // 设置Tab的分割线是透明的
  48. tabs.setDividerColor(Color.TRANSPARENT);
  49. // 设置Tab底部线的高度
  50. tabs.setUnderlineHeight((int) TypedValue.applyDimension(
  51. TypedValue.COMPLEX_UNIT_DIP, 1, dm));
  52. // 设置Tab Indicator的高度
  53. tabs.setIndicatorHeight((int) TypedValue.applyDimension(
  54. TypedValue.COMPLEX_UNIT_DIP, 4, dm));
  55. // 设置Tab标题文字的大小
  56. tabs.setTextSize((int) TypedValue.applyDimension(
  57. TypedValue.COMPLEX_UNIT_SP, 16, dm));
  58. // 设置Tab Indicator的颜色
  59. tabs.setIndicatorColor(Color.parseColor("#45c01a"));
  60. // 设置选中Tab文字的颜色 (这是我自定义的一个方法)
  61. tabs.setSelectedTextColor(Color.parseColor("#45c01a"));
  62. // 取消点击Tab时的背景色
  63. tabs.setTabBackground(0);
  64. }
  66. public class MyPagerAdapterextends FragmentPagerAdapter {
  68. public MyPagerAdapter(FragmentManager fm) {
  69. super(fm);
  70. }
  72. private final String[] titles = {"聊天", "发现","通讯录" };
  74. @Override
  75. public CharSequence getPageTitle(int position) {
  76. return titles[position];
  77. }
  79. @Override
  80. public int getCount() {
  81. return titles.length;
  82. }
  84. @Override
  85. public Fragment getItem(int position) {
  86. switch (position) {
  87. case 0:
  88. if (chatFragment == null) {
  89. chatFragment = new ChatFragment();
  90. }
  91. return chatFragment;
  92. case 1:
  93. if (foundFragment ==null) {
  94. foundFragment = new FoundFragment();
  95. }
  96. return foundFragment;
  97. case 2:
  98. if (contactsFragment == null) {
  99. contactsFragment = new ContactsFragment();
  100. }
  101. return contactsFragment;
  102. default:
  103. return null;
  104. }
  105. }
  107. }
  108. ......
  109. }
配置也比较简单，可以看到，首先我们在onCreate()方法中分别获取了PagerSlidingTabStrip和ViewPager的实例，然后给ViewPager设置了一个Adapter，Adapter中存放了ChatFragment、FoundFragment和ContactsFragment这三个Fragment，这样就可以实现在聊天、发现、通讯录这三个界面之间滑动的效果了。

接着将ViewPager的实例设置到了PagerSlidingTabStrip中，然后调用setTabsValue()方法来对PagerSlidingTabStrip的细节进行配置，以实现和微信Tab一模一样的效果。每个属性的作用在代码中都有注释描述，这里我就不再解释了。其中有一点需要注意，setSelectedTextColor()这个方法是我自定义的，因为PagerSlidingTabStrip并不支持高亮显示选中Tab那一项的标题，而微信却有这个效果，因此我在这里对PagerSlidingTabStrip的源码进行了修改，如果你看的是原生的PagerSlidingTabStrip代码，将无法找到这个方法。
好了，到这里代码就全部都写完了，让我们运行一下看看效果吧，如下图所示：

恩，效果还是相当不错的，标题叫高仿微信主界面一点都不算过分吧？经过前后三篇文章的学习，我相信大家对ActionBar的技术都已经掌握的非常好了，那么我们ActionBar系列的文章也就到此结束。

好了，今天的讲解就到这里，有疑问的朋友可以在下面留言。

0 0
汉字图像数据集 汉字图像数据集
原创粉丝点击
热门IT博客
人工智能工程师的一天人工智能工程师的一天
2k16mc捏脸数据乔丹2k16mc捏脸数据乔丹
最新股市交易软件下载
淘宝新手卖家群
大班美工 剪纸花瓣
mac网页下拉菜单打不开
优化软件排行榜
s7200仿真软件中文版
六十耳顺 七十知天命
跨语言大数据平台译见
c语言文件fclose
网络作家如何赚钱
vue.js string转int
手机挡字幕软件
百度知道与知乎
蓝科cms
银魂 虚 知乎
linux eth0配置ip
linux 查看文件夹权限
手机怎么申请淘宝账号
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 龙门遁甲流 遁甲紫青都帅 三国之霸戟遁甲天书 遂 遂溪 遂昌 遂川 遂平 遂州 上遂 遂读音 遂怎么读 遂怎么读音 遂拼音 遂的拼音 遂意思 功成名遂 犯罪既遂 遂溪醒狮 遂昌金矿 铁血遂明 遂昌旅游 遂平在线 天遂人愿 遂的意思 遂组词 春天遂想起 遂字怎么读 半身不遂意思 半身不遂定上海新科脑康 半身不遂在上海新科脑康 半身不遂询上海新科脑康 半身不遂来上海新科脑康 半身不遂问上海新科脑康 半身不遂选上海新科脑康 半身不遂赞上海新科脑康 轻度半身不遂 遂宁 遂宁网 遂宁马拉松 遂宁市

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里