高仿微信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的基本样子就已经实现，后续会继续添加功能。