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 plain copy

1. <menu xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     tools:context="com.example.wechatsample.MainActivity" >  
4.   
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"/>  
37.   
38. </menu>  

这个文件中每个属性的含义我在前两篇文章中都有讲解过，这里就不再重复说明了。需要注意的是，<item>标签中指定的icon图标都是我事先准备好的，指定的title文字都是定义在string.xml中的，最后我会把源码附上，大家可以在源码中找到这些图标和文字。

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

[java]  view plain copy

1. public class PlusActionProvider extends ActionProvider {  
2.   
3.     private Context context;  
4.   
5.     public PlusActionProvider(Context context) {  
6.         super(context);  
7.         this.context = context;  
8.     }  
9.   
10.     @Override  
11.     public View onCreateActionView() {  
12.         return null;  
13.     }  
14.   
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.     }  
59.   
60.     @Override  
61.     public boolean hasSubMenu() {  
62.         return true;  
63.     }  
64.   
65. }  

自定义Action Provider的方法我也已经在上一篇文章中介绍过了，相信你看这个类的时候应该感觉非常简单易懂。这里我们在PlusActionProvider中定义了五个子菜单，每个子菜单中都指定了一个标题和一个图标，分别就对应了微信中的那五个子菜单。另外，这里虽然给每个子菜单都定义了一个点击事件，但是点击件事里面的实现都是空的，因为我们本篇文章只是模仿微信的界面实现而已，功能就不谈啦。

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

[java]  view plain copy

1. public class MainActivity extends Activity {  
2.