使用微信APP的小伙伴對于微信的ActionBar一定有印象，今天就帶領大家一起實現以下這個效果。
第一步打開我們的開發工具，這里我使用的是Eclipse+ADT插件，然后創建我們的工程，這里選擇Android的最低版本號為3.0或以上。
然后開始我們的"抄襲"，首先打開我們微信，我們看到，頂部標題部分，分為左右兩部分，左側為"微信"兩字，右側則為搜索按鈕+更多按鈕，點擊搜索按鈕，會出現一個文本輸入框。點擊更多按鈕，則會出現隱藏的menu菜單，分為：添加好友、發起群聊、掃一掃、付款。好了有了設計的框架，我們下面就開始我們的開發。
首先打開我們工程，在MainActivity.java文件中有一個onCreateOptionsMenu方法，這個方法就是初始化創建我們menu菜單的方法。我們可以看到，默認引用的是res-->menu文件夾下的main.xml文件，默認系統為我們生成一個settings按鈕，接下來我們就來修改一下這個文件，然后把我們的菜單添加上：
<menu xmlns:android="http://schemas.android.com/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="http://schemas.android.com/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 java.lang.reflect.Field;import java.lang.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(R.layout.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菜單的實現就和大家分享完畢，歡迎一起交流學習。
新聞熱點
疑難解答
