Android制作微信app顶部menu菜单（ActionBar）

Android制作微信app顶部menu菜单（ActionBar）
使⽤微信APP的⼩伙伴对于微信的ActionBar⼀定有印象，今天就带领⼤家⼀起实现以下这个效果。

第⼀步打开我们的开发⼯具，这⾥我使⽤的是Eclipse+ADT插件，然后创建我们的⼯程，这⾥选择Android的最低版本号为3.0或以上。

然后开始我们的"抄袭"，⾸先打开我们微信，我们看到，顶部标题部分，分为左右两部分，左侧为"微信"两字，右侧则为搜索按钮+更多按钮，点击搜索按钮，会出现⼀个⽂本输⼊框。

点击更多按钮，则会出现隐藏的menu菜单，分为：添加好友、发起群聊、扫⼀扫、付款。

好了有了设计的框架，我们下⾯就开始我们的开发。

⾸先打开我们⼯程，在MainActivity.java⽂件中有⼀个onCreateOptionsMenu⽅法，这个⽅法就是初始化创建我们menu 菜单的⽅法。

我们可以看到，默认引⽤的是res-->menu⽂件夹下的main.xml⽂件，默认系统为我们⽣成⼀个settings按钮，接下来我们就来修改⼀下这个⽂件，然后把我们的菜单添加上：
<menu xmlns:android="/apk/res/android" >
<item
android:id="@+id/search"
android:showAsAction="ifRoom|collapseActionView"
android:actionViewClass="android.widget.SearchView"
android:icon="@drawable/ic_menu_search"
android:title="@string/action_search"/>
<item
android:id="@+id/addFriend"
android:icon="@drawable/ic_menu_rotate"
android:title="@string/menu_addFrideds"/>
<item
android:id="@+id/teamChart"
android:icon="@drawable/ic_menu_refresh"
android:title="@string/menu_teamChart"/>
<item
android:id="@+id/monery"
android:icon="@drawable/ic_menu_preferences"
android:title="@string/menu_getMonery"/>
<item
android:id="@+id/look"
android:icon="@drawable/ic_menu_save"
android:title="@string/menu_look"/>
</menu>
写好这⽂件，我还需要在我们的res-->values⽂件夹下，打开⼀个⽂件名为strings.xml的⽂件，来配置我们的中⽂常量。

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">满艺</string>
<string name="action_search">检索</string>
<string name="action_more">更多</string>
<string name="menu_addFrideds">添加朋友</string>
<string name="menu_teamChart">发起群聊</string>
<string name="menu_getMonery">收款</string>
<string name="menu_look">扫⼀扫</string>
<string name="welcome">您好，满艺</string>
</resources>
到这⾥我们现在运⾏我们的程序，局可以看到我们程序的顶部出现了类似微信的效果，左侧是应⽤图标+应⽤名称，右侧则是⼀个搜索按钮+表⽰更多的按钮。

现在我们先来将系统默认⾃带的更多图标换成，我们定制的⼀个按钮。

打开我们的AndroidManifest.xml，我们会发现系统默认我们应⽤了⼀个样式⽂件android:theme="@style/AppTheme"，点击打开这个样式⽂件，将我们的⾃定义更多图标添加到样式上：
<resources xmlns:android="/apk/res/android">
Base application theme for API 14+. This theme completely replaces
AppBaseTheme from BOTH res/values/styles.xml and
res/values-v11/styles.xml on API 14+ devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- API 14 theme customizations can go here. -->
<item name="android:actionOverflowButtonStyle">@style/menuOverflowButtonStyle</item>
</style>
<style name="menuOverflowButtonStyle">
<item name="android:src">@drawable/ic_menu_more</item>
</style>
</resources>
现在我们运⾏我们的⼯程，会发现和微信的效果还是有些不同，这是我们就要通过在MainActivity.java⽂件中，1通过反射机制来设置⾃定义更多图标显⽰，2重写onMenuOpened⽅法来设置每⼀个menu菜单像微信那样，显⽰为图标加标题的形式。

package com.example.androidmenuview;
import ng.reflect.Field;
import ng.reflect.Method;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewConfiguration;
import android.view.Window;
import android.widget.Toast;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(yout.activity_main);
setMenuOverflowAlways();
getActionBar().setDisplayShowHomeEnabled(false);//设置ActionBar应⽤图标不显⽰
}
//初始化Menu
@Override
public boolean onCreateOptionsMenu(Menu menu) {
menu.add(Menu.NONE,Menu.FIRST+6,7,"新增").setIcon(android.R.drawable.ic_input_add);//⼿动添加menu菜单
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
//添加Menu的点击事件
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.search:
// Toast.makeText(this, "检索按钮", Toast.LENGTH_SHORT).show();
break;
case R.id.addFriend:
// Toast.makeText(this, "添加朋友", Toast.LENGTH_SHORT).show();
break;
case R.id.teamChart:
// Toast.makeText(this, "群聊", Toast.LENGTH_SHORT).show();
break;
case R.id.look:
// Toast.makeText(this, "扫⼀扫", Toast.LENGTH_SHORT).show();
break;
case R.id.monery:
// Toast.makeText(this, "收款", Toast.LENGTH_SHORT).show();
break;
case Menu.FIRST+6:
// Toast.makeText(this, "新增", Toast.LENGTH_SHORT).show();
break;
Toast.makeText(this, item.getTitle(), Toast.LENGTH_SHORT).show();
return super.onOptionsItemSelected(item);
}
//设置menu菜单的第⼀个图标显⽰在标题右上⾓---使⽤反射机制来完成
public void setMenuOverflowAlways(){
try {
ViewConfiguration config = ViewConfiguration.get(this);
Field field = ViewConfiguration.class.getDeclaredField("sHasPermanentMenuKey");
field.setAccessible(true);
field.setBoolean(config, false);
} catch (Exception e) {
e.printStackTrace();
}
}
//设置每个Menu显⽰为左图标右标题
@Override
public boolean onMenuOpened(int featureId, Menu menu) {
if(featureId == Window.FEATURE_ACTION_BAR && menu != null){
if(menu.getClass().getSimpleName().equals("MenuBuilder")){
try {
Method method = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
method.setAccessible(true);
method.invoke(menu, true);
} catch (Exception e) {
e.printStackTrace();
}
}
}
return super.onMenuOpened(featureId, menu);
}
}
这⾥我从写了onOptionsItemSelected()⽅法，从⽽为每⼀个menu菜单添加点击事件。

好了到这⾥关于微信app顶部部分的menu菜单的实现就和⼤家分享完毕，欢迎⼀起交流学习。