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

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

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

一、定义主题样式

这里解释一下这些属性的含义，在我的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

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