高仿微信APP实战（一）-Actionbar的制作与应用

本文是仿微信app实战系列的第一部分，先从简单的做起，边做边学习。从顶部actionbar开始，先看一下效果图：

一、定义主题样式

<resources> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:textColorPrimary">@color/white</item> <item name="android:itemTextAppearance">@style/WeChatActionBarOverflow</item> <item name="actionOverflowMenuStyle">@style/weixinOverflowMenuStyle</item> </style> <style name="weixinOverflowMenuStyle"> <item name="android:popupBackground">@color/colorPrimary</item> </style> <style name="WeChatActionBarOverflow" parent="@android:style/Widget.ActionButton.Overflow"> <item name="android:textColor">@color/white</item> </style> </resources>

这里解释一下这些属性的含义，在我的APP Theme中定 义了一些颜色，这里用一幅图进行讲解：

这里自定义了一个actionOverflowMenuStyle，由于主题中默认的popupmenu item的背景色为白色，设置po’pupBackground属性将item的背景色设为Actionbar的颜色。注意这里的style不要继承Widget.AppCompat.PopupMenu.Overflow，因为默认情况下或者继承这个style后，popupmenu会遮挡actionbar。 接着设置itemTextAppearance属性，将item字体颜色改成白色。

二、定义menu

在res/menu文件夹下创建menu_main.xml

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_search" android:actionViewClass="android.widget.SearchView" android:icon="@drawable/actionbar_search_icon" app:showAsAction="always" android:title="@string/action_search"/> <item android:id="@+id/action_overflow" android:icon="@drawable/actionbar_add_icon" android:title="overflow" app:showAsAction="always"> <menu> <item android:id="@+id/action_group_chat" android:icon="@drawable/menu_group_chat_icon" android:title="@string/menu_group_chat"/> <item android:id="@+id/action_add_friend" android:icon="@drawable/menu_add_icon" android:title="@string/menu_addfriend"/> <item android:id="@+id/action_scan" android:icon="@drawable/men_scan_icon" android:title="@string/menu_scan"/> <item android:id="@+id/action_money" android:icon="@drawable/menu_card_icon" android:title="@string/menu_money"/> <item android:id="@+id/action_feedback" android:icon="@drawable/menu_feedback_icon" android:tile="@string/menu_feedback"/> </menu> </item> </menu>

这里使用双层menu嵌套实现，这样做有两个好处。一个是可以自定义overflowButton，就是微信右上角的加号，而不是使用默认的三个点的图标。第二个是点击系统自带的overflowButton弹出的menu不会显示配置的icon图标，网上很多仿微信actionBar使用反射来解决，即在onPrepareOptionsPanel用反射设置setOptionalIconsVisible为true，完全没有必要。

//完全没必要 @Override protected boolean onPrepareOptionsPanel(View view, Menu menu) { if (menu != null && menu.getClass() == MenuBuilder.class){ try { Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE); m.setAccessible(true); m.invoke(menu,true); }catch (Exception e){ e.printStackTrace(); } } return super.onPrepareOptionsPanel(view, menu); }

三、Activity中的逻辑

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return super.onCreateOptionsMenu(menu); } }

这里逻辑比较简单不做解释了。到此微信Actionbar的基本样子就已经实现，后续会继续添加功能。