Android制作微信app頂部menu菜單（ActionBar）

更新時(shí)間：2017年02月25日 10:49:57 作者：小破孩123

這篇文章主要為大家詳細(xì)介紹了Android利用ActionBar制作微信app頂部menu菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

使用微信APP的小伙伴對于微信的ActionBar一定有印象，今天就帶領(lǐng)大家一起實(shí)現(xiàn)以下這個(gè)效果。

　　第一步打開我們的開發(fā)工具，這里我使用的是Eclipse+ADT插件，然后創(chuàng)建我們的工程，這里選擇Android的最低版本號(hào)為3.0或以上。

　　然后開始我們的"抄襲"，首先打開我們微信，我們看到，頂部標(biāo)題部分，分為左右兩部分，左側(cè)為"微信"兩字，右側(cè)則為搜索按鈕+更多按鈕，點(diǎn)擊搜索按鈕，會(huì)出現(xiàn)一個(gè)文本輸入框。點(diǎn)擊更多按鈕，則會(huì)出現(xiàn)隱藏的menu菜單，分為：添加好友、發(fā)起群聊、掃一掃、付款。好了有了設(shè)計(jì)的框架，我們下面就開始我們的開發(fā)。

　　首先打開我們工程，在MainActivity.java文件中有一個(gè)onCreateOptionsMenu方法，這個(gè)方法就是初始化創(chuàng)建我們menu菜單的方法。我們可以看到，默認(rèn)引用的是res-->menu文件夾下的main.xml文件，默認(rèn)系統(tǒng)為我們生成一個(gè)settings按鈕，接下來我們就來修改一下這個(gè)文件，然后把我們的菜單添加上：

<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文件夾下，打開一個(gè)文件名為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">發(fā)起群聊</string>
 <string name="menu_getMonery">收款</string>
 <string name="menu_look">掃一掃</string>
 
 <string name="welcome">您好，滿藝</string>
 
</resources>

　　到這里我們現(xiàn)在運(yùn)行我們的程序，局可以看到我們程序的頂部出現(xiàn)了類似微信的效果，左側(cè)是應(yīng)用圖標(biāo)+應(yīng)用名稱，右側(cè)則是一個(gè)搜索按鈕+表示更多的按鈕?，F(xiàn)在我們先來將系統(tǒng)默認(rèn)自帶的更多圖標(biāo)換成，我們定制的一個(gè)按鈕。打開我們的AndroidManifest.xml，我們會(huì)發(fā)現(xiàn)系統(tǒng)默認(rèn)我們應(yīng)用了一個(gè)樣式文件android:theme="@style/AppTheme"，點(diǎn)擊打開這個(gè)樣式文件，將我們的自定義更多圖標(biāo)添加到樣式上：

<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>

　　現(xiàn)在我們運(yùn)行我們的工程，會(huì)發(fā)現(xiàn)和微信的效果還是有些不同，這是我們就要通過在MainActivity.java文件中，1通過反射機(jī)制來設(shè)置自定義更多圖標(biāo)顯示，2重寫onMenuOpened方法來設(shè)置每一個(gè)menu菜單像微信那樣，顯示為圖標(biāo)加標(biāo)題的形式。

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);//設(shè)置ActionBar應(yīng)用圖標(biāo)不顯示
 }

 //初始化Menu
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  menu.add(Menu.NONE,Menu.FIRST+6,7,"新增").setIcon(android.R.drawable.ic_input_add);//手動(dòng)添加menu菜單
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }
 
 //添加Menu的點(diǎn)擊事件
 @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);
 }
 
 //設(shè)置menu菜單的第一個(gè)圖標(biāo)顯示在標(biāo)題右上角---使用反射機(jī)制來完成
 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();
  }
 }
 
 //設(shè)置每個(gè)Menu顯示為左圖標(biāo)右標(biāo)題
 @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()方法，從而為每一個(gè)menu菜單添加點(diǎn)擊事件。

好了到這里關(guān)于微信app頂部部分的menu菜單的實(shí)現(xiàn)就和大家分享完畢，歡迎一起交流學(xué)習(xí)。

您可能感興趣的文章: